1、概述
前端框架三驾马车:
VUE
React
Angular
vue 是一款渐进式javascript前端框架
作者:尤雨溪
官网:cn.vuejs.org
插件案例:https://github.com/opendigg/awesome-github-vue
特点:
1、简单,上手方便
2、结合Angular指令与react组件思维
3、生态丰富(插件多)API文档完善
2、实例化参数
选择性标签:el:"#app"
指定数据 :data:{}
data(){
return{}}
一个函数返回一个对象
computed 计算
watch监听
3、computer 计算
computed: {undefined
mydata:function(){undefined
/*函数主体*/
return data; //需要输出的数据 此时data就等于mydata
}
}
注意:mydata不能在data中声明,否则会出错。
4、watch监听
一、浅监听 它可以监听字符串、普通数组的变化 watch:{ val(newVal,oldVal){ //实时监控数据的变化 } }
<input type="text" v-model='food[1]'>{{food[1]}}
watch:{
food(newVal,oldVal){
console.log(newVal,'new')
console.log(oldVal,'old')
},
}
二、深度监听
可以监听到对象的变化,还可以复杂数组
watch:{
对象:{
deep:true,//深度
handler(新值newVal){
//可以实时监听到新值newVal的变化
}
}
}
<input type="text" v-model='obj.name'>{{obj.name}}
<hr>
<input type="text" v-model='songList[0].name'>{{songList[0].name}}
watch:{
obj:{
deep:true,//deep 深度
handler(newVal){
console.log(newVal,'new')
console.log(newVal.name,'new')
}
},
songList:{
deep:true,
handler(newVal){
console.log(newVal[0].name,'new')
}
},
}
5、文本渲染指令指令
指令的值可以使简单的JavaScript命令
文件渲染指令
{{}}
v-text
v-html
(渲染html文本)
6、条件渲染
v-show
css方式隐藏
v-if
v-else-if
v-else
频繁切换用v-show
一次性切换用v-if
v-show隐藏式通过css的方式隐藏节点
7、列表渲染
v-for=“item in list"
list 是要遍历的数组
item 当前便利的项目
v-for=“(item,index) in list”
index 当前遍历项的索引从0开始
使用v-for务必
v-bind:key=""
:key=“值”
值必需是唯一的
添加key属性可以优化v-for的渲染
让vue更好的识别当前渲染的节点
特别是在排序,过滤等操作的时候
不建议key的值使用循环的索引
8、事件指令
v-on:事件类型=“响应函数”
v-on:click=“say()"
@click="say()"
事件的简写
事件修饰符
.stop阻止事件冒泡
.prevent阻止默认事件
.once只执行一次
@click.stop.once.prevent="num++"
事件的修饰符可以同时写多个
按键修饰符
.down
.left
.up
.right
.delete
.enter
事件对象
$event
9、表单绑定指令事件
v-model
让表单的值与数据绑定在一起
<input type="checkbox">
默认选中值是true
不选中值是false
<input type="checkbox" name="fruit" v-model="list">
如果是多个把选中的值动态添加到list数组中
修饰符
.number数字
.trim移除两端空白
10、类绑定
1、属性
:class=“值”
2、对象
当对象的属性值为真,该属性作为class绑定:class="{'key1':trye,'key2':false}"
key1的值为真,key1会被绑定,key2不会
3、数组方式
:class=“[cl,c2,c3]”
11、动画
1、vue动画在内置组件transition包裹
会自动在动画的进入过程与离开过程添加类名
内置组件
transition
name名称
mode:模式
in-out先进再出
out-in先出再进
enter-active-class
指定进入类名
leave-active-class
指定离开类名
transition-group
动画类
v-enter-active
进入过程
v-enter
进入前
v-enter-to
进入后
v-leave-active
离开过程
v-leave
离开前
v-leave-to
离开后
创建动画形式
2、keyframes关键帧
.fade-enter-active{animate:fadein ease 1s}
.fade-leave-active{animate:fadeOut ease 1s}
3、引入第三方动画库
指定进入的class与离开的class
<transition name='fade1' enter-active-class='bounceInRight animated' leave-active-class='hinge animated'>
<div class="img" v-if='flg1'></div>
</transition>