Day 2

因为我需要接手一个vue项目，所以学习的主要目标是能够快速使用vue输出页面。

这几天大致过了一遍官方文档，体验还不错。

下面是一些重要概念，复习时可以以此为纲要，按需查询官方文档

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. 指令可以控制dom的渲染，可以类比到jstl中的 c:if、c:forche 等

<p v-if="seen">现在你看到我了</p>

2. 指令可以将变量绑定到dom特性（属性）

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

3. 指令可以绑定事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

完整指令列表：

插值

·文本

<span>{{text}}</span>
我们不再需要获取span节点然后写innerTEXT，Mustache标签会把text的值填上去。而且后续text值发生了改变，插值处的内容也会更新。如果不希望text后续的变化反应到dom，可以使用 v-once 指令
<span v-once>这个将不会改变，这会影响到该节点上的其它数据绑定: {{ msg }}</span>
双大括号会将数据解释为普通文本，而非 HTML 代码。
<p><p>Using mustaches: {{ rawHtml }}</p></p>
rawHtml = '<p>Hello vue</p>'
输出
<p>Using mustaches: <p>Hello vue</p></p>
想要输出真正的html需要使用下面的指令

·原始HTML

v-html
<p><p>Using mustaches: {{ rawHtml }}</p></p>
rawHtml = '<p>Hello vue</p>'
输出
<p>Using mustaches: Hello vue</p>

注意

Mustache 语法不能作用在 HTML 特性上(节点属性：id、class、style等)，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

计算属性

我们可以声明了一个计算属性 ，提供的函数将用作属性该的 getter 函数：

computed: {
  // 计算属性的 getter
  reversedMessage: function () {
    //Vue 知道 vm.reversedMessage 依赖于 vm.message;因此当 vm.message 发生改变时，所有依赖 
    //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
    //这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，
    //而不必再次执行函数。
    vm.reversedMessage 的绑定也会更新
      return this.message.split('').reverse().join('')
    }
  }
}
// 使用
<p>Reversed message: "{{ reversedMessage() }}"</p>

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

computed: {
  fullName: {
    // 计算属性的 getter
    get: function () {
      
    },
    // 计算属性的setter会在fullName变动时更新函数内的依赖自己的变量
    set: function (newValue) {

    }
  }
}

侦听属性

 watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      
    }
  }

数据与方法

上面一直说的变量、方法是在创建Vue实例时传入的

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var vm = new Vue({
  data: {fullName: '', text: ''},
  methods: {alert: function(){alert(666)}}
})