vue样式操作与事件绑定

Vue笔记

1 Vue实例（VM）

var vm = new Vue({
    el:'#app', //挂载元素
    
    //数据
    data: {
        title:'值',
        ....
        dataList:[]
    },
    
    //方法
    methods: {
        方法名: function(){
    
        },
         ...
    },
        
    //计算属性
    computed: {
        属性名： function(){
            return 值
        }  
    }

 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>

computed


    
    //监听属性
    watch: {
        属性名: function(){
            
        }
    }

 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>

watch

　　// delimiters

 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>

delimiters


    //钩子方法
    //数据创建成功 data methods computed watch
    //在这里从服务器获取数据
    created: function(){
        
    },
    //vue实例 已经挂载到元素上
    // dom操作 在这里
    mounted: function(){
                
    }
    
})

 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>

vue视图相关操作

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>

vue指令之v-bind

 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>

vue指令之v-model

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>

vue指令之v-on


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         <!-- 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>

todoList

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>

vue选项卡1

 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>

vue选项卡2

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>

vue样式操作

 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>

vue样式绑定-style

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>

vue事件绑定

事件修饰符

.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>

vue事件修饰符

键盘修饰符

.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>

vue表单数据绑定

 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>

vue获取表单数据

实例：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)">&times;</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>

todolist

vue样式操作与事件绑定

Vue笔记

1 Vue实例 （VM）

2 Vue视图 （V） 模板

2.1 插值

2.2 绑定属性

2.3 指令

2.4 条件渲染

2.5 v-for 列表渲染

2.6 样式绑定

class绑定

style绑定

2.7 事件

事件绑定

事件修饰符

键盘修饰符

系统按键修饰符

2.8 表单

1 Vue实例（VM）

2 Vue视图（V）模板