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>computed</title> 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 <!-- <p>姓名：{{ full_name() }}</p> --> 16 <!-- 采用计算方式的变量可以不在data中赋初值 --> 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>computed</title> 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>delimiters</title> 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-text=""></p>
<p v-once>{{}}p>
<p v-html=""></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 <!-- <div id="app" v-cloak> --> 27 <div id="app"> 28 <!-- v-model实现数据的双向绑定 --> 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 <!-- 可以解析html语法的标签 --> 36 <p v-html='msg'></p> 37 38 <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 --> 39 <!-- <p class="active"></p> --> 40 <!-- <p v-bind:class='active'></p> --> 41 <p :class='active'></p> 42 43 <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 --> 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-bind</title> 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 <!-- v-bind:绑定系统预定义属性 --> 19 <!-- 字符串abc --> 20 <p title="abc">p段落</p> 21 <!-- 1、变量abc，需要初始化 --> 22 <p v-bind:title="abc">p段落</p> 23 <!-- 2、如何直接将abc作为字符串绑定到属性 --> 24 <p v-bind:title="'abc'">p段落</p> 25 <!-- 3、v-bind简写为: --> 26 <p :title="'ABC'">p段落</p> 27 28 <!-- 4、绑定多个变量 --> 29 30 <!-- i：以数组形式进行赋值 --> 31 <!-- a, b为两个变量 --> 32 <!-- 变量值可以有data提供 --> 33 <!-- <div :class="[a, b]">12345</div> --> 34 35 <!-- ii：以对象形式进行赋值 --> 36 <!-- a，b为两个class值 --> 37 <!-- class值只取true | false --> 38 <!-- 非空均视为true，否则视为false --> 39 <!-- <div :class="{a: 'A', b: 'B'}">67890</div> --> 40 <!-- <div :class="{a: true, b: true}">67890</div> --> 41 42 <!-- iii --> 43 <div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈</div> 44 45 <!-- 总结 --> 46 <!-- [], 中出现的值，作为变量，变量值来源于data，且最终将来源于data的数据作为属性值赋值给v-bind绑定的属性 --> 47 <!-- {}, 中出现的键(key)，直接作为v-bind绑定的属性的值，而键(key)对应的值(value)是决定键是否起效，值(value)的取值只为true|false --> 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-model</title> 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 <!-- v-model针对于表单元素 --> 14 15 <form action="" method="get"> 16 <!-- 1、双向绑定：服务于文本输入框 --> 17 <!-- v-model存储的值为输入框的value值 --> 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 <!-- 2、单选框 --> 25 <div> 26 <!-- 单选框是以name进行分组，同组中只能发生单选 --> 27 <!-- v-model存储的值为单选框的value值 --> 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 <!-- 3、单一复选框 --> 34 <!-- v-model存储的值为true|false --> 35 <!-- 或者为自定义替换的值 --> 36 <div> 37 <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" /> 38 {{ sin_val }} 39 </div> 40 41 <!-- 4、多复选框 --> 42 <!-- v-model存储的值为存储值多复选框value的数组 --> 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-on</title> 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 <!-- 1、绑定系统预定义事件，事件值为函数 --> 14 <div v-on:click="fn1">{{ msg }}</div> 15 <!-- 2、v-on简写 --> 16 <div @click="fn2">{{ msg }}</div> 17 <!-- 3、传值 -- 默认传值 -- 事件 event --> 18 <div @click='fn3'>{{ msg }}</div> 19 <!-- 4、传值 -- 自定义值 --> 20 <div @click="fn4(msg, 88888)">{{ msg }}</div> 21 <!-- 5、传参 -- 自定义值 + 事件 --> 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-pre2.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 <!-- 1、v-if取值为true|false --> 43 <!-- true将会被渲染|false不会被渲染(页面中不存在该标签) --> 44 <!-- <div class="box" v-if="isShow"></div> --> 45 46 <!-- 2、v-show取值为true|false --> 47 <!-- true为渲染并显示，false虽然渲染到DOM上，但display以none形式存在 --> 48 <div class="box" v-show='false'></div> 49 50 <!-- 3、v-if、v-else-if、v-else --> 51 <!-- 多分支条件 --> 52 <div class="wrap"> 53 <!-- .bb.b$*3 --> 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 保证唯一值
<p v-for="item in itemList">
<p v-for="(item,index) in itemList">
<p v-for="(val,key) in obj">
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 <!-- 变量it为集合list中被迭代出的元素 --> 22 <!-- 由v-for指令控制的标签会随元素的个数动态渲染 --> 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 <!-- key属性：可以提高效率（通过不同的唯一key值建立缓存） --> 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>todoList</title> 6 <script type="text/javascript" src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 录入用户输入的数据，更新到指定的list中，通过vue的数据驱动特效，实时渲染到页面 --> 10 <div id="app"> 11 <div> 12 <input type="text" v-model='value'> 13 <!-- 提交：将数据添加到list中 --> 14 <button @click='pushAction'>提交</button> 15 </div> 16 <ul> 17 <!-- 点击指定的li，将自身数据从list中移除，完成自身删除 --> 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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡 tabs</title> 6 <link rel="stylesheet" href="../dist/css/bootstrap.css"> 7 <style> 8 #app { 9 margin:100px auto 0px; 10 800px; 11 } 12 .panel { 13 border-top:none; 14 } 15 </style> 16 </head> 17 <body> 18 19 <div id="app"> 20 <div class="row"> 21 <div class="col-md-12"> 22 <ul class="nav nav-tabs"> 23 <li :class="{active: tab == 0}" @click="tab = 0"><a href="#">未付款订单</a></li> 24 <li :class="{active: tab == 1}" @click="tab = 1"><a href="#">未发货订单</a></li> 25 <li :class="{active: tab == 2}" @click="tab = 2"><a href="#">未收货订单</a></li> 26 <li :class="{active: tab == 3}" @click="tab = 3"><a href="#">未评价订单</a></li> 27 <li :class="{active: tab == 4}" @click="tab = 4"><a href="#">所有订单</a></li> 28 </ul> 29 30 <div class="panel panel-default" v-show="tab === 0"> 31 <div class="panel-body"> 32 这是未付款的订单 33 </div> 34 </div> 35 36 <div class="panel panel-default" v-show="tab === 1"> 37 <div class="panel-body"> 38 这是未发货的订单 39 </div> 40 </div> 41 42 <div class="panel panel-default" v-show="tab === 2"> 43 <div class="panel-body"> 44 这是未收货的订单 45 </div> 46 </div> 47 48 <div class="panel panel-default" v-show="tab === 3"> 49 <div class="panel-body"> 50 这是未评价的订单 51 </div> 52 </div> 53 54 <div class="panel panel-default" v-show="tab === 4"> 55 <div class="panel-body"> 56 这是所有的订单 57 </div> 58 </div> 59 </div> 60 </div> 61 62 </div> 63 64 65 <script src="../dist/js/vue.js"></script> 66 <script> 67 let vm = new Vue({ 68 el:'#app', 69 data: { 70 tab: 0 71 } 72 }) 73 </script> 74 </body> 75 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡 tabs</title> 6 <link rel="stylesheet" href="../dist/css/bootstrap.css"> 7 <style> 8 #app { 9 margin:100px auto 0px; 10 800px; 11 } 12 .panel { 13 border-top:none; 14 } 15 </style> 16 </head> 17 <body> 18 19 <div id="app"> 20 <div class="row"> 21 <div class="col-md-12"> 22 <ul class="nav nav-tabs"> 23 <li :class="{active: isTab(0)}" @click="setTab(0)"><a href="javascript:void(0)">未付款订单</a></li> 24 <li :class="{active: isTab(1)}" @click="setTab(1)"><a href="javascript:void(0)">未发货订单</a></li> 25 <li :class="{active: isTab(2)}" @click="setTab(2)"><a href="javascript:void(0)">未收货订单</a></li> 26 <li :class="{active: isTab(3)}" @click="setTab(3)"><a href="javascript:void(0)">未评价订单</a></li> 27 <li :class="{active: isTab(4)}" @click="setTab(4)"><a href="javascript:void(0)">所有订单</a></li> 28 </ul> 29 30 <div class="panel panel-default" v-show="isTab(0)"> 31 <div class="panel-body"> 32 这是未付款的订单 33 </div> 34 </div> 35 36 <div class="panel panel-default" v-show="isTab(1)"> 37 <div class="panel-body"> 38 这是未发货的订单 39 </div> 40 </div> 41 42 <div class="panel panel-default" v-show="isTab(2)"> 43 <div class="panel-body"> 44 这是未收货的订单 45 </div> 46 </div> 47 48 <div class="panel panel-default" v-show="isTab(3)"> 49 <div class="panel-body"> 50 这是未评价的订单 51 </div> 52 </div> 53 54 <div class="panel panel-default" v-show="isTab(4)"> 55 <div class="panel-body"> 56 这是所有的订单 57 </div> 58 </div> 59 </div> 60 </div> 61 62 </div> 63 64 65 <script src="../dist/js/vue.js"></script> 66 <script> 67 let vm = new Vue({ 68 el:'#app', 69 data: { 70 tab: 0 71 }, 72 methods: { 73 setTab(index) { 74 this.tab = index; 75 }, 76 isTab(index) { 77 return this.tab === index; 78 } 79 } 80 }) 81 </script> 82 </body> 83 </html>
style绑定
<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue样式操作</title> 6 <style> 7 .item { 8 600px; 9 padding: 10px; 10 border: 1px solid #ccc; 11 } 12 .current { 13 border-color:red; 14 } 15 .active { 16 border-color:green; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="app"> 22 <h1>样式操作</h1> 23 <hr> 24 25 26 27 <p class="item" :class="cname"> Lorem 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.</p> 28 29 <p class="item" :class="{current:isCurrent, active:true, link:true, 'li-item':true}"> Lorem 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.</p> 30 31 32 <p :class="classObj">Lorem 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?</p> 33 34 35 36 <p :class="classList">Lorem ipsum dolor sit amet.</p> 37 </div> 38 39 <script src="../dist/js/vue.js"></script> 40 <script> 41 new Vue({ 42 el:'#app', 43 data: { 44 cname:'current', 45 isCurrent: false, 46 classObj: {item:true, link:true,active:true}, 47 classList: ['link', 'item'] 48 } 49 }); 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue Style绑定</title> 6 <style> 7 p { 8 border:1px solid #ccc; 9 700px; 10 padding:20px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 <h1>Style绑定</h1> 17 18 <p :style="styleValue">Lorem ipsum dolor sit amet.</p> 19 <p :style="{color:'purple', background:'pink'}">Lorem ipsum dolor sit amet.</p> 20 <p :style="styleObj">Lorem ipsum dolor sit amet.</p> 21 <p :style="[styleObj, {borderWidth:'2px'}]">Lorem ipsum dolor sit amet.</p> 22 </div> 23 24 <script src="../dist/js/vue.js"></script> 25 <script> 26 new Vue({ 27 el:'#app', 28 data: { 29 styleValue: 'color:red;background:green', 30 styleObj: {color:'pink',background:'#ccc', transform:'translate(0, 0)'} 31 } 32 }); 33 </script> 34 </body> 35 </html>
2.7 事件
事件绑定
<p @事件名="方法">
<p v-on:事件名="方法">
方法加 () 的问题
<p @事件名="方法(1,1,2,3,$event)">
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue 事件</title> 6 <link rel="stylesheet" href="../dist/css/bootstrap.css"> 7 </head> 8 <body> 9 <div id="app" class="container"> 10 <div class="page-header"> 11 <h1>Vue 事件</h1> 12 </div> 13 14 <div class="row"> 15 <div class="col-md-12"> 16 <button @click="counter ++" class="btn btn-default"> +1 </button> 17 <button @click="addCounter(1)" class="btn btn-default"> +1 </button> 18 <button @click="addCounter(10)" class="btn btn-default"> +10 </button> 19 20 <hr> 21 22 <p class="info"> 23 {{counter}} 24 </p> 25 26 <hr> 27 28 <div class="alert alert-info" @mousemove="onMoveFn"> 29 Lorem ipsum dolor sit amet. 30 </div> 31 32 33 <div class="alert alert-danger" @mousemove="onMoveFn($event, 100)"> 34 Lorem ipsum dolor sit amet. 35 </div> 36 </div> 37 </div> 38 </div> 39 40 <script src="../dist/js/vue.js"></script> 41 <script> 42 new Vue({ 43 el:'#app', 44 data: { 45 counter:0 46 }, 47 methods: { 48 addCounter(num=1) { 49 this.counter += num; 50 }, 51 52 onMoveFn(ev, num) { 53 console.log(ev.target) 54 //ev 是获取的event 对象 55 console.log(ev.pageX, ev.pageY) 56 } 57 } 58 }) 59 </script> 60 </body> 61 </html>
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认动作
.capture 捕获阶段触发事件
.once 只绑定一次
.self 只有本身才触发
.passive 优化移动端的scroll事件
<p @click.stop="">
<p @click.stop.prevent="">
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue 事件</title> 6 <link rel="stylesheet" href="../dist/css/bootstrap.css"> 7 <style> 8 .box { 9 200px; 10 height:200px; 11 border:1px solid red; 12 } 13 .inner { 14 100px; 15 height:100px; 16 margin:50px; 17 background: pink 18 } 19 </style> 20 </head> 21 <body> 22 <div id="app" class="container"> 23 <div class="page-header"> 24 <h1>Vue 事件修饰符 键盘修饰符</h1> 25 </div> 26 27 <div class="row"> 28 <div class="col-md-12"> 29 <div class="box" @click.self="boxFn"> 30 <div class="inner" @click="innerFn"></div> 31 </div> 32 </div> 33 </div> 34 35 <hr> 36 37 <div class="row"> 38 <div class="col-md-6"> 39 40 <input type="text" class="form-control" @keyup.65="onkeyupFn"> 41 <input type="text" class="form-control" @keyup.enter="onkeyupFn"> 42 <input type="text" class="form-control" @keyup.ctrl.65="onkeyupFn"> 43 44 </div> 45 </div> 46 </div> 47 48 <script src="../dist/js/vue.js"></script> 49 <script> 50 new Vue({ 51 el:'#app', 52 methods: { 53 boxFn(){ 54 console.log('box'); 55 }, 56 innerFn(){ 57 console.log('inner'); 58 //event.stopPropagation(); 59 }, 60 onkeyupFn(event) { 61 console.log('按了 '+event.keyCode+' 按键') 62 } 63 } 64 }) 65 </script> 66 </body> 67 </html>
键盘修饰符
.enter
.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )
系统按键修饰符
.ctrl
.alt
.shift
.meta
<input @keyup.ctrl.enter> 按住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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单数据绑定</title> 6 <style> 7 p { 8 border: 1px solid #ccc; 9 600px; 10 padding: 20px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 <h1>表单数据绑定</h1> 17 <hr> 18 19 <input type="text" v-model="message"> 20 <br> 21 <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> 22 <br> 23 <h3>单个复选框</h3> 24 <input type="checkbox" v-model="checkVal01" true-value="yes" false-value="no">全选 25 <br> 26 27 <h3>多个复选框</h3> 28 <input type="checkbox" value="lanball" v-model="loveList">篮球 29 <input type="checkbox" value="zuball" v-model="loveList">足球 30 <input type="checkbox" value="bangball" v-model="loveList">棒球 31 <input type="checkbox" value="paiball" v-model="loveList">排球 32 33 <h3>单选按钮</h3> 34 <input type="radio" v-model="sex" value="male"> 男 35 <input type="radio" v-model="sex" value="female"> 女 36 37 <h3>选择框</h3> 38 <select v-model="address"> 39 <option value="上海">上海</option> 40 <option value="北京">北京</option> 41 <option value="深圳">深圳</option> 42 <option value="广州">广州</option> 43 </select> 44 45 <h3>修饰符</h3> 46 <input type="text" v-model.number.lazy="num"> 47 48 <p> {{num}} </p> 49 <p> {{address}} </p> 50 <p> {{sex}} </p> 51 <p> {{loveList}} </p> 52 <p>{{checkVal01}}</p> 53 <p>{{ message }}</p> 54 <p>{{ message }}</p> 55 56 57 58 </div> 59 60 <script src="../dist/js/vue.js"></script> 61 <script> 62 let vm = new Vue({ 63 el: '#app', 64 data:{ 65 message:'同志', 66 checkVal01: true, 67 loveList:['bangball'], 68 sex:'male', 69 address:'广州', 70 num:0 71 } 72 }) 73 </script> 74 </body> 75 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 <link rel="stylesheet" href="../dist/css/bootstrap.css"> 7 <style> 8 9 </style> 10 </head> 11 <body> 12 13 <div id="app"> 14 <div class="container"> 15 <div class="page-header"> 16 <h1>表单提交</h1> 17 </div> 18 19 <div class="row"> 20 <div class="col-md-6"> 21 <form @submit.prevent=""> 22 <div class="form-group"> 23 <label for="#">用户名</label> 24 <input type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名"> 25 </div> 26 27 <div class="form-group"> 28 <label for="#">密码</label> 29 <input type="password" class="form-control" v-model="loginData.pwd"> 30 </div> 31 32 <div class="checkbox"> 33 <label for="#"> 34 <input type="checkbox" v-model="loginData.remember"> 记住密码 35 </label> 36 </div> 37 38 <button class="btn btn-success btn-block" @click="login()">登 录</button> 39 </form> 40 </div> 41 </div> 42 </div> 43 </div> 44 45 46 <script src="../dist/js/vue.js"></script> 47 <script> 48 let vm = new Vue({ 49 el:'#app', 50 data: { 51 loginData: { 52 username:'', 53 pwd:'', 54 remember: true 55 } 56 }, 57 methods: { 58 login() { 59 //获取所有表单的值 60 console.log(this.loginData) 61 } 62 } 63 }) 64 </script> 65 </body> 66 </html>
实例：todolist
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>todoList</title> 6 <style> 7 #app { 8 margin:100px auto 0; 9 600px; 10 } 11 .input-box { 12 font-size:0; 13 } 14 .input-box input { 15 box-sizing: border-box; 16 500px; 17 font-size:16px; 18 border:1px solid #ccc; 19 padding:10px; 20 line-height: 18px; 21 } 22 .input-box button { 23 100px; 24 padding:10px; 25 font-size:16px; 26 border:1px solid #ccc; 27 background: #f5f5f5; 28 cursor: pointer; 29 line-height: 18px; 30 border-left:none; 31 } 32 ul { 33 list-style: none; 34 margin:0; 35 padding:0; 36 } 37 .todo-list { 38 margin-top:20px; 39 } 40 .todo-list li{ 41 border:1px solid #ccc; 42 padding:10px; 43 margin-bottom:10px; 44 font-size:0; 45 } 46 .todo-list i { 47 margin-right:20px; 48 display: inline-block; 49 16px; 50 height:16px; 51 border:1px solid #ccc; 52 cursor: pointer; 53 vertical-align: bottom; 54 } 55 .todo-list p { 56 500px; 57 display: inline-block; 58 font-size:16px; 59 margin:0; 60 } 61 .todo-list span { 62 50px; 63 cursor: pointer; 64 color:red; 65 font-size:16px; 66 67 } 68 .done-list { 69 margin-top:20px; 70 } 71 .done-list li{ 72 border:1px solid #ccc; 73 padding:10px; 74 margin-bottom:10px; 75 background: #999; 76 color:#ccc; 77 cursor: not-allowed; 78 text-decoration: line-through; 79 } 80 </style> 81 </head> 82 <body> 83 <div id="app"> 84 <div class="input-box"> 85 <input type="text" v-model.trim="newTodo" placeholder="请输入代办事项"> 86 <button @click="addTodo">添 加</button> 87 </div> 88 89 <div class="todo-list"> 90 <ul> 91 <li v-for="(todo,index) in todoList" :key="index"> 92 <i @click="addDone(index)"></i> 93 <p>{{ todo }}</p> 94 <span @click="deleteTodo(index)">×</span> 95 </li> 96 </ul> 97 </div> 98 99 <h3>已完成</h3> 100 <div class="done-list"> 101 <ul> 102 <li v-for="done in doneList" :key="done">{{ done }}</li> 103 </ul> 104 </div> 105 </div> 106 107 108 <script src="../dist/js/vue.js"></script> 109 <script> 110 new Vue({ 111 el:"#app", 112 data: { 113 todoList: ['今天代码敲三遍', '晚上和小莉莉去喝酒'], 114 doneList: [], 115 newTodo:'' 116 }, 117 methods: { 118 addTodo() { 119 //如果输入框是空的，不执行 120 if (this.newTodo.length === 0) { 121 return; 122 } 123 //添加内容到 代办事项 124 this.todoList.push(this.newTodo) 125 //清空输入框 126 this.newTodo = ''; 127 }, 128 deleteTodo(index) { 129 this.todoList.splice(index, 1) 130 }, 131 addDone(index) { 132 //把内容添加到 doneList 133 this.doneList.push(this.todoList[index]) 134 //从todoList删掉 135 this.deleteTodo(index); 136 } 137 } 138 }) 139 </script> 140 </body> 141 </html>