VUE基础
VUE入门
VUE
核心概念，不让用户操作DOM元素，让程序员可以更多的关注业务逻辑！（能帮我们减少不必要的DOM操作，提高渲染效率，双向数据绑定）
MVVM
M是界面的数据 V就是前端界面 VM是一个调度者，调度M和V之间的数据交换
<!DOCTYPE html>
<html>
<head>
<title>VUE入门</title>
<script src="vue.js"></script>
</head>
<body>
<div id="zx125"></div>
<script type="text/javascript">
new Vue({
el:"#zx125",
template:'<p>{{zx}}</p>',
data:{
zx:"HELLO VUE"
}
})
</script>
</body>
</html>
渐进式
Vue可以根据开发者的实际需求来不断渐进，而不是一口气全部用上
挂载点
1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都才有id选择器
2.html与body标签不可以作为挂载点
创建vue实例（new Vue）传进去的字典(对象)的key，称之为vue实例成员(变量)
访问实例成员，用 vue实例.$成员名, eg：app.$el
默认.取值，取得就是data里面的值
console.log(zx.$data.zx);
console.log(zx.zx);
$el为html的元素
let zx = new Vue({
el: '#app',
data:{
zx:'zx125'
}
});
console.log(zx);
console.log(zx.zx);
console.log(zx.$el);
console.log(zx.$data);
console.log(zx.$data.zx);
vue事件
methods就是vue实例提供的事件函数，函数里面的this就是vue实例（注意是methods里面的this）
let zx = new Vue({
el: '#app',
data:{
zx:'zx125'
},
methods:{
fn:function () {
this.zx='点击'
},
fn1:function () {
this.zx='移到button'
},
fn2:function () {
this.zx='移出button'
}
}
});
事件指令
事件可以简写成事件指令
v-on:事件名:"事件函数" = @事件名=“事件函数”
<!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
<p @click="z1">1</p>
如果指定了参数，事件对象要要手动传入
<p @click="z2(100)">2</p>
手动传入
<p @click="z3(100,$event)">3</p>
z1:function(ev){
console.log(ev)
},
z2:function(num,){
console.log(num);
},
z3:function(num,ev){
console.log(num);
console.log(ev);
},
文本指令
{{}}，变量由data提供
{{msg}}
{{msg + "文本拼接"}}
{{msg[1]}} 索引取值
{{msg.slice(2,4)}}切片取值
<!-- v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!-- v-html：可以解析html语法标签的文本 -->
<p v-text="'<b>' + msg + '</b>'"></p> = <b>文本信息</b>
<p v-html="'<b>' + msg + '</b>'"></p> = 加粗 文本信息
#注意这里使用的是反的单引号
<p v-text="`<b>${msg}</b>`"></p> = <b>文本信息</b>
<p v-html="`<b>${msg}</b>`"></p> = 加粗 文本信息
属性指令
1.标签
2.样式（style）
<div id="app">
#属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量"
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
#属性指令操作 style 属性
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
#通常：变量值为字典
<div :style="mys1"></div>
了解：{中可以用多个变量控制多个属性细节}
<div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>
#重点：一般vue都是结合原生css来完成样式控制
<!--<div :class="c1"></div>-->
<!--class可以写两份，一份写死，一份有vue控制-->
<div class="box1" :class="c2"></div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]控制多个类名-->
<div :class="[c3, c4]"></div>
</div>
过滤器
可以对变量进行过滤，可以过滤多次该可以同时过滤多个变量，并传递变量
<div id="app">
<p>{{ zx }}</p>
<p>{{ msg }}</p>
<button v-on:click="fn" v-on:mouseover="fn1" v-on:mouseout="fn2">按钮</button>
<p>{{ wl | f1 }}</p>
<p>{{ wl | f1 | f2}}</p>
<p>{{ wl,zx| f3}}</p>
<p>{{ wl,zx | f4(100,200) }}</p>
</div>
filters:{
f1(num){
return num*2
},
f2(num){
return num/99
},
f3(num1,num2){
return num1+num2
},
f4(num1,num2,num3,num4){
return num1+num2+num3+num4
}
},
198
2
99zx125
99zx125100200
表单指令
主要是关联表单的数据，如果是单选，多选的话关联表单的选中状态（通过标签的value来关联）
<div id="app">
#普通表单
<input type="text" v-model="zx1">
#单选
<input type="checkbox" name="agree" v-model="zx2">
#复选
<input type="checkbox" name="hobby" value="paly" v-model="zx3">
<input type="checkbox" name="hobby" value="eat" v-model="zx3">
#多项单选
<input type="radio" name="sex" value="man" v-model="zx4">
<input type="radio" name="sex" value="women" v-model="zx4">
</div>
<script>
new Vue({
el:'#app',
data:{
zx1:'我是数据',
zx2:true,
zx3:['eat','paly'],
zx4:'man'
}
})
</script>
斗篷指令
其实就是防止，界面出现的时候，页面的模板出现还没有被渲染的模板语法，其实也可以把vue.js的引入放到顶上解决这个问题
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<p>{{ msg }}</p>
</div>
条件指令
注意
1.if和show的区别，为false，if标签是不会再前端渲染的，但是show的话，是在前端渲染的，只是样式为display：none，只是不显示而已
2.if和elseif，else联用的话，当上面有满足条件的的时候，就不会渲染下面分支的内容，当上面所有的分支都不满足，才会满足else分支而且else分支不需要条件的
<div id="app">
<p v-if="false">我是if指令</p>
<p v-show="false">我是show指令</p>
<p v-if="true">我是if指令</p>
<p v-show="true">我是show指令</p>
<p v-if="zx == '1' ">我是if指令</p>
<p v-show="zx === '1' ">我是show指令</p>
<p v-if="zx === '1'">if分支</p>
<p v-else-if="zx === '2'">elif分支1</p>
<p v-else-if="zx === '3'">elif分支2</p>
<p v-else>else分支</p>
</div>
new Vue({
el: '#app',
data: {
zx: '1',
}
})
案例
功能：点击显示不同的颜色块，点击的按钮显示点击的状态，刷新不重置（保存显示状态）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box {
width: 400px;
height: 200px;
}
.r {
background-color: red
}
.y {
background-color: yellow
}
.g {
background-color: green
}
.action {
background-color: pink;
}
span{
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>
<span @click="changeC('red')" :class="{action: c === 'red'}">红</span>
<span @click="changeC('yellow')" :class="{action: c === 'yellow'}">黄</span>
<span @click="changeC('green')" :class="{action: c === 'green'}">绿</span>
</p>
<div class="wrap">
<div class="box r" v-if="c === 'red'"></div>
<div class="box y" v-else-if="c === 'yellow'"></div>
<div class="box g" v-else></div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
c: localStorage.c ? localStorage.c : 'red',
},
methods: {
changeC(color) {
this.c = color;
// 每一次改变c的值，将值同步到前台数据库
localStorage.c = color; // 存
}
}
})
</script>
</html>
解析
#action类，满足条件才有
<button @click="changeC('red')" :class="{action: c === 'red'}">红</button>
#浏览器的本地数据库，需要手动才能删除
localStorage
#每次点击先改变vue的c值，然后在本地保存一个c=color的值
this.c = color;
localStorage.c = color;
#首先取本地存的c，如果c为空取红色
c: localStorage.c ? localStorage.c : 'red',
循环指令
就是循环拿数据，并且渲染界面
<div id="app">
#字符串
<p><span v-for="v in name">{{ v }}</span></p>
<p><span v-for="(v,i) in name">{{ v }}{{ i }}</span></p>
#对象数据
<p><span v-for="v in zx">{{ v }}</span></p>
<p><span v-for="(v,k) in zx">{{ v }}{{ k }}</span></p>
<p><span v-for="(v,k,i) in zx">{{ v }}{{ k }}{{ i }}</span></p>
#数组对象
<div v-for="(peo,i) in student">
<hr v-if="i != 0">
<p><span v-for="(v,k,i) in peo">{{ v }}{{ k }}{{ i }}</span></p>
</div>
</div>
new Vue({
el: '#app',
data: {
name: '阿萨德',
zx: {
name: 'zx',
age: 18,
sex: 'man'
},
student: [
{
name: 'zx',
age: 18,
sex: 'man'
},
{
name: 'wl',
age: 18,
sex: 'women'
},
{
name: 'zx125',
age: 18,
sex: 'man'
}
]
},
})
案例
输入框提交，动态调加留言，点击留言可以删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="sub">添加留言</button>
<ul>
<li v-for="(v,i) in comments" @click="del(i)">{{ v }}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg:'',
comments:[]
},
methods:{
sub(){
if(this.msg){
//添加留言
this.comments.push(this.msg);
//添加后情况输入框
this.msg = '';
}
},
del(i){
this.comments.splice(i,1)
}
}
})
</script>
</html>
解析
push是在数组后面插入数据
unshift是在数组前面插入数据
// 数组操作万能方法，可以完成增删改
let arr = [1, 2, 3];
// 参数：开始索引，操作长度，操作的结果们
arr.splice(2, 0, 100);[1,2,100,3]
arr.splice(1, 1);[1,100,3]
分隔符成员
可以用来替换默认的表达式符号
<p>{ num ]}</p>
delimiters: ['{', ']}'],
计算属性成员
1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)
2、方法属性的值来源于绑定的方法的返回值
3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值
5、方法属性值不能手动设置，必须通过绑定的方法进行设置
<div id="app">
<input type="text" v-model="num1">
+
<input type="text" v-model="num2">
=
<input type="text" v-model="res">
</div>
new Vue({
el: '#app',
data: {
num1:'',
num2:'',
},
computed:{
res(){
//如果num1，num2都有值计算，否则显示提示
return this.num1 && this.num2 ? +this.num1 + +this.num2 : "请填写所有参数"
}
}
})
属性的监听
1、watch中给已有的属性设置监听方法
2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
3、监听方法不需要返回值(返回值只有主动结束方法的作用)
<div id="app">
<input type="text" v-model="num1">
<input type="text" v-model="res">
</div>
new Vue({
el: '#app',
data: {
num1:'',
res:''
},
watch:{
num1(){
this.res = this.num1
}
}
})
js的类
es5函数可以作为类使用，es6加入了class来规范类
this哪个对象调用就代表谁
let sex = '女';
let wl = {
name:'wl',
age:22,
#相当于sex=sex
sex
};
console.log(wl);
function Student(name,age) {
this.name = name;
this.age = age;
this.eat = function () {
alert("吃饭饭了");
return '吃完了'
}
}
let zx =new Student('zx125','18');
console.log(zx.name);
console.log(zx.age);
