接触vue

公司项目开始需要前后端分离，选用Vue学习成本相对较低，
在此记录下笔记

Vue实例对象代理data数据

  var data ={a:1,b:2,c:3}
  var vm = new Vue({data:data})
      vm.a === data.a   //true
      //2者改变其一数据都会发生改变

Vue实例的实例属性及方法

  vm.$data === data //true
  vm.$el  === document.getElementById("app")
  //变量监听
  vm.$watch("a",function(新值, 旧值){  })

vue 的指令

//都是实时更新的
  v-if="变量"                                  //可通过变量来控制元素是否显示
  v-else
  v-bind:title="变量"                          //绑定属性  属性值不能用{{变量}} 这与ng不同 如果变量=false 表示移除属性
  v-bind // 的缩写 :title="变量"
  v-for="list in lists"                        //因为是实时的  所以增减 lists 比如lists.push()
  v-on:"methods"  //绑定事件 缩写@on:click="meth"
  <input v-model="message">                    //利用 v-model 双向绑定表单输入值
  v-once                                       //数据一次性插入  当变量改变 数据也不会改变
  <span v-once>This will never change: {{ msg }} </span>

vue 组件函数

  Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
//创建一个组件  利用props  拿到父传下的参数

vue 的周期函数

   var app = new Vue({
     created:function(){ },                    // 实例已经创造
     beforeCompile:function(){},               // 模板编译之前
     compiled:function(){},                    //模板编译之后
     ready:function(){},                       //插入到文档中时
     beforeDestroy:function(){},               // 册除之前
     destroyed:function(){}                    //册出之后  
    })

销毁vue对象函数

  app.$destroy();

vue({})参数对象里已有属性

var vm =new vue({
    el:"###id",
    data:data
    computed:{                               //计算属性默认
        xxx:funcation(){}                    // 处理data在渲染  *注意必修在依赖的属性发生改变时 才会执行函数*  所以methods 里的方法不能代替此方法
    }
    filters:{
        xxx:function(){}                    //过滤器函数
    }

    })
    methods:{
        xxx：function(){}
    }
    watch:{
        xxx:function(val){}                  // 监听
    }

vue修饰符

<form v-on:submit.prevent="onSubmit"></form>                // .prevent取消默认行为

vue特殊函数

   _.debounce(function(){},500)                            //等待500ms 渲染

vue对象与数组语法来定义样式

>对象
  //直接
  <div v-bind:style='{active:isActive,error:isError}'></div>
  //存对象
  <div v-bind:style='styleObject'></div>

  style:{active:true,error:fasle}
 //存计算属性
  <div v-bind:style='styleObject'></div>
  computed:{
    styleobject:function(){
       return {active:true,error:false}

    }

  }
>数组
//2种 1只能直接存变量
<div v-bind:style='[activeclass,errorclass]'></div>
dsata:{
    activeclass:'active',
    errorcalss:'error'
}
//数组里包含 三目运算   多个以逗号隔开
<div v-bind:style='[isActive?active:"" ，"error"]'></div>

//组件标签  定义的class  子类都会继承

vue v-if v-else-if v-else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

//在组建判断时 input加 key键可标示 唯一性
<input placeholder="Enter your username" key="username-input">
// v-show 与 v-if 的区别就是 v-show 产生的是 display:none 效果 v-if是直接未生成或未插入 频繁切换使用v-show
<h1 v-show="ok">Hello!</h1>

vue v-for

//可接受 第二个参数 为插入的 索引index
 ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
//可接受三个参数
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>
//还可自动解析循环对象
ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>