Vue笔记

1 Vue实例（VM）

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>computed</title>

 </head>

 <body>

     <div id="app">

         <div>

             姓：<input type="text" v-model='first_name' />

         </div>

         <div>

             名：<input type="text" v-model='last_name' />

         </div>

         <!-- <p>姓名：{{ full_name() }}</p> -->

         <!-- 采用计算方式的变量可以不在data中赋初值 -->

         <p>姓名：{{ full_name }}</p>

     </div>

 </body>

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

     var app = new Vue({

         el: '#app',

         data: {

             first_name: '',

             last_name: ''

         },

         // methods: {

         //     full_name: function () {

         //         return this.first_name + " " + this.last_name;

         //     }

         // },

         // 一个变量依赖于多个变量，一般对该变量采用计算处理

         computed: {

             full_name: function () {

                 return this.first_name + " " + this.last_name;

             }

         }

     })

 </script>

 </html>

computed

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>computed</title>

 </head>

 <body>

     <div id="app">

         <div>

             姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" />

         </div>

         <p>姓：{{ first_name }}</p>

         <p>名：{{ last_name }}</p>

     </div>

 </body>

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

     var app = new Vue({

         el: '#app',

         data: {

             full_name: '',

             first_name: '',

             last_name: ''

         },

         watch: {

             full_name: function () {

                 // 监听full_name，然后拆分为姓与名

                 var fname = this.full_name;

                 var arr = fname.split(' ');

                 this.first_name = arr[0];

                 this.last_name = arr[1];

             }

         }

     })

 </script>

 </html>

watch

　　// delimiters

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>delimiters</title>

 </head>

 <body>

     <div id="app">

         {{ msg }} [[ msg ]] ${ msg }

     </div>

 </body>

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

     var app = new Vue({

         el: '#app',

         data: {

             msg: '数据'

         },

         // delimiters配置自定义绑定符号

         // 值为拥有两个元素的数组，元素为字符串形式

         delimiters: ['${', '}']

     })

 </script>

 </html>

delimiters

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>生命周期钩子</title>

 </head>

 <body>

     <div id="app">

         {{ msg }}

     </div>

 </body>

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

     var app = new Vue({

         el: '#app',

         data: {

             msg: '数据'

         },

         // 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行

         // 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现

         // 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子

         beforeCreate: function () {

         },

         /*

         // 系统内部调用

         if (beforeCreate) {

             beforeCreate()

         }

         // ...

         // ...

         if (created) {

             created()

         }

         if (beforeMount) {

             beforeMount()

         }

         // ...

         */

         // 数据与事件加载完毕，el并没有进行挂载

         created: function () {

             // 获取想要的数据(请求后台)

             // 事件的解绑或换绑或重新绑定

             // 对虚拟DOM进行修改

         },

         // DOM树加载完毕，el渲染完毕

         mounted:function () {

             // 可能需要对DOM进行操作(交给模块处理)

         }

     })

 </script>

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>视图</title>

     <style type="text/css">

         p {

             border: 1px solid #ff6700;

             height: 30px;

             line-height: 30px;

         }

         .abc {

             border-color: yellowgreen;

         }

         [class] {

             border-width: 5px;

         }

         [v-cloak] {

             display: none;

         }

     </style>

     <script type="text/javascript" src="js/vue.js"></script>

 </head>

 <body>

     <!-- <div id="app" v-cloak> -->

     <div id="app">

         <!-- v-model实现数据的双向绑定 -->

         <input type="text" v-model='msg'>

         <input type="text" v-model='msg'>

         <p>{{ msg }}</p>

         <p v-text='msg'></p>

         <!-- 只赋值一次 -->

         <p v-once>{{ msg }}</p>

         <!-- 可以解析html语法的标签 -->

         <p v-html='msg'></p>

         <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 -->

         <!-- <p class="active"></p> -->

         <!-- <p v-bind:class='active'></p> -->

         <p :class='active'></p>

         <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 -->

         <p @dblclick='func'></p>

     </div>

 </body>

 <script type="text/javascript">

     var app = new Vue({

         el: '#app',

         data: {

             msg: '初值',

             active: 'abc'

         },

         methods: {

             func: function () {

                 alert('呵呵')

             }

         }

     })

 </script>

 </html>

