Vue

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 停用当前组件