一、Vue.js是什么?
Vue.js是一套构建用户界面的渐进式框架。
Vue 从根本上采用最小成本、渐进增量的设计。
Vue 的核心库只专注于视图层。
当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。
二、安装
直接引入< script >标签
三、声明式渲染
Vue.js 的核心是:可以采用简洁的模板语法来声明式的将数据渲染为 DOM。
// 文本插值方式渲染
<div id="app">
{{ message }}
</div>
----------
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
类似于渲染一个字符串模板,但是 Vue 在背后做了大量工作。
数据和 DOM 已经被关联在一起,所有的数据和 DOM 都是响应式的。
现在设置 app.message 的值,你将看到示例所渲染的 DOM 元素会相应地更新。
// 绑定DOM元素属性
<div id="app-2">
<span v-bind:title="message">
鼠标悬停此处几秒,
可以看到此处动态绑定的 title!
</span>
</div>
----------
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-bind 属性被称为指令。指令带有前缀 v-,表示是由 Vue 提供的专用属性。
指令会在渲染的 DOM 上产生专门的响应式行为。
该指令的作用就是:“将此元素的 title 属性与 Vue 实例的 message 属性保持关联更新”。
四、条件
控制一个元素的显示
<div id="app-3">
<span v-if="seen">现在你可以看到我</span>
</div>
----------
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
继续在控制台输入 app3.seen = false,你应该会看到 span 消失。
我们不只是可以将数据绑定到文本和属性,也可以将数据绑定到 DOM 结构。
五、循环
v-for 指令,可以使用数组中的数据来展示一个项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
----------
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '创建激动人心的代码' }
]
}
})
输入 app4.todos.push({ text: ‘新的 item’ }),你会看到列表中追加了一个新的 item。
六、处理用户输入
为了让用户和你的应用程序进行交互,我/们可以使用 v-on 指令 来增加事件监听器,触发事件后会调用 Vue 实例中 methods 下定义的方法:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">翻转 message</button>
</div>
----------
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
注意,在 reverseMessage 方法中,我们更新了应用程序的状态,而无需触及 DOM 。
所有的 DOM 操作都由 Vue 来处理,你所编写的代码只需要关注于底层逻辑。
七、双向绑定
v-model指令
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
----------
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
八、由组件组合而成的应用程序
组件系统是一种抽象,可以让我们使用小型、自成体系和通常可复用的组件,把这些组合来构建大型应用程序。
注册组件
在 Vue 中,一个组件本质上是一个被预先定义选项的 Vue 实例,在 Vue 中注册组件很简单:
// 定义一个被命名为 todo-item 的新组件
Vue.component('todo-item', {
// todo-item 组件现在接受一个 "prop",
// 类似于一个自定义属性。
// 此 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
使用组件
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
使用v-bind指令将todo传入每个重复的组件中
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供了 todo 对象,
其中它的内容是动态的。
我们还需要为每个组件提供一个 "key",
这将在之后详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '其他人类食物' }
]
}
})
我们已经将应用程序分为两个更小的单位,子组件通过 props 接口,与父组件之间形成了相当合理的解耦。我们现在可以进一步对 组件进行更复杂的模板配置和逻辑方面的改进,而不会影响到父组件。