vue视图相关操作

2.2 绑定属性

v-bind:属性=值
:属性=值
v-model="" 用于表单控件  双向数据绑定

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>主要指令v-bind</title>

     <script type="text/javascript" src="js/vue.js"></script>

     <style type="text/css">

         .a {

             background-color: red;

         }

         .b {

             color: green;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <!-- v-bind:绑定系统预定义属性 -->

         <!-- 字符串abc -->

         <p title="abc">p段落</p>

         <!-- 1、变量abc，需要初始化 -->

         <p v-bind:title="abc">p段落</p>

         <!-- 2、如何直接将abc作为字符串绑定到属性 -->

         <p v-bind:title="'abc'">p段落</p>

         <!-- 3、v-bind简写为: -->

         <p :title="'ABC'">p段落</p>

         <!-- 4、绑定多个变量 -->

         <!-- i：以数组形式进行赋值 -->

         <!-- a, b为两个变量 -->

         <!-- 变量值可以有data提供 -->

         <!-- <div :class="[a, b]">12345</div> -->

         <!-- ii：以对象形式进行赋值 -->

         <!-- a，b为两个class值 -->

         <!-- class值只取true | false -->

         <!-- 非空均视为true，否则视为false -->

         <!-- <div :class="{a: 'A', b: 'B'}">67890</div> -->

         <!-- <div :class="{a: true, b: true}">67890</div> -->

         <!-- iii -->

         <div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈</div>

         <!-- 总结 -->

         <!-- [], 中出现的值，作为变量，变量值来源于data，且最终将来源于data的数据作为属性值赋值给v-bind绑定的属性 -->

         <!-- {}, 中出现的键(key)，直接作为v-bind绑定的属性的值，而键(key)对应的值(value)是决定键是否起效，值(value)的取值只为true|false -->

         <a :style="color" href="">百度</a>

         <a :style="{color: 'red', backgroundColor: 'black'}" href="">京东</a>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         data: {

             abc: 'ABC',

             a: 'a',

             b: 'b',

             // color: 'color: red'

             color: {

                 color: 'red',

                 // 支持驼峰命名法

                 backgroundColor: 'orange'

             }

         }

     })

 </script>

 </html>

vue指令之v-bind

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>主要指令v-model</title>

     <script type="text/javascript" src="js/vue.js"></script>

     <style type="text/css">

     </style>

 </head>

 <body>

     <div id="app">

         <!-- v-model针对于表单元素 -->

         <form action="" method="get">

             <!-- 1、双向绑定：服务于文本输入框 -->

             <!-- v-model存储的值为输入框的value值 -->

             <div>

                 <input type="text" name="usr" v-model="in_val">

                 <input type="password" name="ps" v-model="in_val" >

                 <textarea name="info" v-model="in_val"></textarea>

             </div>

             <!-- 2、单选框 -->

             <div>

                 <!-- 单选框是以name进行分组，同组中只能发生单选 -->

                 <!-- v-model存储的值为单选框的value值 -->

                 男：<input type="radio" name="sex" value="男" v-model="ra_val">

                 女：<input type="radio" name="sex" value="女" v-model="ra_val">

                 {{ ra_val }}

             </div>

             <!-- 3、单一复选框 -->

             <!-- v-model存储的值为true|false -->

             <!-- 或者为自定义替换的值 -->

             <div>

                 <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />

                 {{ sin_val }}

             </div>

             <!-- 4、多复选框 -->

             <!-- v-model存储的值为存储值多复选框value的数组 -->

             <div>

                 <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />

                 <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />

                 <input type="checkbox" value="不挑" name="cless" v-model='more_val' />

                 {{ more_val }}

             </div>

             <input type="submit">

         </form>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         data: {

             in_val: '',

             // 默认值可以决定单选框默认选项

             ra_val: '男',

             // 默认值为true，单一复选框为选中，反之false为不选中

             sin_val: '',

             // 数组中存在的值对应的复选框默认为选中状态

             more_val: ['喜好女的','不挑']

         }

     })

 </script>

 </html>

