一、Vue实例

Vue实例:通过new Vue()创建的Vue实例,它关联一个DOM元素并提供数据和组件的上下文。

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

什么是DOM？

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

二、模板语法

模板语法:在Vue中,我们使用模板来声明式的将数据渲染为DOM,常用的有{{}}插值,v-bind,v-if,v-for等。

<div id="app">{{ message }}<span v-bind:title="message">鼠标悬停显示</span><span v-if="seen">现在你看到我了</span><ol><li v-for="todo in todos">{{ todo.text }}</li></ol> 
</div>

三、计算属性

计算属性:计算属性用来从当前组件的 state 中派生出新的值,可以通过getter和setter实现数据的响应式。它的优点是高效缓存,在数据不变时会立即返回之前的计算结果。

var vm = new Vue({data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})

四、监听器

监听器:通过watch选项,我们可以观察指定的数据源,一旦数据变化,就会执行监听器里所定义的function。它的用途比computed更加广泛,不仅可以转变数据,还可以触发异步操作。

watch: {message: function (newVal, oldVal) { // 这个函数将在 `message` 改变后调用}
}

五、组件

组件:组件是Vue最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码。我们通过Vue.component()创建全局组件,Vue.component()创建局部组件。

// 全局组件定义
Vue.component('my-component', {template: '<div>{{ msg }}</div>',data: function () {return {msg: 'Hello World!'}}
})
// 局部组件定义
var Child = {template: '<div>{{ msg }}</div>',data: function () {return {msg: 'Hello World!'}} 
}
new Vue({// ...components: {'my-component': Child}
})

六、数据双向绑定

数据双向绑定:Vue实现了数据与视图的双向绑定,当我们在js里面改变数据的时候,视图会自动更新,反之亦然。这是Vue相比其他MVVM框架的一大亮点。
在Vue中,数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的。
这里有一个简单的例子:

<div id="app"><input v-model="message"><p>{{message}}</p>
</div>

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

代码说明

1. 我们在input元素上使用v-model指令,这会把input和data.message联系起来。
2. 用户输入什么,data.message 的值就变成什么。
3. 然后,渲染的

   也会更新并显示新的值,因为它绑定到同一个data.message 属性。

4. 如果Vue实例中的代码稍后改变了data.message,那么input元素显示的值也会改变。
5. 当我们修改Vue实例中的数据时,DOM会更新。这是数据影响视图。
   当我们修改DOM时(比如输入),数据也会更新。这是视图影响数据。

七、生命周期钩子

生命周期钩子:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、挂载实例到 DOM、渲染数据等。在这个过程中,Vue会运行一些叫做生命周期钩子的函数,允许开发者添加自己的代码。

八、Slots（待补充）

Slots:通过Slot分发内容,我们可以在父组件中通过插槽向子组件传递内容。子组件可以设置默认内容,也可以设置具名插槽让父组件的内容分配到指定位置。

<navigation-link url="/profile"><!-- Add slot content here --><span class="profile">Your Profile</span> 
</navigation-link><script>
Vue.component('navigation-link', {props: ['url'],template: `<a :href="url" class="nav-link"><slot></slot></a>`
})
</script>

slots有一些典型用例:

• 基础组件(Base Layout)
• 插槽替换(Slot replacement)
• 局部内容(Scoped slots)
  待补充

注意：本篇文章只提供一些简单例子，后续再详细展开。

如有错误，还请多多指教！
转载或者引用本文内容请注明来源及原作者：橘足轻重；