vue段总结

什么是vue

1.Vue.js是一套构建用户界面的渐进式框架,Vue 采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用
2
文本渲染指令
v-text
v-html 可以渲染数据中的html标签

条件渲染指令
v-if=“表达式值”
v-else
v-show 通过css display:none方法来隐藏

属性绑定
v-bind:属性名=“值”
简写形式 :属性名=“值”

注:所有的 指令都只能在el指定的html标签内才有用
v-指令=“值”
”值“不能看着是字符串，而应该理解为js的表达式运算结果，或者数据data里面的值
在vue中不用去操作dom元素节点
通过操作数据来改变视图（dom节点）

事件绑定
v-on:事件名=“执行内容”
v-on:click=“num=1”
简写方法
@事件名=""
@click=“num=2”
当单击的时候设置num值为2

列表渲染
v-for=“(item,index) in list”
item 是自定义的
代表每一项数据
index 代表数据的渲染下标
:key=“index”
key的值要是唯一的
方便vue识别，排序动画等操作

表单绑定
v-model=“”
text
checkbox
单一
选中值为true |反之false
多选
1. 绑定的数据时数组类型
2. 每个多选项绑定的是同一个数组
3. 默认值可以填入数据组
radio
select
表单修饰符
.lazy 当change事件触发视图更新
默认是input事件就会触发视图更新
.number把表单的值转换为数据数值

按键修饰
	.stop 停止事件冒泡
	.prevent 阻止默认事件
	.once 只执行一次
	@click.prevent="say"

@click.once=“say”
按键修饰符
@keyup.enter 回车键被按下
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

watch
监听一个数据的变化
watch:{
“obj”:{
handler:function(val){
// 当obj发生任何变化时候，都会触发handler函数
}，
deep:true,
// 深层次监听（obj的属性发生变化也会触发handler）
}
}

computed
从现有数据，计算出来新的的数据
computed:{
rmg:function(){
return this.msg.split(’’).reverse().join(’’)
}
}

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 指令的值
}
}
}
使用

class绑定
属性绑定
:class="‘red blue’"
动态绑定
:class="{‘red’:flag}"
:class="{‘active’:index==current}"
数组绑定
:class="[‘red’,‘em’,‘small’]"

style 绑定
对象
:style="{fontSize:‘14px’,color:‘blue’}"
:style=“obj”

data:{
obj:{‘font-size’:“48px”,fontStyle:‘italic’,color:red}
}

vue动画
1. vue它不能直接实现动画，它提供动画各阶段需要的class
2. 组件提供class
3. 在vue中，动画是在元素显示与隐藏的过程中，添加 class实现的
v-if
v-else
v-show
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 animate.css

动画模式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. 定义组件
let counter = {
template:<div>只能有一个根节点{{num}}</div>,
data:function(){ return {num:1}}
methods:{}
}
2. 注册组件
new Vue({

components:{counter,…}
})
3. 使用组件