您的位置：首页 > 产品设计 > UI/UE

Vue.js学习笔记-入门

2017-06-21 19:10 1111 查看

背景
这几周做了一个项目，前端都是使用的jQuery，涉及到大量的DOM操作。做完之后对其中操作的繁琐简直无力吐槽，于是来研究一下当前流行的前端框架angular和vue。angular和vue相比jQuery最直观的感受就是解决了数据模型与页面视图的双向数据绑定问题。jQuery每次更新了数据之后都需要手动更新页面视图，简直不能更闹心。而angular和vue只需要关注数据模型，只要数据模型改变页面视图就会自动刷新，不需要人工干预，解决了本次项目中最大的痛点。写了几个入门例子之后发现vue相比angular更容易入门，于是选中vue作为本次技术栈的扩展点。

本系列笔记基于vue官方教程写作，详细参考 https://cn.vuejs.org/v2/guide/installation.html

Vue简介
Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。Github主页：https://github.com/vuejs/vue

创建一个本地的 .html 文件，然后引入 Vue。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

浏览器渲染结果如图

此时可在浏览器console中执行以下命令

app.message = "Hello world!"

数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。执行后浏览器会重新渲染页面，如下图

除了以上文本插值，还可以用如下方法绑定DOM元素属性

<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
});
</script>

鼠标停留时会显示绑定的message信息

条件与循环

<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
</script>

执行后会在页面显示p元素里的内容，此时在控制台执行以下代码

app3.seen = false;

执行完之后p元素就消失了。

v-for指令可以绑定数组的数据来渲染一个项目列表

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});
</script>

页面渲染如下

此时可以在控制台对todos进行操作

app4.todos.push({text: '新项目'});
app4.todos.pop();

可以看到页面会同步进行刷新显示最新结果。

处理用户输入
可以用v-on指令绑定一个事件监听器来处理用户的输入

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: '12345'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
</script>

点击button之后就会执行reverseMessage方法。

Vue提供了v-model指令实现表单输入和应用状态之间的双向绑定

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message" name="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello world'
}
});
</script>

在文本框中输入时p标签的内容也会同步更新

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航