Vue总结#
渐进式js框架
组成
模板
指令：将控制和·html联系在一起
html内容
样式
控制
data:数据
el：指定模板
methods 方法
指令
文本渲染指令
{{js 表达式}}
v-text
v-html //可以渲染数据中的html标签
条件渲染指令
v-if="表达式值"//通过移除dom元素来隐藏
v-else
v-show//通过css display：none方法来隐藏
属性绑定
v-bind:属性名="值"
:属性名="值"
特别强调
所有 指令只能在指定的模板标签内有用
v-指令 = "值"
“值”不能看着是字符串，而应该理解为js的表达式运算结果，或者data里面的值
事件绑定
v-on:事件名=""
@事件名=""
v-on:click = "num=1"
1.@click = "表达式"
@click = "num++"
2.@click="methods 中的方法名"
@click = "say"
会默认自动传递一个时间参数
@click="say(参数1,参数2)"
$event 是一个特殊写法，代表事件参数
vue方法中心
Methods
say(){ }
列表渲染
v-for="(item,index) in list"
item是自定义的 代表每一项数据
index代表数据的渲染下标
:key="index"
key的值要是唯一的
方便vue识别，排序动画等操作
复习数组方法
添加
push0从后面添加
unshift( )从前面添加
删除
pop0从后面删除
shif()从最前面删除
splice(从第几个，删除数量，新添加内容)
查找
indexOf()//查找元素所在的下标,找不到返回-1
表单绑定 v-model=""
text
checkbox
单一
选中值为true | 反之为false
多选
1.绑定的数据是数组类型
2.每个多选项绑定的是同一个数组
3.默认值可以填入数据组
radio
select
表单修饰符
.lazy当change事件触发视图更新
默认是input事件就会触发视图更新
.number把表单的值转换为数据数值
vue
在vue中不用去操作dom元素节点
通过操作数据来改变视图（dom节点）
事件修饰
事件修饰符
.stop停止事件冒泡
.prevent 阻止默认事件
.once只执行一次
按键修饰符
@keyup.enter 回车键被按下
其他常用按键
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
watch 监听一个数据的变化
watch:{
"obj":{
handler:function(){
//当obj 发生任何变化的时候，会触发handler函数
},
deep:true
//深层监听（obj的属性发生变化也会触发handler）
}
}
computed 从现有的数据，计算出行的数据
computed:{
rmsg:function(){
return this.msg.split('').reverse().join('');
}
}
单词
deep 深的
handler 处理器
watch 监听
computed 计算
filters 过滤 现有数据的显示格式
filters：{
fix(val,arg1,arg2){
return xxx
}
}
{{12345 | fix}}
{{12345 | fix(2)}
vue参数
el 指令模板
data 指定数据
methods 指定方法
watch 监听
computed 计算
filters 过滤
vue模板指令
联系模板与数据+方法的
1.v开头
v-text
v-on
2.参数
v-on：click
v-bind: title
3.修饰符
v-model.number
v-bind:keyup.enter
directives
vue 自定义指令
作用
1.要操作dom时候
2.使用集成第二方插件时
定义
directives:{
img:{
inserted(el,binding){
// el 当前指令所在的html节点
// binding.value 指令的值
}
}
}
使用
<div v-img="xxxxx">
单词：
directives 指令
inserted 已插入
binding 绑定
class绑定
属性绑定
：class="red blue"
动态绑定
:class="{'red':flag}"
:class="{'active':index==current}"
数组绑定
:class="['red','em','small']"
style 绑定
对象
:style="{fontSize:'16px',color:'blur'}"
:style="obj"
data:{
obj:{"fontSize":"100px",fontStyle:'italic',color:'blue'}
}
vue动画
1.vue动画他不能直接实现动画，他提供动画各阶段需要的class
2.<transition> 组件提供class
3.在xue中，动画是在元素显示与隐藏过程中，添加class实现
v-if
v-else
v-shw
4.transition 组件提供
v-enter-active 元素整个进入过程
v-enter//元素进入的初始状态
v-enter-to//元素进入的结束状态
v-leave-active 元素整个离开的过程
v-leave//元素的离开初始状态
v-leave-to//元素的离开结束状态
自定义动画
enter-active-class="xxx"
leave-active-class="xxx"
要引入第二方css animated
动画模式 mode
in-out//先执行进入动画，在执行离开动画
out-in//先执行离开动画，在执行进入动画
5.transition-group组件
tag 指定标签
move-class给正在移动中的元素添加class
name 动画名称
enter-active-class
leave-active-class
指定进入离开class
组件
定义
1.组件就是扩展自定义的html标签
2.组件是一个功能的集合，可以重复的使用
3.组件能使一个复杂的系统分割为一些简单的组件
4.组件使前端分工协作更加方便
5.组件在小项目中会显得复杂。 项目越大,优势就越明显
全局
Vue.component(组件名,{
template:`<div>组件的模板里面只能够有一个根组件</div>`
})
局部
1.定义
var counter = {
template:`<div>只能有一个根节点</div>`,
data:function(){return {num:1, }},
methods:{ }
}
2.注册组件
new Vue({
components:{counter,...}
})
3.使用组件
<counter></counter>