Vue.js 基础指南

引用

vue.js脚本地址如下：

---

基础

• 数据与方法
  当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
  当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你后添加一个新的属性，那么对这个属性的改动将不会触发任何视图的更新。

• 申明式渲染

  {{ ... }}

  {{ message }}
                  ↓ ↓ ↓
  
  
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'    //在data内定义变量
    }     ↓ ↓ ↓
  });     return { 
              message: 'Hello Vue!'
          }
  

  不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用==return包裹后数据中变量只在当前组件中生效==，不会影响其他组件。

• 指令

  v-bind: [--缩写--]--> :

  v-bind:title="message"
  

• 条件(用于控制切换一个元素是否显示)

  v-if="..."
  v-else-if
  v-else
  /* 必须紧跟在带 v-if 元素之后 */

  切换多个元素： 将