Vue.js学习笔记-入门

背景

这几周做了一个项目，前端都是使用的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标签的内容也会同步更新

posted @ 2017-06-21 19:10  商商-77  阅读(320)  评论(0)  编辑  收藏  举报