vue的常用的属性和方法及生命钩子

一、数据类型：
1.data :Vue 实例的数据对象
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
 data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
 data: function () {
   return { a: 1 }
 }
})
//注：data不能用使用箭头函数，此处this指向不明（undertion）




2.computed :使属性复用
var vm = new Vue({
 data: { a: 1 },
 computed: {
   // 仅读取
   aDouble: function () {
     return this.a * 2
   },
   // 读取和设置
   aPlus: {
     get: function () {
       return this.a + 1
     },
     set: function (v) {
       this.a = v - 1
     }
   }
 }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4
3.methods 将被混入到 Vue 实例中。
可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。
var vm = new Vue({
 data: { a: 1 },
 methods: {
   plus: function () {
     this.a++
   }
 }
})
vm.plus()
vm.a // 2




4.watch:Vue 实例将会在实例化时调用 $watch()，
遍历 watch 对象的每一个属性。
var vm = new Vue({
 data: {
   a: 1,
   b: 2,
   c: 3
 },
 watch: {
   a: function (val, oldVal) {
     console.log('new: %s, old: %s', val, oldVal)
   },
   // 方法名
   b: 'someMethod',
   // 深度 watcher
   c: {
     handler: function (val, oldVal) { /* ... */ },
     deep: true
   }
 }
})
vm.a = 2 // => new: 2, old: 1
二、操作dom
1.el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
可以是 CSS 选择器，也可以是一个 HTMLElement 实例。


2.template 模板 一个字符串模板作为 Vue 实例的标识使用。
模板将会 替换 挂载的元素


3.render 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。
该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。




三、指令 以V-开始
内置指令：
1.V-model:用来标记在表单元素上面（input）随表单控件类型不同而不同


2.V-text 更新绑定textContent


3.V-html 用来绑定html代码


4. V-cloak 这个指令保持在元素上直到关联实例结束编译。
和 CSS 规则如 [v-cloak] { display: none } 一起用时，
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。


5.V-for  基于源数据多次渲染元素或模板块。
此指令之值，必须使用特定语法 alias in expression ，
为当前遍历的元素提供别名：
<div v-for="item in items">
  {{ item.text }}
</div>


另外也可以为数组索引指定别名 (或者用于对象的键)：


<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>




key的用法：


<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>


6.V-on  事件监听
基本写法：两种
v-on:click="show()"
@click="show()"


<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>




7.V-bind 动态地绑定一个或多个特性


两种写法
<a v-bind:title="title">这是第一页</a>
<a :title="title">这是第一页</a>


eg:
<!-- class 绑定 -->
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>


自定义指令：
栗子：
html代码：
<div id="app">
   <div v-bg="'red'">asdfasdfasdfasd</div>
   <div v-bg="'green'">asdfasdfasdfasd</div>
   <div v-ibg="blue">asdfasdfasdfasd</div>
</div>
vue代码：
(function () {
        //全局的方式创建自定义指令
        Vue.directive("bg",function(el,binding){
             el.style.backgroundColor=binding.value;
        })
        var vm = new Vue({
            el:"#app",
            data:{
                blue:"blue"
            },
            //局部定义指令
            directives:{//directives 复数
                "ibg":function(el,binding){
                    el.style.backgroundColor=binding.value;
                }
            }
        });
    })()


四、生命钩子：
1.beforeCreate(实例化开始)
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2.created(实例化结束)


在实例创建完成后被立即调用，挂载阶段还没开始，$el 属性目前不可见。


3.beforeMount(开始挂载)
在挂载开始之前被调用：相关的 render 函数首次被调用。


该钩子在服务器端渲染期间不被调用。


4.mounted(挂载结束)


el 被新创建的 vm.$el 替换，
并挂载到实例上去之后调用该钩子
如果 root 实例挂载了一个文档内元素，
当 mounted 被调用时 vm.$el 也在文档内。


5.beforeUpdate(更新页面)
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。




6.updated(页面更新后)
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7.beforeDestroy(销毁前)
实例销毁之前调用。在这一步，实例仍然完全可用。




8.Destroy(销毁后)


Vue 实例销毁后调用