VUE基础
.一.Vue基础指令:
1.v-model 双向数据绑定
用法: 用于表单控件input select textarea components(组件) <v-model="content">{{content}}</any>
修饰符:
① .lazy 取代input 监听 change 事件
② .number 输入字符串转为数字
③ .trim 输入首尾空格过滤
2.v-text 更新元素的textContent,textContent属性设置或返回指定节点的文本内容，以及它的所有后代。
主要用于页面数据渲染,代替{{}},因为页面为渲染完成时{{}}可能会显示在页面上
内容标签不会转义
用: v-text=”数据”
3.v-html 更新元素的innerHTML ,不会作为Vue模板编译,只在可信内容上用,不能用在用户提交的内容,安全性低
用法: v-html="数据"
4.v-show 控制元素的显示/隐藏,原理display:none/block
用法:v-show="bool名" data:{ bool名:true/false } 事件控制bool值
5.v-if 也是控制显示/隐藏
原理 删除,添加元素,v-if与v-for一起使用v-for级别高
6.v-else-if
限制: 必须在v-if 或 v-else-if后
用法: if-else if 语法 可链式调用
7.v-else
限制: 放在 v-if或 v-else-if后
用法: 为v-if 或 v-else-if 添加”else”块
8.v-bind:属性 动态的绑定一个或多个特性,或一个组件prop到表达式,如:title=”” v-bind:src=””
缩写: :
修饰符:
① .prop 被用于绑定DOM属性
② .camel 使用DOM模板时将属性名称驼峰化 2.1.0以上版本支持
用法:
动态的绑定一个或多个特性,或一个组件prop到表达式
9..v-for 循环遍历一个数组,也分in 和 of 基于源数据多次渲染或模板快,v-for默认不改变整体,而是替换元素, 这里需要:Key 栗子:v-for=”(item, index) of items”
需要 :key=”value” 主要用在Vue的虚拟DOM算法,可以提高渲染性能,每个值要不同 index可以用,但有问题
用法: v-for="(list, index) in/of lists" :key="list.id"
10.v-on: 事件绑定
简写: @click
用法: @click="方法名/自定义"
11.v-pre
用法: 跳过这个节点和它子元素的编译过程,可以用来显示原始标签,加快编译
12.v-cloak
用法: 这个指令保持在元素上直到关联实例结束编译.
[v-clock]{display: none} 一般用于页面加载时,不想被人看见的元素
13.v-once 只渲染元素和组件 一次 .随后的重新渲染,元素/组件及其所有子节点都被视为静态内容并跳过,常用于性能更新优化
二.过滤器: filter
主要是对接口的数据进行判断和转化,可用于插值{{}} 和 v-bind 表达式
分为全局过滤器和局部过滤器
全局过滤器 Vue.filter() 可在全部页面使用
Vue.filter("过滤器名",function(参数,参数,...){
return ....
})
<p>{{msg | 过滤器名("参数","参数",...) | 过滤器 ...}}</p>局部过滤器 在实例中加filters:{}
用法: 同上
三.创建Vue实例
在网页中先引入
`script src= "vue.min.js" script src = "vue-resource.min.js" //vue-resource是一个和后台交互的插件 == AJAX`cnpm install vue –save-dev 把插件安装到项目中的依赖库
var app = new Vue({ //可简化为new Vue
//el 是这个实例需要监听的范围对象,一般用id
el:”#app”,
//data是模型,定义数据,所有模型的改变都会反向操作DOM
data:{
count:0,
list:[]
},//mounted 生命周期的一部分,在创建完成后,默认执行某个方法,生命周期函数有8个,最常用的有created和mounted
mounted: function(){
//this.$nextTick 保证 this.$el在document中
this.$nextTick(function (){
//this在Vue实例方法中所有this都指向实例,但是在某一个函数中内部作用域发生了变化,this就变了
var _this = this;
this.$http.get/post/jsonp("./data.json",参数)
.then(function(res){
//vue将json又封装了一层,需要res.body才能获得原本的数据,把获得的数据放到data下
_this.list = res.body.result.list;
})
})
},//filters 局部过滤器 在要使用的数据后加 | 过滤器名 如:{{msg | formatMoney}}
filters:{
formatMoney: function(value){
"$"+value.toFixed(2)
}
},//methods 方法 监听范围内的所有事件都要调用methods中的方法
methods:{
cartView (){ },
},//computed 一个属性通过其他属性计算而来 当其他引用时computed会使用缓存值 依赖属性发生变化时才会重新计算
computed:{
num (){ return c = a+b}
},//watch 侦听器 检测某一个数据或计算数据发生变化
watch:{
num (){ count++ }
}
})四.特殊特性
1.ref
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
注意: ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！
$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
2.slot
用于标记往哪个具名插槽中插入子组件内容
3.key
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。
使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
4.is
用于动态切换组件
<component v-bind:is="currentTabComponent"></component>
通过动态改变 is的值来切换组件
五.动画
vue中单元素和组件的过渡
用<transition name=""></transition>把需要过渡的组件包裹起来
过渡的6个class
1.v-enter：
定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.v-enter-active：
定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3.v-enter-to:
2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4.v-leave:
定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.v-leave-active：
定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6.v-leave-to:
2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 name中的字符会替换 v
例子:
<transition name="slide-down"> <!-- 过渡动画效果 --> </transition>
.slide-up-enter, .slide-up-leave-to { // enter移入开始 leave-to 移出开始
transform: translate3d(0, 100%, 0)
}
.slide-up-enter-to, .slide-up-leave, .slide-down-enter-to, .slide-down-leave { // enter移入结束 leave移出结束
transform: translate3d(0, 0, 0);
}
.slide-up-enter-active, .slide-up-leave-active, .slide-down-enter-active, .slide-down-leave-active{ // 进入动画 移出动画
transition: all .3s linear;
}
.slide-down-enter, .slide-down-leave-to {
transform: translate3d(0, -100%, 0);
}