ES6的常用语法：
变量的定义：
他的结果:
相当于
模板字符串：
数据的解构：
函数：
this：
结果
this取决于函数的最近调用者。
类：
类的继承：
ES6的常用指令：
v-html，v-text：
v-for：
v-if：
v-show：
v-bind：
v-on：
button的绑定事件还可以这样写：
<button v-on="{click:show,mouseenter:enter,mouseleave:leave}">点我显示</button>
这里有一个小的demo：
demo二：
v-model：
也可以是select标签：
也可以是textarea标签。
指令修饰符：
<pre>{{name}}</pre> # 可以原样输出 比如空格
v-model.lazy.trim="name" # 可以删掉空格
v-model.number = ‘phone’ # 可以将输入的数字字符串变成数字。
计算属性：（支持一些简单的计算）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>学科</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model.number="python"></td> </tr> <tr> <td>前端</td> <td><input type="text" v-model.number="web"></td> </tr> <tr> <td>总分</td> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <td>{{avg}}</td> </tr> </tbody> </table> </div> <script> const app = new Vue({ el:'#app', data:{ python:'', web:'' }, computed:{ sum:function () { return this.python + this.web }, avg:function () { return this.sum/2 } } }) </script> </body> </html>
自定义指令：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <style> .box{ 200px; height: 200px; border: solid 1px red; background-color: #eeeeee; } </style> </head> <body> <div id="app"> <div class="box" v-yang.left.bottom="fix"> </div> </div> <script> Vue.directive('yang',function (el, bindding) { console.log(el); console.log(bindding); console.log(bindding.modifiers); let positions = bindding.modifiers; if(bindding.value){ el.style.position = 'fixed'; for(let key in positions){ el.style[key] = 0; } }else{ el.style.position = 'static' } }); const app = new Vue({ el:'#app', data:{ fix:true }, }) </script> </body> </html>
获取DOM：
这里有一个demo：小清单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card { 480px; } .line{ text-decoration: line-through; } </style> </head> <body> <div id="app"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>小清单</span> <input type="text" v-model="current"> <el-button style="float: right; padding: 3px 0" type="text" @click="my_click">添加</el-button> </div> <div v-for="(item,index) in dolist" :key="index" class="text item" @click="my_line"> <el-alert :class="{line:active}" :title="item" type="success" show-icon @close="my_close"></el-alert> </div> </el-card> {{dolist}} </div> <script> const app = new Vue({ el:'#app', data:{ current:'', dolist:[], active:false, }, methods:{ my_click:function () { //this.dolist.push(this.current)// 添加在后面 this.dolist.unshift(this.current)// 添加在前面 }, my_close:function () { }, my_line:function () { this.active = !this.active } } }) </script> </body> </html>