一、什么是vue
二、如何在页面中使用vue
三、vue的挂载点
四、vue的基础指令
一、什么是vue
1.什么是vue
vue.js十一个渐进式javascript框架
渐进式：vue从控制页面中的一个变量到页面中一块内容到整个页面，最终到整个项目都可以用vue框架来实现
2.vue可以做哪些事情
将数据渲染到指定区域（数据可以是后台获取，也可以死是前台自己产生）
可以与页面完成基于数据的交互方式
3.为什么学习vue
1.整合了Angu lar 、React框架的有点（第一手API文档是中文的）
2.单页面应用（得益于vue组织化的开发 => 前台代码的复用）
3.虚拟DOM（提高DOM操作的效应）
4.数据的双向绑定
二、如何在页面中使用vue
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box1"> <!--{{}}会被vue解析为数据的渲染的指定语法--> {{ }} </div> <hr> <div class="box2"> {{ }} </div> </body> <!--引入vue：将vue加载到js文件下--> <script src="js/vue.js"></script> <script> //如何使用jq框架<=拿到jq框架的对象 $|jQuery //类比：如何使用vue框架<=拿到vue框架的对象那个 new Vue（） // vue对象需要手动创建，原因，一个vue对象可以只控制页面中的某一部分，如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象 // vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂摘点（挂载点可以是唯一标识页面中的某一区域） new Vue({ el:'#box1' // 挂在id为box1的div上，那么div下的所有内容都由该vue对象来控制 }) new Vue({ el:'.box2' //挂在class为box2的div上，那么div下的所有内容都有该vue对象来控制(尽量使用id，唯一标识) }) </script> </html>
三、vue的挂载点
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script src='js/vue.js'> </script> <script> //vue实例会根据数据产生虚拟DOM，最终替换掉挂载点的真是DOM（不要挂载到body上） var app = new Vue({ el:'#app', data:{ msg:'今晚约了女神开房间打斗地主，女神如时赴约，到房间后看我从包里取出一副扑克后，被删了一耳光走了，留下我一人独自风中凌乱！' } }); //如果需要使用vue对象（实例），那么久可以接受vue创建的结果，反而就不需要接受 console.log(app); console.log(app.$attrs);// vue实例的变量都是以$开头 console.log(app.$el); console.log(app.$data.msg); console.log(app.msg); // app对象 = new Vue（）实例 = 标签div#app组件 </script> </html>
四、vue的基础指令
1.文本指令
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ info }}</p> <!--v-text 为vue的文本指令 = "info",info为vue实例data中的一个变量--> <p v-text="info"></p> <p v-text="msg"></p> <p v-html="res"></p> </div> </body> <script src='js/vue.js'> </script> <script> new Vue({ el:'#app', data:{ info:"插值表达式", msg:"文本指令", res:"<b>加粗的字体</b>", } }); </script> </html>
2.属性指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--v-bind:属性 = "变量"--> <!--如果abc自定义属性被v-bind：指令绑定了，后面的值也会成为vue变量，如果就像是普通的字符串，再用“包裹”--> <!--:就是v-bind：简写方式（1.常用 2.一定且只操作属性）--> <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p> <!--最常用的两个属性 class|style--> <!--class--> <p :class="a"></p> <!--单类名--> <p :class="[a,b]"></p> <!--双类名--> <p :class="{c:d}"></p> <!--了解：c为类名，是否起作用取决于d值为true|false 开关类名--> <!--style--> <p :style="s1"></p> <!--s1为一套样式--> <p :style="[s1,s2,{textAlign:res}]">123</p> <!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> </div> </body> <script src='js/vue.js'></script> <script> new Vue({ el: '#app', data: { h_info: "悬浮提示", hehe: "呵呵", a: 'active', b: 'rule', s1: {//样式1：值1，...,样式n：值n width: '200px', height: '200px', background: 'yellow', }, s2: { borderRadius: '50%' }, res: 'center' } }); </script> </html>
3.事件指令
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--v-on:事件="变量 简写@"--> <!--事件绑定的变量可以在data中赋值，但建议在methods中赋值--> <p v-on:click="fn1">111</p> <p @click="fn2">222</p> <!--vue事件绑定可以传自定义参数--> <p @click="fn3(33333)">333</p> <!--vue事件绑定不传自定义参数，默认将事件对象传过去了--> <p @click="fn4">444</p> <!--vue事件绑定不传自定义参数，还要将事件对象传过去，要明确传$event--> <p @click="fn1(55555,$event)">555</p> </div> </body> <script src='js/vue.js'> </script> <script> new Vue({ el:'#app', data:{ //事件在data中提供一个函数地址，可以实现事件 fn1:function () { console.log('1111') } }, // 以后事件尽量写在methods中 methods:{ fn2:function () { console.log('2222') }, fn3(arg) { console.log('arg') }, fn4:function (ev) { console.log(ev) }, fn5:function (arg,ev) { console.log('arg') console.log('ev') }, } }); </script> </html>
4.表单指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <form action=""> <!--v-model="变量"本质操作的就是表单元素的value--> <!--v-model完成的就是双向绑定--> <input type="text" v-model="value"> <input type="text" v-model="value"> <p>{{ value }}</p> <!--v-once只会被赋值一次，并且结合双向绑定--> <p v-once="value">{{ value }}</p> </form> </div> </body> <script src='js/vue.js'></script> <script> new Vue({ el: '#app', data: { value: '初始的value', // value:"", } }); </script> </html>