概述
前端框架三架马车
Vue
React
Angular
vue是一款渐进式JavaScript前端框架
作者：尤雨溪
官网：cn.vuejs.org
子主题 5
特点
简单，上手方便
结合Angular指令与react组件思维
生态丰富（插件多）API文档完善
实例化参数
new Vue
el:"#app"选择目标标签
data：{}指定数据
data(){return{}}一个函数返回一个对象
methods 方法
computend计算
从现有数据计算新的数据
computed:{
rmsg(){
return this.msg.split("").reverse().join("")
}
}
watch监听
监听数据的变化，并执行回调函数handler
watch:{
"num":{
handler(nval,oval){
}
deep:true
}
}
自定义指令directives
bind绑定执行一次
inserted插入执行一次
update每更新执行一次
directives:{
"v-focus":{
update(el,binding){
if(binding.value){el.focus()}
}
}
}
<input v- focus="flag">
过滤-管道
格式化数据
使用
1 {{num|fiv}}
2 {{num|fiv(2)}}
3 v-text="num|fix"
filters:{
fic(value,age){
return value.toFixed(arg)
}
}
// 保留小数点两位
指令
指令的值是可以是简单的JavaScript命令
文本型渲染指令
{{}}
v-text
v-html（渲染html文本）
属性绑定指令
v-bind：属性="指令值"
：属性="值" 简写
条件渲染
v-show css方式隐藏
v-if
v-else-if
v-else
频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点
列表渲染
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的值使用循环的索引
事件指令
v-on:事件类型="响应函数"
v-on:click="say()"
@click="say()"
事件的简写
@click="num++"
行内响应事件
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
@click.stop.once.prevent="num++'
事件的修饰符可以同时写多个
案件修饰符
.up
.down
.left
.right
.delete
.enter
.space
.esc
事件对象
sevent
表单绑定指令
v-model 让表单的值与数据绑定在一起
<input type="chevkbox">
默认选中值是true,不选中false
<input type="checkbox" name ="fruit" v-model="list"
如果是多个把选中的值动态添加到list中
修饰符
.number 数字
.trim 移除两端空白
类绑定
1属性
：class="值"
2 对象
当对象的属性值为真，该属性作为class绑定
：class="{'key1':ture,'key2':false}"
key1的值为真,key1会被绑定，key2不会
3 数组方式
：class="[c1,c2,c3]"
样式绑定
属性名去掉 - 下个字母大写
:style="{color:'red','fontSize':'48px'}"