vue指令之v-model

2.3 指令

v-bind
v-on

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>主要指令v-on</title>

     <script type="text/javascript" src="js/vue.js"></script>

     <style type="text/css">

     </style>

 </head>

 <body>

     <div id="app">

         <!-- 1、绑定系统预定义事件，事件值为函数 -->

         <div v-on:click="fn1">{{ msg }}</div>

         <!-- 2、v-on简写 -->

         <div @click="fn2">{{ msg }}</div>

         <!-- 3、传值 -- 默认传值 -- 事件 event -->

         <div @click='fn3'>{{ msg }}</div>

         <!-- 4、传值 -- 自定义值 -->

         <div @click="fn4(msg, 88888)">{{ msg }}</div>

         <!-- 5、传参 -- 自定义值 + 事件 -->

         <div @click="fn5($event, msg)">{{ msg }}</div>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         data: {

             msg: '默认值'

         },

         methods: {

             fn1: function () {

                 alert('呵呵')

             },

             fn2 () {

                 alert('嘻嘻')

             },

             fn3 (obj) {

                 console.log(obj)

             },

             fn4 (obj, num) {

                 console.log(obj, num)

                 console.log(this.msg)

             },

             fn5 (ev, msg) {

                 console.log(ev, msg)

             }

         }

     })

 </script>

 </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="布尔值"

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>条件渲染</title>

     <script type="text/javascript" src="js/vue.js"></script>

     <style type="text/css">

         .box {

             width: 200px;

             height: 200px;

             background-color: red;

             border-radius: 50%;

         }

         .bb {

             width: 50px;

             height: 50px;

             border: 1px solid black;

             border-radius: 50%;

             font: 400 20px/50px 'STSong';

             text-align: center;

             user-select: none;

             float: left;

             margin-left: 20px;

         }

         .wrap:after {

             content: '';

             display: block;

             clear: both;

         }

         .a {

             width: 300px;

             height: 200px;

         }

         .r {background: red}

         .g {background: green}

         .b {background: blue}

     </style>

 </head>

 <body>

     <div id="app">

         <button @click="btnClick">切换</button>

         <!-- 1、v-if取值为true|false -->

         <!-- true将会被渲染|false不会被渲染(页面中不存在该标签) -->

         <!-- <div class="box" v-if="isShow"></div> -->

         <!-- 2、v-show取值为true|false -->

         <!-- true为渲染并显示，false虽然渲染到DOM上，但display以none形式存在 -->

         <div class="box" v-show='false'></div>

         <!-- 3、v-if、v-else-if、v-else -->

         <!-- 多分支条件 -->

         <div class="wrap">

             <!-- .bb.b$*3 -->

             <div class="bb b1" @click='changeColor(0)'>红</div>

             <div class="bb b2" @click='changeColor(1)'>绿</div>

             <div class="bb b3" @click='changeColor(2)'>蓝</div>

         </div>

         <div>

             <!-- 多分支一定存在判断，判断便会产生比较变量 -->

             <div class="r a" v-if='tag == 0'></div>

             <div class="g a" v-else-if='tag == 1'></div>

             <div class="b a" v-else></div>

         </div>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         data: {

             isShow: false,

             tag: 0

         },

         methods: {

             // 通过方法控制绑定给v-if的值

             btnClick: function () {

                 this.isShow = !this.isShow;

             },

             changeColor (num) {

                 this.tag = num;

             }

         }

     })

 </script>

 </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">

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>列表渲染</title>

     <script type="text/javascript" src="js/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <ul>

             <li>{{list[0]}}</li>

             <li>{{list[1]}}</li>

             <li>{{list[2]}}</li>

             <li>{{list[3]}}</li>

             <li>{{list[4]}}</li>

             <li>{{list[5]}}</li>

             <li>{{list[6]}}</li>

         </ul>

         <!-- 迭代数组 -->

         <ul>

             <!-- 变量it为集合list中被迭代出的元素 -->

             <!-- 由v-for指令控制的标签会随元素的个数动态渲染 -->

             <li v-for='it in list'>{{ it }}</li>

         </ul>

         <!-- 迭代对象 -->

         <div v-for='value in dic'>{{ value }}</div>

         <!-- 迭代除取值外的其他可迭代到的值 -->

         <ul>

             <li v-for="(v, i) in list">索引：{{i}} 名字：{{v}}</li>

         </ul>

         <ul>

             <li v-for="(v, k, i) in dic">{{i}} {{k}} {{v}}</li>

         </ul>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         data: {

             list: ["张三", "李四", "王五", "赵六", "钱七", "egon", "monkey"],

             dic: {'name': 'zero', 'age': 8, 'salary': 88888}

         }

     })

 </script>

 </html>

