Vue2.5学习笔记（一）基础部分

1.Vue实例

我们通过new操作符创建Vue实例：

var vm = new Vue({
	el:"#app",
	data:{
	}
})

这样创建出来的Vue实例是一个根组件（只有根组件有el属性），其他组件
也都是Vue实例，Vue实例有它的实例属性和方法，均以$字符打头：

vm.$el
vm.$data
vm.$destory()

像以这样的方式创建的组件，也是Vue实例：

        // 全局组件
        Vue.component("TodoItem",{
            props:['content'],
            template:"<li>{{content}}</li>"
        })

		// 局部组件
        var TodoItem = {
            props:['content','index'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit("delete",this.index);
                }
            }
        }

Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

选项对象：
data：data在根组件中是一个对象，在其他组件中必须是一个函数。当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
只有当实例被创建时就已经存在于 data 中的 property 才是响应式的

2.Vue的生命周期钩子

生命周期函数就是Vue实例在某一个时间点会自动执行的函数
（1）声明周期：初始化

        var vm = new Vue({
            el:"#app",
            // 初始化
            beforeCreate:function(){
                console.log("beforeCreate");
            },
            created:function(){
                console.log("created");
            }// 初始化完成
        })

（2）声明周期：初始化完成后，判断实例中是否有el属性。如果有，则判断是否有template属性。
—— 存在template属性，编译模板并注入渲染函数
—— 不存在template属性，将el挂载点的outerHTML作为模板
（3）声明周期：挂载前
在模板与数据结合，即将挂载到页面中之前的一瞬间，触发beforeMount生命周期函数。

        var vm = new Vue({
            el:"#app",
            // 初始化
            beforeCreate:function(){
                console.log("beforeCreate");
            },
            created:function(){
                console.log("created");
            },// 初始化完成
            beforeMount:function(){
                console.log("beforeMount");
            }
        })

（4）页面挂载之后，mounted生命周期函数被触发。

        var vm = new Vue({
            el:"#app",
            // 初始化
            beforeCreate:function(){
                console.log("beforeCreate");
            },
            created:function(){
                console.log("created");
            },// 初始化完成
            beforeMount:function(){
                console.log("beforeMount");
            },
            mounted:function(){
                console.log("mounted");
            }
        })

（5）beforeUpdate
（6）updated
（7）实例销毁之前：beforeDestroy
（8）实例销毁之后：destroyed

3.Vue的模板语法

3.1 插值表达式{{}}

3.2 v-text指令

v-text="name"，name是data中的一个变量，该变量的值被设置为与v-text绑定的DOM元素的文本内容。v-text值也可以为JS表达式

3.3 v-html指令

v-html = "name"，name是data中的一个变量，该变量的值被设置为与v-html绑定的DOM元素的innerHTML。v-html值也可以为JS表达式

3.4 v-on（@）

3.5 v-bind（:）

<div @click="handleDivClick” :class="{activated:isactivated}">Hello,world</div>

activated这个class是否存在取决于isactivated的值是否为true，绑定的数据对象不必内联定义在模板

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    activated:false,
    'text-danger':true
  }
}

也可以在这里绑定一个返回对象的计算属性
也可以在这里绑定一个数组：<div @click="handleDivClick” :class="[activated,text-danger]">Hello,world</div>
（如果是计算属性，不需要在data中出现，否则必须在data中有占位变量）

绑定内联样式：CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<div :style="styleObj">Hello,world</div>

data: {
  styleObject: {
    color:"red",
    fontSize:"13px"
  }
}

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀

3.6 v-if 条件渲染

v-if
v-else-if
v-else
v-if可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

3.7 v-show 隐藏和显示

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3.8 v-for

<li v-for="(item, index) in items">

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

在Vue中操作数组，只有用下面这些方法，才会自动触发数据渲染更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

filter()
concat() 
slice()

对于对象来说，直接往对象内增加属性值，不会触发数据的自动更新，但通过重写整个对象（改变对象的引用）可以实现。还有什么方式可以往对象内添加内容？——使用Vue.set方法

使用实例方法：

set方法也可以用来改变数组

3.8 key

Vue在重新渲染时会尽量去复用页面上存在的DOM。例如：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

4.计算属性、方法与侦听属性

4.1 基础

计算属性定义在Vue实例的computed属性内，它是一个函数

computed:{
	fullName:function(){
		return this.firstName + this.lastName;
	}
}
// firstName和lastName是定义在data属性中的。

计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要fullName还没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。而若使用方法，如下所示，则会在每次访问到属性时重新渲染。

<div id="app>
	{{fullName()}}
</div>

methods:{
	fullName:function(){
		return this.firstName + this.lastName;
	}
}

还有一种方法可以实现上述需求：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function () {
      this.fullName = this.firstName + ' ' + this.lastName
    },
    lastName: function () {
      this.fullName = this.firstName + ' ' + this.lastName
    }
  }
})

4.2 计算属性的getter和setter

计算属性默认只有 getter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}