一、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: {
// 计算属性的 getter
reversedMessage: 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!'
}
})
代码说明
- 我们在input元素上使用v-model指令,这会把input和data.message联系起来。
- 用户输入什么,data.message 的值就变成什么。
- 然后,渲染的
也会更新并显示新的值,因为它绑定到同一个data.message 属性。
- 如果Vue实例中的代码稍后改变了data.message,那么input元素显示的值也会改变。
- 当我们修改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)
待补充
注意：本篇文章只提供一些简单例子，后续再详细展开。
如有错误，还请多多指教！
转载或者引用本文内容请注明来源及原作者：橘足轻重；