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

阅读更多系列文章请访问个人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>
复制代码