标签：v-on dea 钩子函数 cli red temp filter component 生命周期
Vue
1 let的特点：
1 局部作用域
2 不会存在变量提升
3 变量不能重复声明
2 const的特点：
1 局部作用域
2 不会存在变量提升
3 不能重复声明 只声明常量 不可变的量
3 箭头函数
var f = a => a
//等同于
var f=function(a){
return a;
}
4 Vue的下载
下载依赖包
npm install vue
下载所有的依赖包
npm install
5 vue的起步
1） 引包
2） 创建实例化对象
new Vue({
el:‘#app‘,
data:{
return()
}
});
6 指令系统
//常用
v-bind
v-on
v-if
v-show
v-text
v-html
（1） v-if与v-show的区别
v-if 是‘真正’的条件渲染 因为他会确保在切换的过程中条件快内的事件监听器
和子组件适当的被销毁和创建
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
（2） v-on v-bind
v-on:click 对当前DOM绑定click事件（绑定事件）
v-bind:class 绑定属性
在Vue中简写：
v-bind:class 等价于 :class
v-bind:src 等价于 ：src
v-on:click 等价于 @click =‘方法名‘
（3） v-text 和 v-html
对页面的dom进行赋值运算 相当js中的innerText innerHTML
7 组件的使用
局部组件的使用
步骤：（1） 声子 （2）挂子 （3） 用子
//1.声子
var App = {
tempalte:`
<div class=‘app‘></div>`
};
new Vue({
el:"#app",
//3.用子
template:<App />
//2.挂子
components:{
App
}
})
7 过滤器
（1） 局部过滤器（只能在当前组件的内部使用）
filters:function(val,a,b){
return ...
}
(2) 全局过滤器（任何的组件都可以使用）
Vue.filter(‘mytime‘,function(){
return ...
})
8 生命周期的钩子函数
-beforeCreate 组件创建之前
-created 组件创建完成 可以发ajax 请求,操作数据 实现数据驱动视图
- beforeMount 装载数据到ＤＯＭ之前调用
- mounted DOM挂载完成
- beforeUpdate 获取原始DOM
- updated 获取更新之后的DOM
- beforeDestory 组件销毁之前
- destoryed 组件销毁之后
- activated 激活当前组件 vue提供的内置组件`<keep-alive></keep-alive>`
- deactivated 停用当前组件
标签：v-on dea 钩子函数 cli red temp filter component 生命周期
原文地址：https://www.cnblogs.com/mlhz/p/10159157.html
