Vuejs学习笔记(二)

注意：在编写代码中今天使用了 v-model=’’的形式，发现这个 model 后面绑定的值跟需要展示的大括号中的变量名一致即可，且这个 modle 一般是根据输入而对大括号中的值进行改变，因此它一般用到 input 上。

数据绑定语法

文本

数据绑定采用“mustach”语法(双大括号)，例如：<span>data:</span>，这里数据对象 msg 的值变化时会更新标签中的显示值。
如果只需要首次插值，在后续更新不需要进行数据更改，即可在数据对象 msg 前面加一个星号；

原始 HTML 的输出

在使用 mustache 语法进行输出时会直接输出数据文本值而不是 HTML，如果需要输出真正的 HTML 字符串，即直接用三对大括号即可；但是这种方法在使用时能够随意的修改页面的结构，很容易导致 XSS 攻击，所以使用时一定要注意。

HTML 特性

vuejs 的 mustache 标签也可以用到 HTML 的特性内，意思是可以使用在元素的比如定义 id 号上；注意，此用法不能在 Vuejs 的指令和特殊特性内使用。

绑定表达式

放在 mustache 语法内的文本称为绑定表达式，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器组成。JavaScript 表达式只能用单个表达式的格式进行绑定。不能使用 if 和 var a=1 等流程控制和语句。过滤器是添加到表达式后面的“管道”，还可以开发自己的过滤器、过滤器串联和给过滤器添加参数（添加参数时，表达式始终作为过滤器的第一个参数，后面的参数依次作为第二个，第三个等）。

缩写

v- 前缀是 vue 的一种标识，但常用的 v-bind 和 v-on 可以缩写，其缩写如下：

1 2	<a v-bind:href="url"></a> 缩写后：<a :href="url"></a> <a v-on:click="show"></a> 缩写后：<a @click="show"></a>

计算属性

Vue.js 将绑定表达式限制为一个表达式，如果有多个表达式的逻辑，这样就需要使用计算属性来解决。如下写法即可：

<div id="demo">{{ fullname }}</div>;

var vm = new Vue({
  el: "#demo",
  data: {
    firstname: "foo",
    lastname: "bar"
  },
  computed: {
    fullname: function() {
      return this.fistname + " " + this.lastname;
    }
  }
});

计算属性默认是 getter,不过在需要时也可以自己提供一个 setter：

以 6 中的 div 作为输出

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]
          }
     }
}