2019-02-12 17 vuejs基础语法

17.1 基础语法

• 声明式渲染

  // HTML
  <div id="app-2">
    // v-bind将title特性和vue实例的message属性保持一致
    <span v-bind:title="message">
    </span>
  </div>

  // JS
  var app = new Vue({
    el:'#app-2',
    data: {
      message:'页面加载于' + new Date().toLocaleString();
    }
  })

• 条件循环

  // HTML
  <div id="app-3">
    <p v-if="seen">现在你看到我了</p>
  </div>

  // JS
  var app = new Vuew({
    el:'#app-3',
    data: {
      seen: true
    }
  })

  // 循环
  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        
      </li>
    </ol>
  </div>

  var app4 = new Vue({
    el:'#app-4',
    data: {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  });

• 组件化应用构建(组件的本质是拥有定义选项的Vue示例)

<div id="app-7">
  <ol>
    <todo-item
    v-for="item in groceryList"
    v-bind:todo="item"
    v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  // todo-item组件现接受一个
  // "prop", 类似自定义特性。
  props: ['todo'],
  template: '<li></li>'
});

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
});

• 数据和方法

  // 当vue被实例化, data对象所有属性加入到Vue的响应式系统, 当属性值发生变化, 视图将产生响应
  var data = {a: 1};
  var vm = new Vue({
    data: data
  });

  vm.a == data.a; // => true

  // 只有实例创建vue时存在的属性才是响应式的, 新增属性, 不会触发视图更新
  vm.b = 'add new one';

• 生命周期图(引用vue官方文档)

• 模板语法
  • 文本

    // 数据绑定最常见是Mustache语法(双大括号)
    <span>Message: </span>
  

  • 原始HTML
    • 双大括号会解析成文件, 需要使用v-html

      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    

  • 特性, 数据绑定到HTML特性上, 使用v-bind

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

  • 参数, 指令可以接受参数, 以冒号表示

    // :href告知v-bind指令将该元素的href特性与表达式url的值绑定
    <a v-bind:href="url">...</a>
  

• 计算属性和侦听器

    // 计算属性, 解决模板(HTML)逻辑太多难维护
    // 计算属性, 基于响应式缓存, 数据不变则不重新渲染
    <div id="example">
      <p>Original message: ""</p>
      <p>Computed reversed message: ""</p>
    </div>
  
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
  

  • 侦听器, watch属性, 当需要在数据变化时执行异步或开销较大的操作时, 这个方式最有用
• Class与Style绑定
  • 绑定HTML Class

    // 还可以动态切换多个class
    //v-bind:class="{ active: isActive, 'text-danger': hasError }"
    <div v-bind:class="classObject"></div>
  
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
  

  • 绑定内联样式

    <div v-bind:style="styleObject"></div>
  
    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
  

• 条件渲染
  • v-if

    <div v-if="type === 'A'">
      A
    </div>
    <div> v-else-if="type='B'">
      B
    </div>
    <div v-else>
      Not A/B
    </div>
  

  • v-show

    // 根据条件展示的选项, v-show元素始终保留在DOM并渲染, 实现只是切换CSS的display
    <h1 v-show="ok">Hello!</h1>
  

• 列表渲染

    <ul id="example-2">
      <li v-for="(item, index) in items">
         -  - 
      </li>
    </ul>
  
    var example2 = new Vue({
      el: '#example-2',
      data: {
        parentMessage: 'Parent',
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
  

  • 数组更新检测
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
    • example1.items.push({message: 'Baz'}), 通过Vue方法更新数组
  • 替换数组
    • filter()
    • concat()
    • slice()
• 事件处理
  • v-on

    <button v-on:click="warn('warn', $event)">
      Submit
    </button>
  
    ...
    methods: {
      warn: function (message, event) {
        ...
      }
    }
  

• 表单输入绑定
  • v-model在<input>, <textarea>, <select>元素上创建双向绑定

17.2 深入组件

• 组件注册
  • 全局注册

    Vue.component('xxx', {})
  

  • 局部注册

    var ComponentA = {}
  
    new Vue({
      el: '#app',
      components: {
        'component-a': ComponentA
      }
    });
  

• 自定义事件
• 插槽
• 动态组件 & 异步组件
• 处理边界情况

17.3 参考文档

• Vue.js