15 KiB
以下是正文。
Vue初体验
新建一个空的项目，引入vue.js文件。写如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
{{name}}
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: {//data就是MVVM中的 module
name: 'smyhvae'
}
});
</script>
</html>
显示效果：
如果我们在控制台输入myVue.$data.name = 'haha'，页面会自动更新name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。
下面来讲一下Vue的各种系统指令。
v-on：注册事件
v-on 的用法举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
<!-- 给button节点绑定按钮的点击事件 -->
{{name}}
<button v-on:click="change">改变name的值</button>
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: { //data就是MVVM中的 module
name: 'smyhvae'
},
//注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
methods: {
change: function() { //上面的button按钮的点击事件
this.name += '1';
}
}
});
</script>
</html>
上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
v-on的简写形式
例如：
<button v-on:click="change">改变name的值</button>
可以简写成：
<button @click="change">改变name的值</button>
v-on的常用事件
-
v-on:click
-
v-on:keydown
-
v-on:keyup
-
v-on:mousedown
-
v-on:mouseover
-
v-on:submit
-
....
v-on的事件修饰符
v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
-
.stop阻止冒泡。本质是调用 event.stopPropagation()。 -
.prevent阻止默认事件。本质是调用 event.preventDefault()。 -
.capture添加事件监听器时，使用 capture 模式。 -
.self只有当事件是从侦听器绑定的元素本身触发时，才触发回调。 -
``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
-
``.native` 监听组件根元素的原生事件。
写法示范：
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
举例：（.prevent的用法举例）
现在有一个form表单：
<form action="http://www.baidu.com">
<input type="submit" value="表单提交">
</form>
我们知道，上面这个表单因为type="submit"，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
现在，我们可以用.prevent来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 阻止表单中submit的默认事件 -->
<form @submit.prevent action="http://www.baidu.com">
<!-- 执行自定义的click事件 -->
<input type="submit" @click="mySubmit" value="表单提交">
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
mySubmit: function() {
alert('ok');
}
}
});
</script>
</html>
上方代码中，我们通过.prevent阻止了提交按钮的默认事件，点击按钮后，执行的是mySubmit()方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为submit，反正默认的submit已经失效了。
插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。 无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会自动更新。
{{}}对JavaScript 表达式支持，例如：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
v-text
v-text可以将一个变量的值渲染到指定的元素中。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<span v-text="name"></span>
</div>
</body>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello smyhvae'
}
});
</script>
</html>
结果：
v-html
v-text是纯文本，而v-html会被解析成html元素。
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
v-cloak
v-cloak：保持和元素实例的关联，直到结束编译后自动消失。
这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过v-cloak隐藏元素，当加载完毕后，再显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
/*网络很慢时，在span上加上 v-cloak和css样式控制以后，浏览器在加载时会先把span隐藏起来。
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="div1">
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello1 smyhvae22'
}
});
</script>
</html>
v-bind
v-bind：给html元素或者组件动态绑定一个或多个特性，例如动态绑定style和class。
比如说：
<img v-bind:src="imageSrc">
<div v-bind:style="{ fontSize: size + 'px' }"></div>
上方代码中的imageSrc和size其实是Vue实例里面的变量。
上面两行代码可以简写成：
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<!-- value里的值只是简单的字符串 -->
<input type="text" value="name">
<!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
<input type="text" v-bind:value="name">
<!-- 超链接后面的path是 Vue 里面的变量 -->
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'smyhvae',
path: `2.html`
}
});
</script>
</html>
效果：
v-model：双向数据绑定
上面的一段中，我们通过v-bind，给<input>标签绑定了data对象里的name属性。当data -> name的值发生改变时，<input>标签里的内容会自动更新。
可我现在要做的是：我在<input>标签里修改内容，要求data -> name的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用v-model这个属性。
代码举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<form action="#">
<input type="text" id="username" v-model="myAccount.username">
<input type="password" id="pwd" v-model="myAccount.userpwd">
<input type="submit" v-on:click="submit1" value="注册">
</form>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
//上面的标签中采用v-model进行双向数据绑定，数据会自动更新到data里面来
data: {
name: 'smyhvae',
myAccount: {username: '', userpwd: ''}
},
//在methods里绑定各种方法，根据业务需要进行操作
methods: {
submit1: function () {
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
}
}
});
</script>
</html>
此时，便可实现我们刚刚要求的双向数据绑定的效果。
v-for：for循环
作用：根据数组中的元素遍历指定模板内容生成内容。
引入
比如说，如果我想给一个ul中的多个li分别赋值1、2、3...。如果不用循环，就要挨个赋值：
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
});
</script>
效果：
为了实现上面的效果，如果我用v-for进行赋值，代码就简洁很多了：
<body>
<div id="app">
<ul>
<!-- 使用v-for对多个li进行遍历赋值 -->
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
});
</script>
接下来，我们详细讲一下v-for的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
数组的遍历赋值
针对下面这样的数组：
<script>
new Vue({
el: '#app',
data: {
arr1: [2, 5, 3, 1, 1],
}
});
</script>
将数组中的值赋给li：
<li v-for="item in arr1">{{item}}</li>
将数组中的值和index赋给li：
<!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index -->
<li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
效果如下：
对象的遍历赋值
针对下面这样的对象：
<script>
new Vue({
el: '#app',
data: {
obj1: {
name: 'smyhvae',
age: '26',
gender: '男'
}
}
});
</script>
将上面的obj1对象的数据赋值给li，写法如下：
<body>
<div id="app">
<ul>
<!-- 括号里如果写两个参数：则第一个参数代表value，第二个参数代表key -->
<li v-for="(value,key) in obj1">值：{{value}} --- 键：{{key}} </li>
<h3>---分隔线---</h3>
<!-- 括号里如果写三个参数：则第一个参数代表value，第二个参数代表key，第三个参数代表index -->
<li v-for="(value,key,index) in obj1">值：{{value}} --- 键：{{key}} --- index：{{index}} </li>
</ul>
</div>
</body>
效果如下：
v-if：设置元素的显示和隐藏
作用：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
在切换时，元素和它的数据绑定会被销毁并重建。
举例如下：（点击按钮时，切换和隐藏盒子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">显示/隐藏</button>
<div v-if="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
效果如下：
v-show：设置元素的显示和隐藏
作用：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 display:none属性；否则移除display:none属性。
举例如下：（点击按钮时，切换和隐藏盒子）
我们直接把上一段代码中的v-if改成v-show就可以了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">显示/隐藏</button>
<div v-show="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
效果如下：
v-if和v-show的区别：
v-if和v-show都能够实现对一个元素的隐藏和显示操作。但是v-if是添加/删除DOM元素，而v-show是在这个元素上添加/移除style="display:none"属性。
我的公众号
想学习代码之外的软技能？不妨关注我的微信公众号：生命团队（id：vitateam）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
