vue
什么是vue：
渐进式 JavaScript 框架，一个html到整个项目的使用，也可以称为完成前后台分离的前端框架
前端三大主流框架：
Angular React Vue
优点：
1）单页面 硬件要求低
2）组件化开发
3）数据驱动
4）数据的双向绑定
5）虚拟DOM
6）轻量级
vue的指令
1.文本指令（v-text v-html v-once）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本指令</title> </head> <body> <div id="app"> <p>{{ msg }}</p> <!--1、插值表达式：在内部直接写变量或变量表达式--> <p>{{ (num + 1 - 3) / 2 }}</p> <!--2、v-text v-html v-once 三个文本指令 --> <p v-text="msg"></p> <!--2.v-text(同插入表达式):纯文本--> 注：msg是"变量名" <p v-html="'<b>加粗文本</b>'"></p> <!--3.v-html:可以解析标签--> 注：直接写字符串，就相当于直接转换 <p v-html="htmlMSG" @click="changeMsg"></p> <p v-once="htmlMSG">{{ htmlMSG }}</p> <!--4.v-once:插值表达式渲染文本，once来限制文本不可修改--> 注：就是把变量变成常量 </div> <!--插值表达式中一个变量被限制，整个结果都被限制--> </body> <script src="js/vue.js"></script> <script> new Vue({ 1、创建vue实例与页面标签进行绑定，该实例就可以控制该标签机内部所有标签 el: '#app', 2、挂载点：与页面标签绑定的关键，具有唯一性 data: { 3、变量要传的数据 msg: 'message', num: 10, htmlMSG: '<b>加粗文本</b>' }, methods: { 4、methods控制所有事件 changeMsg: function () { this.htmlMSG = '<i>加粗文本</i>'; 5、this就是这个vue实例 } } }) </script> </html>
2.事件指令（v-on:click @click）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件指令</title> <style> [v-cloak] { <!--v-cloak：斗篷指令，避免闪烁--> display: none; } </style> </head> <body> <div id="app" v-cloak aaa="123"> <!--v-cloak：斗篷指令，避免闪烁--> <p v-on:click="clickAction">单击</p> <!--1、基础的事件绑定--> <p v-on:dblclick="dblclickAction">双击</p> <ul> <li v-on:click="liAction(0)">{{ li1 }}</li> <!--2、绑定事件并传参--> 注：函数里面可以传数字，也可以是字符串 <li v-on:click="liAction(1)">222</li> <li v-on:click="liAction(2)">333</li> </ul> <p v-on:click="sysAction1">不传自定义参数</p> <!--3、传递ev事件对象(如鼠标点击的位置)--> 注：这里没有参数，默认返回ev <p v-on:click="sysAction2(888, $event)">传自定义参数</p> 注：这里加括号不返回ev ，并且 $event能传递ev <p @click="clickAction">单击</p> <!--4、v-on: 可以简写为 @ --> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { li1: '111' }, methods: { clickAction: function () { alert('点击') }, dblclickAction () { alert('双击') }, liAction (index) { alert(index); }, sysAction1 (ev) { console.log(ev) }, sysAction2 (num, ev) { console.log(num); console.log(ev); } } }) </script> </html>
3.属性指令（v-bind： ：）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性指令</title> <style> .box { width: 200px; height: 200px; background-color: orange; } .wrap { width: 100px; height: 100px; background-color: red; } .kiss { width: 150px; height: 150px; background-color: cyan; } .x { width: 300px; } .y { height: 300px; } .z { background-color: brown; } </style> </head> <body> <div id="app"> <div class="box" v-bind:style="myStyle" @click="changeColor('pink')"></div> <div class="box" v-bind:style="{'width': w}" @click="changeWidth"></div> <!--1、操作单个样式：w变量的值就是为属性width提供数据的--> <div class="box" v-bind:style="more_style" @click="changeStyle"></div> <!--2、操作多个样式: more_style是一个变量，可以赋值多个key:value样式，如下--> <div :aaa="AAA">简写v-bind</div> <!--3、v-bind: 可以简写为 :，可以绑定所有系统和自定义属性，属性一旦绑定，后方就是变量 --> <div :class="c1" @click="changeClass"></div> <!--4、操作单个类名--> <!--a.直接赋值：c1就是变量，变量的值就是类名--> <div :class="{kiss: kiss_able}"></div> <!--布尔切换：该div有一个kiss类名，kiss_able的true或false决定kiss是否生效--> <!--{ 类名（字符串） ：变量}--> <div :class="[x, y, {z: is_z}]"></div> <!--5、操作多个类名: [变量1, ..., 变量n] 每个变量的值都是该标签的类名 --> <!--这里的z就是变量的值--> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { myStyle: 'background-color: red;', w: '400px', more_style: { '100px', height: '100px', borderRadius: '50%', backgroundColor: 'cyan' }, AAA: 'BBB', #AAA的属性为BBB c1: 'wrap', kiss_able: true, x: 'x', y: 'y', // z: 'z', is_z: true }, methods: { changeColor (color) { this.myStyle = 'background-color: ' + color + ';' }, changeWidth () { this.w = '500px' }, changeStyle () { this.more_style.borderRadius = '30%' #修改一个 }, changeClass () { if (this.c1 === 'box') { this.c1 = 'wrap'; } else { this.c1 = 'box'; } // 布尔类型值来回切换 this.kiss_able = !this.kiss_able; #当点击的时候是true就变为flase，反之亦然 } } }) </script> </html>
4.表单指令（v-model）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model="val"> <!--1、数据的双向绑定--> <input type="text" v-model="val"> <p>{{ val }}</p> <!--打印val变量的结果--> <form action=""> <input type="password" v-model="val"> <!--2、普通输入框: 直接绑定变量即可 --> <p> <label for="male">男</label> <!--3、单选框--> <!--radio_val的值是多个单选框中一个的value值，代表该单选框默认选中，本质是自动绑定值，如下--> <input id="male" type="radio" value="male" v-model="radio_val" name="sex"> <label for="female">女</label> <input id="female" type="radio" value="female" v-model="radio_val" name="sex"> <button @click="alertValue">单选框提交给后台的value</button> <span>{{ radio_val }}</span> </p> <p> <!--4、独立使用的复选框 --> <!--sure_val的值为true|false，决定该单个复选框是否选中，如下--> <input type="checkbox" name="sure" value="同意" v-model="sure_val"> <span>{{ sure_val }}</span> </p> <p> <!--5、复选框--> <!--hobby_val的值是数组，里面用来存放复选框所有选项的值，值存在代表该选框选中，如下--> 男<input type="checkbox" value="male" name="hobby" v-model="hobby_val"> 女<input type="checkbox" value="female" name="hobby" v-model="hobby_val"> 哇塞<input type="checkbox" value="?" name="hobby" v-model="hobby_val"> <span>{{ hobby_val }}</span> </p> <p> <input type="submit"> </p> </form> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { val: '', radio_val: 'male', sure_val: true, hobby_val: ['?', 'male'] }, methods: { alertValue () { alert(this.radio_val) } } }) </script> </html>
5.条件指令（v-if v-else-if v-else）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> [v-cloak] { display: none; } .box { width: 200px; height: 200px; } .b1 {background-color: orange;} .b2 {background-color: cyan;} .r {background-color: red;} .b {background-color: blue;} .g {background-color: green;} </style> </head> <body> <div id="app" v-cloak> <p> <button @click="toggleAction(true)">显示</button> <button @click="toggleAction(false)">隐藏</button> </p> <div class="box b1" v-if="is_show"></div> <!--v-if在隐藏时，不被渲染 | v-show在隐藏时，采用display: none存在，两者绑定的变量值都是 true|false--> <div class="box b2" v-show="is_show"></div> <p> <!--2、v-if、v-else-if、v-else 分支家族，用法同下 --> <button @click="toggleShow('red')">红</button> <button @click="toggleShow('blue')">蓝</button> <button @click="toggleShow('green')">绿</button> </p> <div class="box r" v-if="color == 'red'"></div> <div class="box b" v-else-if="color == 'blue'"></div> <div class="box g" v-else></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { is_show: false, color: 'red' }, methods: { toggleAction(is_show) { this.is_show = is_show; }, toggleShow(color) { this.color = color; } } }) </script> </html>