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: {
width: '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>