1、采用cnd方式来使用vue。
html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 8 </head> 9 <body > 10 <div id="vue-app"> 11 <h1>{{greet('night')}}</h1> 12 <h1>{{name}}</h1> 13 <div v-bind:class="classtag">绑定属性</div> 14 <input type="text" v-bind:value="value"> 15 <p v-html="website"> 16 </p> 17 </div> 18 <div id="ev_bind"> 19 <button @click="add">增加商品</button> 20 <button v-on:click="del">减少商品</button> 21 <button v-on:dblclick="add">双击增加</button> 22 <button v-on:dblclick="del">双击减少</button> 23 <p>目前购物车商品个数：{{shop}}</p> 24 <div v-bind:class="ok" v-on:mousemove="deal">{{x}},{{y}}</div> 25 </div> 26 27 <div id="ke_ev"> 28 <input v-on:keyup.enter="KeyUp" placeholder="回车alter" /> 29 </div> 30 <div id="data_bind"> 31 <h1>双向数据绑定</h1> 32 name:<input type="text" name="" v-model="name"><span>{{name}}</span> 33 age:<input type="text" v-model="age" /> <span>{{age}}</span> 34 </div> 35 <hr> 36 <div id="compute_test"> 37 <button v-on:click="a++">点击增加a</button> 38 <button @click="b++">点击增加b</button> 39 <p>a is : {{a}}</p> 40 <p>b is : {{b}}</p> 41 <p>Add age to A={{addToA}}</p> 42 <p>Add age to B={{addToB}}</p> 43 </div> 44 <div id="css_bind"> 45 <h1 v-bind:class="addCls">示例1</h1> 46 </div> 47 <div id="arr_bind"> 48 <h1 v-bind:class="[active,error]">示例2<h2> 49 </div> 50 <div id="three_bind"> 51 <h1 v-bind:class="error!=''?active:''">示例三</h1> 52 </div> 53 <div id="if-bind"> 54 <h1>if 条件判断</h1> 55 <template v-if="flag"> 56 <h1>条件成立</h1> 57 </template> 58 <template v-else> 59 <h5>条件不成立</h5> 60 </template> 61 </div> 62 <div id="for_bind"> 63 <h1 v-bind:style="{background:sys}">for循环</h1> 64 <ul> 65 <template v-for="(p,index) in person" v-if="p"> 66 <li>{{index}}----{{p}}</li> 67 </template> 68 </ul> 69 <ul> 70 <template v-for='(v,i) in fav'> 71 <li>{{v.name}}---{{v.age}}</li> 72 73 </template> 74 </ul> 75 </div> 76 <hr> 77 <h1>Vue多实例</h1> 78 <div id="app_one"> 79 <h4>{{title}}</h4> 80 </div> 81 <div id="app_two"> 82 <h4>{{title}}</h4> 83 <button v-on:click="Ch aneTitle">点击修改app_one title</button> 84 </div> 85 <div id="com_bind"> 86 <h1>组件使用：</h1> 87 <com_con></com_con> 88 </div> 89 <script type="text/javascript" src="app.js"></script> 90 </body> 91 </html>
js注释和解释：
1 // 创建vue对象。 2 new Vue({ 3 el:"#vue-app", 4 data:{ 5 name:"米斯特刘", 6 classtag:"primary", 7 value:'ok', 8 website:"<a href='www.baidu.com'>个人网站</a>" 9 }, 10 methods:{ 11 greet:function (time) { 12 // body... 13 return "good"+time+' '+this.name+"!" 14 } 15 } 16 }) 17 // el:是该Vue对象作用的dom根容器的对象。绑定vue对象数据的使用范围，除了这个范围无法使用。 18 // data:是数据绑定。{{}} 是引用vue对象数据的模板语言。也可以是单个表达式，这里不能流控制，需要使用三元表达式。 19 // methods:vue对象绑定函数的关键字。也是key vlaue形式。value后面跟的是匿名函数。前端调用直接函数名字()形式，如果想引用vue对象的data中的属性值，我们可以使用this.属性名字（在vue中 20 // 我们不用this.data.属性名，直接是this.属性名字） 21 // v-bind:属性名字="data中的key" ---->绑定属性。缩写为: 22 // v-html="data中的属性key"---->绑定标签。 23 // 绑定事件，使用v-on:事件名称="函数()"其中括号可以省略，在vue中默认情况下，事件后面是函数。在属性调用的时候，需要区别属性名称和函数，所以函数需要带有括号。而事件默认就是函数。可以不带括号。 24 // 单击事件:click 双击事件:dblclick 鼠标移动：mousemove....js中的时间都支持。 25 //@事件名称 也是绑定事件的一种方法。是v-on的缩写。 26 new Vue({ 27 el:"#ev_bind", 28 data:{ 29 shop:31, 30 ok:"addst", 31 x:0, 32 y:0 33 }, 34 methods:{ 35 add:function(){ 36 this.shop++ 37 }, 38 del:function(){ 39 this.shop-- 40 }, 41 deal:function(event){ 42 // 自动传入事件 43 this.x=event.clientX; 44 this.y=event.clientY; 45 } 46 } 47 } 48 ) 49 50 //数据双向绑定：比如我们的input标签，我们在输入内容的时候，后台获取的内容，也随之更改，这叫做单向绑定，如果我们的更改后台绑定数据，前端展示的数据也更改随之变化，这种方式叫做双向数据绑定。 51 // 指令：ref和v-model 两种方式。 52 // 建立使用v-model方式。 v-model="属性"，其中属性要和data里的属性保持一致。 53 new Vue({ 54 el:"#data_bind", 55 data:{ 56 name:"", 57 age:"" 58 } 59 }) 60 // vue提供了键盘的输入的监听事件，常见的有：.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 61 new Vue( 62 { 63 el:"#ke_ev", 64 data:{ 65 ok:"ok" 66 }, 67 methods:{ 68 KeyUp:function(){ 69 alert(123) 70 } 71 } 72 }) 73 74 //compute属性即计算属性。 75 // methods和compute的区别： 76 // 计算属性，在被调用的时候只执行发生变化的dom的属性，如果虚拟dom属性不发生变化的话，不会更改该属性。 77 // methods:无论dom是否发生变化都会被执行。 78 // 计算属性和普通属性的绑定是一样的，也是使用双大括号：{{}} 79 new Vue({ 80 el:"#compute_test", 81 data:{ 82 a:0, 83 b:0, 84 age:20 85 }, 86 computed:{ 87 addToA:function(){ 88 return this.a+this.age; 89 }, 90 addToB:function(){ 91 return this.b+this.age; 92 } 93 94 } 95 } 96 ) 97 //动态绑定css和class 98 // 使用指令v-bind 99 // 通过data数据的绑定，val值的true和false 来决定是否显示class。一般结合计算属性进行绑定。 100 new Vue({ 101 el:'#css_bind', 102 data:{ 103 active:true, 104 error:false 105 },computed:{ 106 addCls:function(){ 107 return { 108 active:this.active, 109 error:this.error 110 } 111 } 112 } 113 }) 114 // 通过数组方式进行绑定。 115 new Vue({ 116 el:"#arr_bind", 117 data:{ 118 active:"active", 119 error:"error" 120 } 121 }) 122 // 通过三元表达来判断是否添加class 123 new Vue({ 124 el:"#three_bind", 125 data:{ 126 active:"active", 127 error:"" 128 } 129 }) 130 //条件判断：v-if、v-else-if、v-eles指令。 131 // 其中v-else 紧跟v-if 和v-else-if后面。 132 new Vue({ 133 el:"#if-bind", 134 data:{ 135 flag:false 136 } 137 }) 138 // 其中template 标签，是vue特有的标签，在页面并不存在的标签，属于模拟标签，一般用条件判断和for循环。 139 // for循环。 140 // 语法:item in items 不同于jquery的$.each() 在vue里，循环中的元素，最后一个元素是索引。你如{item,index} or {val,key,index} 141 142 new Vue({ 143 el:"#for_bind", 144 data:{ 145 person:['tom','lili','jack'], 146 fav:[{'name':'tom','age':22},{'name':'cc','age':21}], 147 sys:"red" 148 } 149 }) 150 // 关于什么时候用{{}},什么时候用{} 151 // {{}}：是模板语法，我们在单独插值的时候使用。 152 // {}：是类似字典的含义，当我们的在html在绑定属性的时候，比如说css的时候，需要使用{}:<h1 v-bind:style="{background:sys}">for循环</h1> 153 154 155 // 多实例 156 // 在多实例的情况下，如果将一vue实例修改另一个vue实例的data数据呢？ 157 // 首先看下多实例： 158 var app_one=new Vue({ 159 el:"#app_one", 160 data:{ 161 title:"this is app one" 162 } 163 }) 164 165 var app_two=new Vue({ 166 el:"#app_two", 167 data:{ 168 title:"this is app two" 169 }, 170 methods:{ 171 ChaneTitle:function(){ 172 app_one.title="被app_two修改了。" 173 } 174 } 175 }) 176 // 如果app_two修改app_one的title呢？ 177 //调用：app_one.title即是app_one的title.类似于this.title 这里this就是app_one 178 179 // 组件：所谓的组件，就是公共部分，可以被反复调用的部分。 180 // 语法： Vue.component('名称（这个名称是直接当做标签在html被调用的作用域使用.）,{data:function(){return {xxx}},template:"模板"}) 181 // 注意：1)名称是被调用的标签。 182 // 2）data：一定是函数，通过返回对象，来保证调用实例的各个之间的数据隔离，五不影响。 183 // 3)template:是模板，这个后面跟的是html标签的字符串。需要注意的是：只有一个根标签。 184 185 Vue.component('com_con',{ 186 data:function(){ 187 return { 188 name:"tom", 189 age:22 190 } 191 }, 192 methods:{ 193 changeAge:function(){ 194 this.age++ 195 } 196 }, 197 template:`<p>{{name}}----{{age}} 198 <button v-on:click="changeAge">点击增加年龄</button> 199 </p>` 200 }) 201 202 203 new Vue({ 204 el:"#com_bind", 205 })