列表渲染

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>列表渲染</title>

     <script type="text/javascript" src="js/vue.js"></script>

 </head>

 <body>

     <!-- key属性：可以提高效率（通过不同的唯一key值建立缓存） -->

     <div id="app">

         <div v-for='(item,index) in list' :key='index' style="height: 30px">

             <div v-for='(value, key, index) in item' :key='index + 10' style="float: left;">

                 {{key}} : {{value}}

             </div>

         </div>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         data: {

             list: [

                 {'name': 'egon', 'age': 108},

                 {'name': 'monkey', 'age': 77},

                 {'name': 'zero', 'age': 8}

             ]

         }

     })

     // items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]

     // 通过[索引]取出数组中对应的值

     // 通过.key取出对象中对应的值

 </script>

 </html>

复杂数据的列表表达式

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>todoList</title>

     <script type="text/javascript" src="js/vue.js"></script>

 </head>

 <body>

     <!-- 录入用户输入的数据，更新到指定的list中，通过vue的数据驱动特效，实时渲染到页面 -->

     <div id="app">

         <div>

             <input type="text" v-model='value'>

             <!-- 提交：将数据添加到list中 -->

             <button @click='pushAction'>提交</button>

         </div>

         <ul>

             <!-- 点击指定的li，将自身数据从list中移除，完成自身删除 -->

             <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>

         </ul>

     </div>

 </body>

 <script type="text/javascript">

     new Vue({

         el: '#app',

         // vue目前不支持索引直接操作数据，但可以通过数据类型对应的操作方法

         data: {

             value: '',

             list: []

         },

         methods: {

             pushAction () {

                 this.list.push(this.value);

                 this.value = ''

             },

             deleteAction (index) {

                 // alert(index)

                 this.list.splice(index, 1)

             }

         }

     })

 </script>

 </html>

todoList

2.6 样式绑定

class绑定

