vue.js 2.x 学习笔记（一）

一、介绍

1.1 声明式渲染

所谓 mustache 语法将数据渲染进DOM


  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

1.2 绑定元素 Attribute

使用 v-bind 来绑定元素属性。


  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！

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

1.3 条件与循环 v-if v-for

使用 v-if 判断条件。

在下面这个例子，我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。

此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。


  现在你看到我了

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

使用 v-for 渲染一个列表。


  
    
      {{ todo.text }}

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

1.4 处理用户输入

使用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：


  {{ message }}

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

使用 v-model 指令实现DOM与数据的双向绑定


  {{ message }}

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

1.5 组件化应用构建

在 vue 里，一个 component 本质上就是一个拥有自定义逻辑的 vue 实例。

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '这是个待办项'
})

var app = new Vue(...)

现在你可以用它构建另一个 component 组件：

但是这样会为每个待办项渲染同样的内容，这看起来并不炫酷。我们应传入参数到 component 组件。

修改一下组件的定义，使之能够接受一个参数：

Vue.component('todo-item', {
  props: ['todo'],
  template: '{{ todo.text }}'
})

现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：

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

1.5-1 Vue.Component 与 Web Components的关系

你可能已经注意到 Vue Component非常类似于 Web Components——它是 Web Components 规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is attribute。但是，还是有几个关键差别：

Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生 Web Components 之内。
Vue 组件提供了纯 Web Components 所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然 Vue 内部没有使用 Web Components ，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的 Web Components。