vue笔记-基础篇（一）

本篇主要介绍Vue的一些基础知识，比如模板语法，计算属性和侦听器。

Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。（我也不懂）

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

文本

数据绑定最常见的形式就是使用双大括号的文本插值：

<span>Message: {{ msg }}</span>

双大括号标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。

原始HTML

双大括号会将数据解释为普通文本（进行了转义），而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令（不进行转义）：

<p>Using mustaches: {{ rawHtml }}</p> 
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<span style="color: red">This should be red.</span> <!-- 这是rawHtml -->

输出分别为：
<span style="color: red">This should be red.</span>
This should be red.（红色字体）

指令

v-text：只能插入文本，会将内容转义成文本

v-html：可以插入HTML语句，不会转义

v-on:click=”函数名” 绑定一个点击事件，v-on:可以简写成@

v-bind:title=”title” 表示title属性绑定了title，可以缩写成： 属性绑定

v-model 双向数据绑定

计算属性和侦听器

计算属性

对于变量，如下例中的message任何复杂逻辑运算，你都应当使用计算属性。避免直接在模板里面运算，造成模板过于臃肿。（MVVM）

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: “Hello”

Computed reversed message: “olleH”

侦听器

Vue 提供了一种方式来观察和响应 Vue 实例上的数据变动：侦听属性（watch）。

new Vue({
        el:"#root",
        data:{
            firstName:'',
            lastName:'',
            count:0
    },
        computed:{/*计算属性*/
            fullName : function(){
                return this.firstName +' '+ this.lastName
    }
        },
        watch:{/*侦听属性*/
            fullName: function () {
                this.count++
            }
        }
    })