<p :class="对象">
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>选项卡 tabs</title>

     <link rel="stylesheet" href="../dist/css/bootstrap.css">

     <style>

         #app {

             margin:100px auto 0px;

             width:800px;

         }

         .panel {

             border-top:none;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div class="row">

             <div class="col-md-12">

                 <ul class="nav nav-tabs">

                     <li :class="{active: tab == 0}" @click="tab = 0"><a href="#">未付款订单</a></li>

                     <li :class="{active: tab == 1}" @click="tab = 1"><a href="#">未发货订单</a></li>

                     <li :class="{active: tab == 2}" @click="tab = 2"><a href="#">未收货订单</a></li>

                     <li :class="{active: tab == 3}" @click="tab = 3"><a href="#">未评价订单</a></li>

                     <li :class="{active: tab == 4}" @click="tab = 4"><a href="#">所有订单</a></li>

                 </ul>

                 <div class="panel panel-default" v-show="tab === 0">

                     <div class="panel-body">

                         这是未付款的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="tab === 1">

                     <div class="panel-body">

                         这是未发货的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="tab === 2">

                     <div class="panel-body">

                         这是未收货的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="tab === 3">

                     <div class="panel-body">

                         这是未评价的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="tab === 4">

                     <div class="panel-body">

                         这是所有的订单

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         let vm = new Vue({

             el:'#app',

             data: {

                 tab: 0

             }

         })

     </script>

 </body>

 </html>

vue选项卡1

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>选项卡 tabs</title>

     <link rel="stylesheet" href="../dist/css/bootstrap.css">

     <style>

         #app {

             margin:100px auto 0px;

             width:800px;

         }

         .panel {

             border-top:none;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div class="row">

             <div class="col-md-12">

                 <ul class="nav nav-tabs">

                     <li :class="{active: isTab(0)}" @click="setTab(0)"><a href="javascript:void(0)">未付款订单</a></li>

                     <li :class="{active: isTab(1)}" @click="setTab(1)"><a href="javascript:void(0)">未发货订单</a></li>

                     <li :class="{active: isTab(2)}" @click="setTab(2)"><a href="javascript:void(0)">未收货订单</a></li>

                     <li :class="{active: isTab(3)}" @click="setTab(3)"><a href="javascript:void(0)">未评价订单</a></li>

                     <li :class="{active: isTab(4)}" @click="setTab(4)"><a href="javascript:void(0)">所有订单</a></li>

                 </ul>

                 <div class="panel panel-default" v-show="isTab(0)">

                     <div class="panel-body">

                         这是未付款的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="isTab(1)">

                     <div class="panel-body">

                         这是未发货的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="isTab(2)">

                     <div class="panel-body">

                         这是未收货的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="isTab(3)">

                     <div class="panel-body">

                         这是未评价的订单

                     </div>

                 </div>

                 <div class="panel panel-default" v-show="isTab(4)">

                     <div class="panel-body">

                         这是所有的订单

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         let vm = new Vue({

             el:'#app',

             data: {

                 tab: 0

             },

             methods: {

                 setTab(index) {

                     this.tab = index;

                 },

                 isTab(index) {

                     return this.tab === index;

                 }

             }

         })

     </script>

 </body>

 </html>

vue选项卡2

style绑定

<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue样式操作</title>

     <style>

         .item {

             width: 600px;

             padding: 10px;

             border: 1px solid #ccc;

         }

         .current {

             border-color:red;

         }

         .active {

             border-color:green;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <h1>样式操作</h1>

         <hr>

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

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

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

         <p :class="classList">Lorem ipsum dolor sit amet.</p>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         new Vue({

             el:'#app',

             data: {

                 cname:'current',

                 isCurrent: false,

                 classObj: {item:true, link:true,active:true},

                 classList: ['link', 'item']

             }

         });

     </script>

 </body>

 </html>

vue样式操作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue Style绑定</title>

     <style>

         p {

             border:1px solid #ccc;

             width: 700px;

             padding:20px;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <h1>Style绑定</h1>

         <p :style="styleValue">Lorem ipsum dolor sit amet.</p>

         <p :style="{color:'purple', background:'pink'}">Lorem ipsum dolor sit amet.</p>

         <p :style="styleObj">Lorem ipsum dolor sit amet.</p>

         <p :style="[styleObj, {borderWidth:'2px'}]">Lorem ipsum dolor sit amet.</p>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         new Vue({

             el:'#app',

             data: {

                 styleValue: 'color:red;background:green',

                 styleObj: {color:'pink',background:'#ccc', transform:'translate(0, 0)'}

             }

         });

     </script>

 </body>

 </html>

vue样式绑定-style

2.7 事件

事件绑定

<p @事件名="方法">
<p v-on:事件名="方法">
方法加 () 的问题 
<p @事件名="方法(1,1,2,3,$event)">

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue 事件</title>

     <link rel="stylesheet" href="../dist/css/bootstrap.css">

 </head>

 <body>

     <div id="app" class="container">

         <div class="page-header">

             <h1>Vue 事件</h1>

         </div>

         <div class="row">

             <div class="col-md-12">

                 <button @click="counter ++" class="btn btn-default"> +1 </button>

                 <button @click="addCounter(1)" class="btn btn-default"> +1 </button>

                 <button @click="addCounter(10)" class="btn btn-default"> +10 </button>

                 <hr>

                 <p class="info">

                     {{counter}}

                 </p>

                 <hr>

                 <div class="alert alert-info" @mousemove="onMoveFn">

                     Lorem ipsum dolor sit amet.

                 </div>

                 <div class="alert alert-danger" @mousemove="onMoveFn($event, 100)">

                     Lorem ipsum dolor sit amet.

                 </div>

             </div>

         </div>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         new Vue({

             el:'#app',

             data: {

                 counter:0

             },

             methods: {

                 addCounter(num=1) {

                     this.counter += num;

                 },

                 onMoveFn(ev, num) {

                     console.log(ev.target)

                     //ev 是获取的event 对象

                     console.log(ev.pageX, ev.pageY)

                 }

             }

         })

     </script>

 </body>

 </html>

vue事件绑定

事件修饰符

.stop  阻止事件冒泡
.prevent  阻止默认动作   
.capture   捕获阶段触发事件
.once      只绑定一次
.self      只有本身才触发
.passive   优化移动端的scroll事件

<p @click.stop="">
<p @click.stop.prevent="">

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue 事件</title>

     <link rel="stylesheet" href="../dist/css/bootstrap.css">

     <style>

         .box {

             width:200px;

             height:200px;

             border:1px solid red;

         }

         .inner {

             width:100px;

             height:100px;

             margin:50px;

             background: pink

         }

     </style>

 </head>

 <body>

     <div id="app" class="container">

         <div class="page-header">

             <h1>Vue 事件修饰符  键盘修饰符</h1>

         </div>

         <div class="row">

             <div class="col-md-12">

                 <div class="box" @click.self="boxFn">

                     <div class="inner" @click="innerFn"></div>

                 </div>

             </div>

         </div>

         <hr>

         <div class="row">

             <div class="col-md-6">

                 <input type="text" class="form-control" @keyup.65="onkeyupFn">

                 <input type="text" class="form-control" @keyup.enter="onkeyupFn">

                 <input type="text" class="form-control" @keyup.ctrl.65="onkeyupFn">

             </div>

         </div>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         new Vue({

             el:'#app',

             methods: {

                 boxFn(){

                     console.log('box');

                 },

                 innerFn(){

                     console.log('inner');

                     //event.stopPropagation();

                 },

                 onkeyupFn(event) {

                     console.log('按了 '+event.keyCode+' 按键')

                 }

             }

         })

     </script>

 </body>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表单数据绑定</title>

     <style>

         p {

             border: 1px solid #ccc;

             width: 600px;

             padding: 20px;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <h1>表单数据绑定</h1>

         <hr>

         <input type="text" v-model="message">

         <br>

         <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>

         <br>

         <h3>单个复选框</h3>

         <input type="checkbox" v-model="checkVal01" true-value="yes" false-value="no">全选

         <br>

         <h3>多个复选框</h3>

         <input type="checkbox" value="lanball" v-model="loveList">篮球

         <input type="checkbox" value="zuball" v-model="loveList">足球

         <input type="checkbox" value="bangball" v-model="loveList">棒球

         <input type="checkbox" value="paiball" v-model="loveList">排球

         <h3>单选按钮</h3>

         <input type="radio" v-model="sex" value="male"> 男

         <input type="radio" v-model="sex" value="female"> 女

         <h3>选择框</h3>

         <select v-model="address">

             <option value="上海">上海</option>

             <option value="北京">北京</option>

             <option value="深圳">深圳</option>

             <option value="广州">广州</option>

         </select>

         <h3>修饰符</h3>

         <input type="text" v-model.number.lazy="num">

         <p> {{num}} </p>

         <p> {{address}} </p>

         <p> {{sex}} </p>

         <p> {{loveList}} </p>

         <p>{{checkVal01}}</p>

         <p>{{ message }}</p>

         <p>{{ message }}</p>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         let vm = new Vue({

             el: '#app',

             data:{

                 message:'同志',

                 checkVal01: true,

                 loveList:['bangball'],

                 sex:'male',

                 address:'广州',

                 num:0

             }

         })

     </script>

 </body>

 </html>

vue表单数据绑定

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表单</title>

     <link rel="stylesheet" href="../dist/css/bootstrap.css">

     <style>

     </style>

 </head>

 <body>

     <div id="app">

         <div class="container">

             <div class="page-header">

                 <h1>表单提交</h1>

             </div>

             <div class="row">

                 <div class="col-md-6">

                     <form @submit.prevent="">

                         <div class="form-group">

                             <label for="#">用户名</label>

                             <input type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名">

                         </div>

                         <div class="form-group">

                             <label for="#">密码</label>

                             <input type="password" class="form-control" v-model="loginData.pwd">

                         </div>

                         <div class="checkbox">

                             <label for="#">

                                 <input type="checkbox" v-model="loginData.remember"> 记住密码

                             </label>

                         </div>

                         <button class="btn btn-success btn-block" @click="login()">登 录</button>

                     </form>

                 </div>

             </div>

         </div>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         let vm = new Vue({

             el:'#app',

             data: {

                 loginData: {

                     username:'',

                     pwd:'',

                     remember: true

                 }

             },

             methods: {

                 login() {

                     //获取所有表单的值

                     console.log(this.loginData)

                 }

             }

         })

     </script>

 </body>

 </html>

vue获取表单数据

实例：todolist

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>todoList</title>

     <style>

         #app {

             margin:100px auto 0;

             width:600px;

         }

         .input-box {

             font-size:0;

         }

         .input-box input {

             box-sizing: border-box;

             width:500px;

             font-size:16px;

             border:1px solid #ccc;

             padding:10px;

             line-height: 18px;

         }

         .input-box button {

             width:100px;

             padding:10px;

             font-size:16px;

             border:1px solid #ccc;

             background: #f5f5f5;

             cursor: pointer;

             line-height: 18px;

             border-left:none;

         }

         ul {

             list-style: none;

             margin:0;

             padding:0;

         }

         .todo-list {

             margin-top:20px;

         }

         .todo-list li{

             border:1px solid #ccc;

             padding:10px;

             margin-bottom:10px;

             font-size:0;

         }

         .todo-list i {

             margin-right:20px;

             display: inline-block;

             width:16px;

             height:16px;

             border:1px solid #ccc;

             cursor: pointer;

             vertical-align: bottom;

         }

         .todo-list p {

             width:500px;

             display: inline-block;

             font-size:16px;

             margin:0;

         }

         .todo-list span {

             width:50px;

             cursor: pointer;

             color:red;

             font-size:16px;

         }

         .done-list {

             margin-top:20px;

         }

         .done-list li{

             border:1px solid #ccc;

             padding:10px;

             margin-bottom:10px;

             background: #999;

             color:#ccc;

             cursor: not-allowed;

             text-decoration: line-through;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div class="input-box">

             <input type="text" v-model.trim="newTodo" placeholder="请输入代办事项">

             <button @click="addTodo">添 加</button>

         </div>

         <div class="todo-list">

             <ul>

                 <li v-for="(todo,index) in todoList" :key="index">

                     <i @click="addDone(index)"></i>

                     <p>{{ todo }}</p>

                     <span @click="deleteTodo(index)">&times;</span>

                 </li>

             </ul>

         </div>

         <h3>已完成</h3>

         <div class="done-list">

             <ul>

                 <li v-for="done in doneList" :key="done">{{ done }}</li>

             </ul>

         </div>

     </div>

     <script src="../dist/js/vue.js"></script>

     <script>

         new Vue({

             el:"#app",

             data: {

                 todoList: ['今天代码敲三遍', '晚上和小莉莉去喝酒'],

                 doneList: [],

                 newTodo:''

             },

             methods: {

                 addTodo() {

                     //如果输入框是空的，不执行

                     if (this.newTodo.length === 0) {

                         return;

                     }

                     //添加内容到 代办事项

                     this.todoList.push(this.newTodo)

                     //清空输入框

                     this.newTodo = '';

                 },

                 deleteTodo(index) {

                     this.todoList.splice(index, 1)

                 },

                 addDone(index) {

                     //把内容添加到 doneList

                     this.doneList.push(this.todoList[index])

                     //从todoList删掉

                     this.deleteTodo(index);

                 }

             }

         })

     </script>

 </body>

 </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 表单

相关文章

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）模板