001 vue
https://cn.vuejs.org/
文章目录
- v-bind
- v-model
- v-on
- 修饰符
- 条件渲染/控制：v-if v-show
- 列表渲染
M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不再关心Model和View之间是如何互相影响的
只要Model发生了改变，View上自然会表现出来
当用户修改了View，Model中的数据也会跟着改变。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue快速入门</title>
</head>
<body>
<div id="app">
<!--
1.{{message}}：插值表达式
2. message 就是从model的data数据池来设置
3. 代码执行时，会到data{}数据池中去匹配数据，如果匹配上，就进行替换，如果没有匹配上，就输出空
-->
<h1>欢迎你{{message}}--{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
//创建Vue对象
/**
* 1.创建Vue对象实例
*
*/
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）
message: "Hello-Vue",
name: "xd"
}
})
console.log(vm._data.message);
console.log(vm._data.name);
console.log(vm.message);
console.log(vm.name);
</script>
</body>
</html>
注意代码顺序，要求div在前，script在后，否则无法绑定数据
Vue.js采用简洁的模板语法来声明式地将数据渲染进DOM的系统，做到数据和显示分离
Vue没有繁琐的DOM操作，如果使用jQuery，我们需要先找到div节点，获取到DOM对象，然后进行节点操作，显然Vue更加简洁
v-bind
v-bind指令可以完成基本数据渲染/绑定
v-bind简写形式就是一个冒号（:）
插值表达式是用在标签体的
如果给标签属性绑定值，则使用v-bind指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>单向数据渲染</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!--
1.使用插值表达式引用data数据池数据是在标签体内
2.如果在标签/元素的属性上引用data数据池数据时，不能使用插值表达式，需要使用v-bind
-->
<img v-bind:src="img_src" v-bind:width="img_width">
<img v-bind:src="img_src" v-bind:width="img_width">
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）
message: "hello",
img_src: "1.png",
img_width: "200px"
}
})
</script>
</body>
</html>
v-model
v-model可以完成双向数据绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>双向数据渲染</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!--
1.v-bind是数据单向渲染：data数据池绑定的数据变化，会影响view
2.v-model="hobby.val" 是数据的双向渲染，(1)data数据池绑定的数据变化，会影响view
(2)view关联的元素值变化，会影响data数据池的数据
-->
<input type="text" v-model="hobby.val"><br />
<input type="text" v-bind:value="hobby.val"><br />
<p>你输入的爱好是：{{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）
message: "hi，输入你的爱好",
hobby: {
val: "购物"
}
}
})
</script>
</body>
</html>
v-on
使用v-on进行事件处理，比如：v-on:click表示处理鼠标点击事件
事件调用的方法定义在vue对象声明的methods节点中
v-on：事件名 可以绑定指定事件
如果方法没有参数，可以省略()[需要浏览器支持]
v-on指定的简写形式 @[需要浏览器支持]
查看可以绑定的事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<!--视图-->
<div id="app">
<h1>{{message}}</h1>
<!--
1.v-on:click 表示给button元素绑定一个click的事件
2.sayHi()表示绑定的方法，在方法池methods{}定义的
-->
<button onclick="sayHi()">点击输出</button>
<button v-on:click="sayOk()">点击输出</button>
<button>点击输出</button>
<button>点击输出</button>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<!--创建一个vue实例，并挂载到id=app的div-->
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）
message: "Vue事件处理的案例",
name: "xd"
},
//是一个methods属性，对应的值是对象
//在{}中，可以写很多的方法
methods: {
sayHi() {
console.log("hi,1");
},
sayOk() {
console.log("ok,2");
}
}
})
</script>
</body>
</html>
修饰符
修饰符（Modifiers）是以（.）指明的后缀，指出某个指令以特殊方式绑定。
在事件处理程序中调用event,preventDefault()或event.stopPropagation()。
Vue.js为v-on提供了事件修饰符。
.stop
.prevent
.capture
.self
.once
.passive
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue修饰符使用</title>
</head>
<body>
<div id="app">
<!--
1. 修饰符用于指出一个指令应该以特殊方式绑定。
2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为
3. 执行 程序员指定的方法
-->
<form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
妖怪名: <input type="text" v-model="monster.name"><br/><br/>
<button type="submit">注册</button>
</form>
<p>服务返回的数据是{{count}}</p>
<h1>修饰符扩展案例</h1>
<button v-on:click.once="onMySubmit">点击一次</button><br/>
<input type="text" v-on:keyup.enter="onMySubmit">
<input type="text" v-on:keyup.down="onMySubmit">
<input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {//数据池
monster: {//monster数据(对象)的属性, 可以动态生成
},
count: 0
},
methods: {//方法池
onMySubmit() {
//console.log("我们自己的表单提交处理...");
//"", null, undefined都是false
if(this.monster.name) {
console.log("提交表单 name=", this.monster.name);
//这里，程序员就可以根据自己的业务发出ajax请求到后端
//得到数据后，在进行数据更新
this.count = 666;
} else {
this.count = 0;
console.log("请输入名字..");
}
}
}
})
</script>
</body>
</html>
条件渲染/控制：v-if v-show
Vue提供了v-if和v-show条件指令完成条件渲染/控制
v-if会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
v-show机制相对简单，不管初始条件是什么，元素总是会被渲染，并且只是对CSS进行切换
使用建议：如果要频繁地切换，建议使用v-show；如果运行时条件很少改变，使用v-if较好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染 v-if</title>
</head>
<body>
<div id="app">
<!--这里还可以看到checkbox的 checked属性的值-->
<input type="checkbox" v-model="sel">是否同意条款[v-if实现]
<!--
v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件 <h1>
-->
<h1 v-if="sel">你同意条款</h1>
<h1 v-else>你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>
//为了调试方便, 使用vm接收Vue实例
let vm = new Vue({
el: '#app',
data: {//data数据池
sel: false
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染 v-show</title>
</head>
<body>
<div id="app">
<!--这里还可以看到checkbox的 checked属性的值-->
<input type="checkbox" v-model="sel">是否同意条款[v-show实现]
<h1 v-show="sel">你同意条款</h1>
<h1 v-show="!sel">你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>
//为了调试方便, 使用vm接收Vue实例
let vm = new Vue({
el: '#app',
data: {//data数据池
sel: false
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for 列表渲染</title>
</head>
<body>
<div id="app">
<!--
基本语法:
<li v-for="变量 in 数字">{{ 变量 }}</li>-->
<h1>简单的列表渲染</h1>
<ul>
<li v-for="i in 3">{{i}}</li>
</ul>
<!--
基本语法:
<li v-for="(变量, 索引) in 值">{{ 变量 }} - {{ 索引 }}</li>
-->
<h1>简单的列表渲染-带索引</h1>
<ul>
<li v-for="(i,index) in 3">{{i}}-{{index}}</li>
</ul>
<h1>遍历数据列表</h1>
<!-- 语法:
<tr v-for="对象 in 对象数组">
<td>{{对象的属性}}</td>
</tr>
-->
<table width="400px" border="1px">
<tr v-for="(monster,index) in monsters">
<td>{{index}}</td>
<td>{{monster.id}}</td>
<td>{{monster.name}}</td>
<td>{{monster.age}}</td>
</tr>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: { //数据池
monsters: [
{id: 1, name: '牛魔王', age: 800},
{id: 2, name: '黑山老妖', age: 900},
{id: 3, name: '红孩儿', age: 200}
]
}
})
</script>
</body>
</html>