VUE
vue
一 关于库和框架
库:一堆方法的集合
框架:是针对某类业务提供整套的解决方案,并且定义好了一套的规范,开发者必须按照规范去使用
二 MVVM
vue是mvvm框架
View(视图模型)-DOM
ViewModel(同步Model和View的对象)-监听
Model(数据模型)-对象
三 vue使用
1 引入vue.js文件
2 在script里面创建vue实例,这个实力会监管html代码
3 通过el属性指向vie实例监管的范围,el的值通常是一个id
4 通过data属性去保存页面需要用到的数据
5 通过{{}}将data中的数据取出来,展示在页面上
注意:在vue实例监管范围以外的部分没有效果
<script src = './vue.js'></script>
<div id='app'>{{mymsg}}</div>
<script>
let vm = new vue({
el:'#app',
data:{
mymsg:"hello wolrd"
}
})
</script>
四 插值表达式
1 插值表达式的作用是用来获取data中的数据的值
使用的位置标签的innerHTML位置
<p>{{name}}</p>
2 插值表达式的合法用法有:字符串拼接、数值运算、三元表达式、函数
注意:虽然if else语句等于三元运算符,但是它不能在插值中使用
<h1>{{name}}</h1>
<p>{{age+1}}</p>
<p>{{age>=18?'已成年':'未成年'}}</p>
<p>{{name.split('')}}</P>
关于函数,在自定义函数的时候,必须return数据的结果
五 关于vue的一些常用指令
1 v-text 指令和插值表达式一样
注意:只要是v-开头的,都是vue中的指令
v-text的作用和差值表达式{{}}是一样的,都是用来展示data数据到视图的
<h1 v-text="name"></h1>
v-text和插值表达式的区别:
v-text写在标签属性位置。{{}}写在标签innerHTML位置
注意:开发的时候用{{}}插值表达式
2 v-html指令 解析带特殊符号的文本
<div v-html='info'></div>
info:'<p>我是谁</P>'
v-html可以解析带特殊标签的文本,但是需要注意,这个指令不太安全
3 V-bind 绑定动态属性
v-bind是用来动态绑定属性用的,它绑定的属性是任意的
使用方法:在标签属性位置 v-bind:属性名=“data中的变量”
简写(开发用)在标签属性位置 :属性名=“data中的变量”
<img v-bind:src = "avatar" alt="">
avatar:'./img/0.jpg'
任意属性:后面学的组件,可以用这种方式来进行组件传值
<p :myname="name">测试任意属性</P>
<a :href="`del.html?id=${id}`"
注意:v-bind在动态绑定class的时候很特殊,使用对象语法,对象的key作为类名,对象的值是布尔值,为true表示有这个类,反之没有这个类
.redfont {
color:red;
}
<p :class="{redfont:age<18}">测试红色字体</P>
age:18
4 v-model 双向绑定
v-model的作用:用来实现双向数据绑定,它只能给input、select、texttarea、组件使用
双向数据绑定就是视图模型view和数据模型model的数据进行同步变化:你变,我变,我变了,你也变
<input type=''text' v-model='name'>
5 v-for 循环
可以用来渲染数组,以及对象,它会根据data中数据的变化自动刷新view
注意:以下两种情况并不会触发视图的更新
1 使用数组的length属性操作数组时
2 使用数组的索引去操作数组的时候
解决上述问题:两种方式:
1 使用全局方法 Vue.set(需要设置的数组,索引,新值)
Vue.set(vm.students,0,{name:'jack',age:19}) //更改数据
2 使用数组的splice()方法
vm.students.splice(0,1) //删除数据
注意:使用v-for指令时,必须和key属性结合使用,key属性可以唯一表示数组中的每一项,它的值不能重复必须唯一,它的作用是用来提高效率的
<li v-for="(item,index) in students" :key="index">{{item.name}}:{{item.age}}:索引是{{index}}</li>
A 渲染数组
1 在变迁属性位置 v-for="item in Arr" item是形参,表示数组中的每一项;Arr表示需要遍历的数组
2 在标签属性位置 v-for="(item,index) in Arr" index表示的是索引,常用
例:
<ul>
<li v-for="item in students">{{item.name}}:{{item.age}}</li>
</ul>
students:[
{{name:'li',age:14}},
{{name:'li1',age:14}},
{{name:'li2',age:14}}
]
例2:常用
<ul>
<li v-for="(item,index) in students">{{item.name}}:{{item.age}}:索引是{{index}}</li>
</ul>
students:[
{{name:'li',age:14}},
{{name:'li1',age:14}},
{{name:'li2',age:14}}
]
B 渲染对象
1 在标签属性位置 v-for="val in obj" val 表示对象里面的键值,obj表示的是需要遍历的对象
2 在标签属性位置 v-for="(val,key,index) in obj" val 表示对象里面的键值,obj表示的是需要遍历的对象 index表示键对应的索引
例:
<ul>
<li v-for="val in teacher">{{val}}</li>
</ul>
teacher:{
name:'li',
age:19
}
例2:
<ul>
<li v-for="(val,key,index) in teacher">{{key}}:{{val}}--{{index}}</li>
</ul>
teacher:{
name:'li',
age:19
}
6 v-on 指令,用于监听事件
事件可以是内置事件:如:click,keydow,keyup;也可以是自定义事件
在methods中,获取data中的数据,需要加this
用法:
1 在标签属性位置写上 v-on:事件类型=“函数”
2 简写 @事件类型=“函数” 常用
3 直接在执行函数中传递参数就行了
4 获取事件对象通过$event这个变量获取,注意不能给他加引号
5 事件修饰符,它的作用是增强事件的功能,常用的有 .prevent阻止默认行为 .stop阻止冒泡
6 按键修饰符,它的作用是限定按键(keydown,keyup)事件 通过keycode .13 常用的是 .enter
<h1>name</h1>
<button v-on:click="changeName">点击改变name</button>
<button @click="changeName">点击改变name(简写)</button> //简写
<button @click="changeNameByArg('传参')">点击改变name(传参)</button> //传参
<button @click="getEvent($event)">点击获取事件对象</button> //简写
<a href="http://www.baidu.com" @click.prevent="preventJump">跳转百度</a>
<input type='text' v-model='name' @keydown.13="gotologin"/>
//定义的函数在methods里面
methods:{
changeName(){
//改变name的值 this 就是vm实例
this.name ='heima'
},
//传递参数
changeNameByArg(newName){
this.name = newName
},
//打印事件对象
getEvent(e){
console.log(e)
},
//修饰符
preventJump(){
console.log('阻止跳转')
}
//按键修饰
gotologin(){
console.log('打印enter键')
}
}
7 v-if和v-show 指令 控制元素的显示与隐藏
v-if和v-show都可以用来控制元素的显示与隐藏,后面跟一个布尔值就行,为true就是表示显示,为false就是表示隐藏
v-if是通过直接操作dom来控制
v-show是通过样式,display:none来控制的
使用场景的区别:
1 涉及到大量dom元素的显示与隐藏的时候没需要用v-show
2 涉及到异步数据渲染的时候,用v-if好一点
8 v-if 和 v-else-if和v-else 判断
与if判断一样
例:
<li v-if='type==="A"'>优秀</li>
<li v-else-if='type==="B"'>良好</li>
<li v-else>差</li>
9 v-cloack 解决表达式闪烁问题
v-cloack 解决表达式闪烁问题,但是必须和css结合使用
1 给闪烁的标签上加上v-cloack指令
2 利用属性选择器隐藏掉该元素
3 当vue实例挂载完成之后它会将这个v-cloack指令(属性)移除掉
例:
<style>
[v-cloack]{
display:none;
}
</style>
<p v-cloack>{{msg}}</p>