zoukankan      html  css  js  c++  java
  • 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标签的内容也会同步更新

  • 相关阅读:
    CSS使用position:sticky 实现粘性布局
    【笔记】原生JS实现验证框架 checkFun
    jQuery与vue分别实现超级简单的绿色拖动验证码功能
    vue从入门到进阶:Vuex状态管理(十)
    vue从入门到进阶:vue-router路由功能(九)
    vue从入门到进阶:渲染函数 & JSX(八)
    vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
    vue从入门到进阶:组件Component详解(六)
    vue从入门到进阶:过滤器filters(五)
    vue从入门到进阶:Class 与 Style 绑定(四)
  • 原文地址:https://www.cnblogs.com/umgsai/p/7061320.html
Copyright © 2011-2022 走看看