1 Vue实例 （VM）
var vm = new Vue({
el:'#app', //挂载元素
//数据
data: {
title:'值',
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>computedtitle> 6 head> 7 <body> 8 <div id="app"> 9 <div> 10 姓：<input type="text" v-model='first_name' /> 11 div> 12 <div> 13 名：<input type="text" v-model='last_name' /> 14 div> 15 16 17 <p>姓名：{ { full_name }}p> 18 div> 19 body> 20 <script type="text/javascript" src="js/vue.js">script> 21 <script type="text/javascript"> 22 var app = new Vue({ 23 el: '#app', 24 data: { 25 first_name: '', 26 last_name: '' 27 }, 28 // methods: { 29 // full_name: function () { 30 // return this.first_name + " " + this.last_name; 31 // } 32 // }, 33 // 一个变量依赖于多个变量，一般对该变量采用计算处理 34 computed: { 35 full_name: function () { 36 return this.first_name + " " + this.last_name; 37 } 38 } 39 }) 40 script> 41 42 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>computedtitle> 6 head> 7 <body> 8 <div id="app"> 9 <div> 10 姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" /> 11 div> 12 <p>姓：{ { first_name }}p> 13 <p>名：{ { last_name }}p> 14 div> 15 body> 16 <script type="text/javascript" src="js/vue.js">script> 17 <script type="text/javascript"> 18 var app = new Vue({ 19 el: '#app', 20 data: { 21 full_name: '', 22 first_name: '', 23 last_name: '' 24 }, 25 watch: { 26 full_name: function () { 27 // 监听full_name，然后拆分为姓与名 28 var fname = this.full_name; 29 var arr = fname.split(' '); 30 this.first_name = arr[0]; 31 this.last_name = arr[1]; 32 } 33 } 34 }) 35 script> 36 37 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>delimiterstitle> 6 head> 7 <body> 8 <div id="app"> 9 { { msg }} [[ msg ]] ${ msg } 10 div> 11 body> 12 <script type="text/javascript" src="js/vue.js">script> 13 <script type="text/javascript"> 14 var app = new Vue({ 15 el: '#app', 16 data: { 17 msg: '数据' 18 }, 19 // delimiters配置自定义绑定符号 20 // 值为拥有两个元素的数组，元素为字符串形式 21 delimiters: ['${ ', '}'] 22 }) 23 script> 24 25 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>生命周期钩子title> 6 head> 7 <body> 8 <div id="app"> 9 { { msg }} 10 div> 11 body> 12 <script type="text/javascript" src="js/vue.js">script> 13 <script type="text/javascript"> 14 var app = new Vue({ 15 el: '#app', 16 data: { 17 msg: '数据' 18 }, 19 // 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行 20 // 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现 21 // 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子 22 beforeCreate: function () { 23 24 }, 25 /* 26 // 系统内部调用 27 if (beforeCreate) { 28 beforeCreate() 29 } 30 // ... 31 // ... 32 if (created) { 33 created() 34 } 35 if (beforeMount) { 36 beforeMount() 37 } 38 // ... 39 */ 40 41 // 数据与事件加载完毕，el并没有进行挂载 42 created: function () { 43 // 获取想要的数据(请求后台) 44 // 事件的解绑或换绑或重新绑定 45 // 对虚拟DOM进行修改 46 }, 47 // DOM树加载完毕，el渲染完毕 48 mounted:function () { 49 // 可能需要对DOM进行操作(交给模块处理) 50 } 51 }) 52 script> 53 54 html>
数据驱动
Vue.set() 或者 vm.$set()
vue实例 的对象
vm.$data
vm.$el
vm.$watch()
Vue.set(数组, 索引, 新值)
Vue.set(对象, 属性, 新值)
2 Vue视图 （V） 模板
2.1 插值
{
{ }}
{
{}}p>
防止闪烁 v-cloak
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>视图title> 6 <style type="text/css"> 7 p { 8 border: 1px solid #ff6700; 9 height: 30px; 10 line-height: 30px; 11 } 12 .abc { 13 border-color: yellowgreen; 14 } 15 [class] { 16 border-width: 5px; 17 } 18 19 [v-cloak] { 20 display: none; 21 } 22 style> 23 <script type="text/javascript" src="js/vue.js">script> 24 head> 25 <body> 26 27 <div id="app"> 28 29 <input type="text" v-model='msg'> 30 <input type="text" v-model='msg'> 31 <p>{ { msg }}p> 32 <p v-text='msg'>p> 33 34 <p v-once>{ { msg }}p> 35 36 <p v-html='msg'>p> 37 38 39 40 41 <p :class='active'>p> 42 43 44 <p @dblclick='func'>p> 45 46 div> 47 body> 48 <script type="text/javascript"> 49 var app = new Vue({ 50 el: '#app', 51 data: { 52 msg: '初值', 53 active: 'abc' 54 }, 55 methods: { 56 func: function () { 57 alert('呵呵') 58 } 59 } 60 }) 61 script> 62 html>
2.2 绑定属性
v-bind:属性=值
:属性=值
v-model="" 用于表单控件 双向数据绑定
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>主要指令v-bindtitle> 6 <script type="text/javascript" src="js/vue.js">script> 7 <style type="text/css"> 8 .a { 9 background-color: red; 10 } 11 .b { 12 color: green; 13 } 14 style> 15 head> 16 <body> 17 <div id="app"> 18 19 20 <p title="abc">p段落p> 21 22 <p v-bind:title="abc">p段落p> 23 24 <p v-bind:title="'abc'">p段落p> 25 26 <p :title="'ABC'">p段落p> 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈div> 44 45 46 47 48 49 <a :style="color" href="">百度a> 50 <a :style="{color: 'red', backgroundColor: 'black'}" href="">京东a> 51 div> 52 body> 53 <script type="text/javascript"> 54 new Vue({ 55 el: '#app', 56 data: { 57 abc: 'ABC', 58 a: 'a', 59 b: 'b', 60 // color: 'color: red' 61 color: { 62 color: 'red', 63 // 支持驼峰命名法 64 backgroundColor: 'orange' 65 } 66 } 67 }) 68 script> 69 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>主要指令v-modeltitle> 6 <script type="text/javascript" src="js/vue.js">script> 7 <style type="text/css"> 8 9 style> 10 head> 11 <body> 12 <div id="app"> 13 14 15 <form action="" method="get"> 16 17 18 <div> 19 <input type="text" name="usr" v-model="in_val"> 20 <input type="password" name="ps" v-model="in_val" > 21 <textarea name="info" v-model="in_val">textarea> 22 div> 23 24 25 <div> 26 27 28 男：<input type="radio" name="sex" value="男" v-model="ra_val"> 29 女：<input type="radio" name="sex" value="女" v-model="ra_val"> 30 { { ra_val }} 31 div> 32 33 34 35 36 <div> 37 <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" /> 38 { { sin_val }} 39 div> 40 41 42 43 <div> 44 <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' /> 45 <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' /> 46 <input type="checkbox" value="不挑" name="cless" v-model='more_val' /> 47 { { more_val }} 48 div> 49 50 <input type="submit"> 51 form> 52 53 div> 54 body> 55 <script type="text/javascript"> 56 new Vue({ 57 el: '#app', 58 data: { 59 in_val: '', 60 // 默认值可以决定单选框默认选项 61 ra_val: '男', 62 // 默认值为true，单一复选框为选中，反之false为不选中 63 sin_val: '', 64 // 数组中存在的值对应的复选框默认为选中状态 65 more_val: ['喜好女的','不挑'] 66 } 67 }) 68 script> 69 html>
2.3 指令
v-bind
v-on
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>主要指令v-ontitle> 6 <script type="text/javascript" src="js/vue.js">script> 7 <style type="text/css"> 8 9 style> 10 head> 11 <body> 12 <div id="app"> 13 14 <div v-on:click="fn1">{ { msg }}div> 15 16 <div @click="fn2">{ { msg }}div> 17 18 <div @click='fn3'>{ { msg }}div> 19 20 <div @click="fn4(msg, 88888)">{ { msg }}div> 21 22 <div @click="fn5($event, msg)">{ { msg }}div> 23 div> 24 body> 25 <script type="text/javascript"> 26 new Vue({ 27 el: '#app', 28 data: { 29 msg: '默认值' 30 }, 31 methods: { 32 fn1: function () { 33 alert('呵呵') 34 }, 35 fn2 () { 36 alert('嘻嘻') 37 }, 38 fn3 (obj) { 39 console.log(obj) 40 }, 41 fn4 (obj, num) { 42 console.log(obj, num) 43 console.log(this.msg) 44 }, 45 fn5 (ev, msg) { 46 console.log(ev, msg) 47 } 48 } 49 }) 50 script> 51 html>
v-cloak
v-for
v-if
v-else
v-else-if
v-show
v-text
v-html
v-once
v-model
v-pre
2.4 条件渲染
v-if="表达式" 表达式的返回值是boolean
v-else
v-else-if
提高效率： 使用 key="唯一值" v-bind:key=""
v-show="布尔值"
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>条件渲染title> 6 <script type="text/javascript" src="js/vue.js">script> 7 <style type="text/css"> 8 .box { 9 width: 200px; 10 height: 200px; 11 background-color: red; 12 border-radius: 50%; 13 } 14 .bb { 15 width: 50px; 16 height: 50px; 17 border: 1px solid black; 18 border-radius: 50%; 19 font: 400 20px/50px 'STSong'; 20 text-align: center; 21 user-select: none; 22 float: left; 23 margin-left: 20px; 24 } 25 .wrap:after { 26 content: ''; 27 display: block; 28 clear: both; 29 } 30 .a { 31 width: 300px; 32 height: 200px; 33 } 34 .r { background: red} 35 .g { background: green} 36 .b { background: blue} 37 style> 38 head> 39 <body> 40 <div id="app"> 41 <button @click="btnClick">切换button> 42 43 44 45 46 47 48 <div class="box" v-show='false'>div> 49 50 51 52 <div class="wrap"> 53 54 <div class="bb b1" @click='changeColor(0)'>红div> 55 <div class="bb b2" @click='changeColor(1)'>绿div> 56 <div class="bb b3" @click='changeColor(2)'>蓝div> 57 div> 58 <div> 59 60 <div class="r a" v-if='tag == 0'>div> 61 <div class="g a" v-else-if='tag == 1'>div> 62 <div class="b a" v-else>div> 63 div> 64 div> 65 body> 66 <script type="text/javascript"> 67 new Vue({ 68 el: '#app', 69 data: { 70 isShow: false, 71 tag: 0 72 }, 73 methods: { 74 // 通过方法控制绑定给v-if的值 75 btnClick: function () { 76 this.isShow = !this.isShow; 77 }, 78 changeColor (num) { 79 this.tag = num; 80 } 81 } 82 }) 83 script> 84 html>
2.5 v-for 列表渲染
v-for 通常都需要指定 key 保证唯一值
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表渲染title> 6 <script type="text/javascript" src="js/vue.js">script> 7 head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li>{ {list[0]}}li> 12 <li>{ {list[1]}}li> 13 <li>{ {list[2]}}li> 14 <li>{ {list[3]}}li> 15 <li>{ {list[4]}}li> 16 <li>{ {list[5]}}li> 17 <li>{ {list[6]}}li> 18 ul> 19 20 <ul> 21 22 23 <li v-for='it in list'>{ { it }}li> 24 ul> 25 26 27 <div v-for='value in dic'>{ { value }}div> 28 29 30 <ul> 31 <li v-for="(v, i) in list">索引：{ {i}} 名字：{ {v}}li> 32 ul> 33 34 <ul> 35 <li v-for="(v, k, i) in dic">{ {i}} { {k}} { {v}}li> 36 ul> 37 div> 38 body> 39 <script type="text/javascript"> 40 new Vue({ 41 el: '#app', 42 data: { 43 list: ["张三", "李四", "王五", "赵六", "钱七", "egon", "monkey"], 44 dic: { 'name': 'zero', 'age': 8, 'salary': 88888} 45 } 46 }) 47 script> 48 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表渲染title> 6 <script type="text/javascript" src="js/vue.js">script> 7 head> 8 <body> 9 10 <div id="app"> 11 <div v-for='(item,index) in list' :key='index' style="height: 30px"> 12 <div v-for='(value, key, index) in item' :key='index + 10' style="float: left;"> 13 { {key}} : { {value}} 14 div> 15 div> 16 div> 17 body> 18 <script type="text/javascript"> 19 new Vue({ 20 el: '#app', 21 data: { 22 list: [ 23 { 'name': 'egon', 'age': 108}, 24 { 'name': 'monkey', 'age': 77}, 25 { 'name': 'zero', 'age': 8} 26 ] 27 } 28 }) 29 // items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}] 30 // 通过[索引]取出数组中对应的值 31 // 通过.key取出对象中对应的值 32 script> 33 html>
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>todoListtitle> 6 <script type="text/javascript" src="js/vue.js">script> 7 head> 8 <body> 9 10 <div id="app"> 11 <div> 12 <input type="text" v-model='value'> 13 14 <button @click='pushAction'>提交button> 15 div> 16 <ul> 17 18 <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{ { item }}li> 19 ul> 20 21 div> 22 body> 23 <script type="text/javascript"> 24 new Vue({ 25 el: '#app', 26 // vue目前不支持索引直接操作数据，但可以通过数据类型对应的操作方法 27 data: { 28 value: '', 29 list: [] 30 }, 31 methods: { 32 pushAction () { 33 this.list.push(this.value); 34 this.value = '' 35 }, 36 deleteAction (index) { 37 // alert(index) 38 this.list.splice(index, 1) 39 } 40 } 41 }) 42 script> 43 html>
2.6 样式绑定
class绑定
<p :class="对象">
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">
1 2 3 4 5选项卡 tabs 6 7 16 17 18 192063 64 65 66 74 752161 6222 29 30603135 3632 这是未付款的订单 33343741 4238 这是未发货的订单 39404347 4844 这是未收货的订单 45464953 5450 这是未评价的订单 5152555956 这是所有的订单 5758
1 2 3 4 5选项卡 tabs 6 7 16 17 18 192063 64 65 66 82 832161 6222 29 30603135 3632 这是未付款的订单 33343741 4238 这是未发货的订单 39404347 4844 这是未收货的订单 45464953 5450 这是未评价的订单 5152555956 这是所有的订单 5758
style绑定
<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">
1 2 3 4 5Vue样式操作 6 19 20 212238 39 40 51 52样式操作
23
24 25 26 27Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.
28 29Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.
30 31 32Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident officia facilis ipsam nisi doloribus earum ratione dolorem, minus, suscipit, magnam beatae. Magni dolor similique, a molestias neque officiis animi?
33 34 35 36Lorem ipsum dolor sit amet.
37
1 2 3 4 5Vue Style绑定 6 13 14 151623 24 25 34 35Style绑定
17 18Lorem ipsum dolor sit amet.
19Lorem ipsum dolor sit amet.
20Lorem ipsum dolor sit amet.
21Lorem ipsum dolor sit amet.
22
2.7 事件
事件绑定
方法加 () 的问题
1 2 3 4 5Vue 事件 6 7 8 91039 40 41 60 611113 14Vue 事件
12153816 17 18 19 2037
21 2223 { {counter}} 24
25 26
27 2829 Lorem ipsum dolor sit amet. 3031 32 3334 Lorem ipsum dolor sit amet. 3536
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认动作
.capture 捕获阶段触发事件
.once 只绑定一次
.self 只有本身才触发
.passive 优化移动端的scroll事件
1 2 3 4 5Vue 事件 6 7 20 21 222347 48 49 66 672426 27Vue 事件修饰符 键盘修饰符
252834 35293330 3132
36 37384639 40 41 42 43 4445
键盘修饰符
.enter
.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )
系统按键修饰符
.ctrl
.alt
.shift
.meta
按住ctrl再按回车
2.8 表单
文本
input:text textarea v-model
checkbox 单个 true-value false-value
true/false
checkbox 多个
数组
单选按钮 input:redio v-model value值
select选择框 option的value值 多选 multiple, 数组
<input v-model="formData.username">
<input v-model="formData.pwd">
v-model.trim
v-model.number 把值转为 number 类型
v-model.lazy
1 2 3 4 5表单数据绑定 6 13 14 151659 60 61 74 75表单数据绑定
17
18 19 20
21 22
23单个复选框
24 true-value="yes" false-value="no">全选 25
26 27多个复选框
28 篮球 29 足球 30 棒球 31 排球 32 33单选按钮
34 男 35 女 36 37选择框
38 44 45修饰符
46 47 48{ {num}}
49{ {address}}
50{ {sex}}
51{ {loveList}}
52{ {checkVal01}}
53{ { message }}
54{ { message }}
55 56 57 58
1 2 3 4 5表单 6 7 10 11 12 131444 45 46 47 65 6615431618 19表单提交
17204221 4041
实例：todolist
1 2 3 4 5todoList 6 81 82 8384106 107 108 109 140 14185 86 8788 899098 9991
97- for="(todo,index) in todoList" :key="index"> 92 93
96{ { todo }}
94 × 95已完成
100101105102
104- for="done in doneList" :key="done">{ { done }}
103