Vue教程01：Vue表达式与v-bind指令

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

创建Vue项目

代码参考/lesson01/01. Vue表达式.html

1. 创建一个HTML文件，将Vue.js引入。
2. HTML中需要有一个id为app的标签。
3. 在script标签中实例化一个Vue对象。

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18
  }
})

1. el属性称作根元素或挂载点，Vuejs项目的所有内容都会渲染到这个标签内部。
2. data属性中的值为项目的数据。

这样我们就创建好了一个最基本的Vue项目。

使用Vue表达式向页面中插入值

代码参考/lesson01/01. Vue表达式.html

使用Vue表达式{{}}，就可以将数据插入到页面中的相应位置。

<div id="app">
  <!-- 使用Vue表达式插入值 -->
  姓名：{{name}}<br/>
  年龄：{{age}}
</div>

此时可以尝试在控制台修改数据，如vm.age++，就可以看到页面现实的值跟着改变。

在Vue表达式中，支持书写简单的表达式，如

出生日期：{{new Date().getFullYear() - age}}

对于一些复杂的表达式，可以使用methods实现：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18
  },
  methods: {
    getBirth() {
      return new Date().getFullYear() - this.age
    },
  }
})

再将方法用Vue表达式插入到页面中：

出生日期：{{this.getBirth()}}

v-bind指令（directive）

代码参考/lesson01/02. v-bind指令.html

通过v-bind指令向标签中插入属性。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18
  }
})

HTML：

<div id="app">
  <!-- 通过v-bind指令插入属性，可以简写为:title="age + '岁'" -->
  <span v-bind:title="age + '岁'">{{name}}</span>
</div>

2. class与style属性的特殊写法
   class和style属性的值除了支持字符串，还支持对象、数组形式。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
    age: 18,
    classStr: 'class1 class2 class3',
    classArr: ['class1', 'class2', 'class3'],
    classObj: { // 为false的属性将不会被渲染到标签中
      class1: true,
      class2: true,
      class3: false
    },
    styleStr: 'display: block; height: 20px; background-color: red;',
    styleObj: {
      display: 'block',
      height: '20px',
      backgroundColor: 'blue'
    },
    styleObj2: {
      width: '200px',
      margin: '0 auto'
    }
  }
})

HTML：

<div :class="classStr"></div>
<div :class="classArr"></div>
<div :class="classObj"></div>
<div :style="styleStr"></div>
<div :style="styleObj"></div>
<div :style="[styleObj, styleObj2]"></div>