接着前面的内容：https://www.cnblogs.com/yanggb/p/12555836.html。

声明式渲染

vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

<html>

    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            {{ message }}

        </div>

        <script>

            var app = new Vue({

                el: '#app',

                data: {

                    message: 'hello, yanggb.'

                }

            })

        </script>

    </body>

</html>

在上面的这段代码中就创建了一个最简单的vue应用，数据和DOM被建立了关联，所有的东西都是响应式的。这个时候如果通过控制台去改变message的值的话，页面中的内容也会相应地发生改变。

上面的两个中括号是文本插值的语法，这是数据绑定到页面的一种方式，此外vue还提供了绑定元素attribute的双向绑定方式。

<html>

    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app-2">

            <span v-bind:title="message">put your mouse here!</span>

        </div>

        <script>

            var app2 = new Vue({

                el: '#app-2',

                data: {

                    message: 'i like yanggb forever.'

                }

            })

        </script>

    </body>

</html>

这里的【v-bind:attribute】被称为【指令】。指令带有前缀【v-】，表示它们是vue提供的特殊attribute。指令的作用是在渲染的DOM上应用特殊的响应式行为，在这里，这个指令的意思是：将这个元素节点的title属性与vue实例中的message属性进行绑定，使它们保持一致。我们依然可以通过控制台来验证这一点。

这个时候，鼠标悬停的提示文本就从【i like yanggb forever】变成了【i do like yanggb】了。

条件与循环

控制切换一个元素是否显示，可以通过【v-if】指令来实现。

<html>

    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app-3">

            <p v-if="seen">you can see me now</p>

        </div>

        <script>

            var app3 = new Vue({

                el: '#app-3',

                data: {

                    seen: true

                }

            })

        </script>

    </body>

</html>

我们可以通过改变seen属性的值，达到控制dom元素是否显示的目的，比如在上面如果将seen属性设置为false的话，在页面上就不会看到东西了。这也就意味着，我们使用vue的话，不仅可以把数据绑定到dom文本或者属性attribute，还可以绑定到dom结构。此外，vue还提供了一个强大的过度效果系统，可以在vue插入/更新/移除元素的时候自动应用过渡效果，注意是自动哦。

vue还提供了【v-for】指令用于绑定数组或对象，通过循环数组中的元素或对象中的属性来达到动态生成dom元素的目的。

<html>

    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <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: 'i like you' },

                        { text: 'i do like you' },

                        { text: 'i really like you' }

                    ]

                }

            })

        </script>

    </body>

</html>

页面中的展示效果：

这个时候，如果在控制台中，给该数组添加一个元素，页面上的列表就会渲染多一个新项目。

处理用户输入

为了让用户和你的应用进行交互，vue提供了【v-on】指令用于添加一个事件监听器，通过它来调用在vue实例中定义的方法。

<html>

    <head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app-5">

            <p>{{ message }}</p>

            <button v-on:click="reverseMessage">reverse message</button>

        </div>

        <script>

            var app5 = new Vue({

                el: '#app-5',

                data: {

                    message: 'Hello Vue.js!'

                },

                methods: {

                    reverseMessage: function () {

                        this.message = this.message.split('').reverse().join('')

                    }

                }

            })

        </script>

    </body>

</html>

点击按钮之后，就会达到反转message字符串的效果。

特别注意的是，在reverseMessage方法中，只更新了应用的状态（值），而没有操作dom，但是dom却跟着同步发生了改变。这是使用vue的一个重大意义——开发者不需要触碰dom，所有的dom操作都由vue来完成，开发者只需要关注数据变化的逻辑即可。和以前的开发不同，需要完成从操作dom到操作数据的思维转换。

组件化应用构建

组件系统是vue的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件来构建大型应用。其实仔细想想，几乎任何类型的应用界面，都可以被抽象成一个组件树。

在vue里，一个组件的本质就是一个拥有预定义选项的一个vue实例。

// 定义名为todo-item的新组件

Vue.component('todo-item', {

  template: '<li>这是个待办项</li>'

})

var app = new Vue(...)

定义了组件之后，就可以使用这个组件了。

<ol>

  <!-- 创建一个todo-item组件的实例 -->

  <todo-item></todo-item>

</ol>

此外，我们还可以通过一些特定的方式从父作用域中传递一些特定的数据到子组件中，子组件就可以通过这些数据完成不同的功能，这一点在后面详细说。

组件化的一个重要的特点，就是每个组件实例拥有自己的私有作用域，这一点是组件化的精华所在，意味着我们在组件做的操作是相对独立的，子组件中做的操作不会影响到父组件（实际上是可以的，但是要通过特定的方式，这个后面详细说，组件通信是一个重要的知识点）。

vue组件与自定义元素的关系

vue组件非常类似于自定义元素（web组件规范的一部分），这是因为vue的组件语法部分参考了这个规范，比如vue组件实现了slot api和is attribute。但是还是有几点关键差别的。

  1. Web Components规范已经完成并通过，但未被所有浏览器原生实现。目前Safari 10.1+、Chrome 54+和Firefox 63+原生支持Web Components。相比之下，Vue组件不需要任何polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue组件也可以包装于原生自定义元素之内。

  2. Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然vue的内部没有使用自定义元素，不过在应用中使用自定义元素或者以自定义元素的形式发布的时候，依然会有很好的互操作性。于此同时，vue cli也支持将vue组件构建为原生的自定义元素。

至此，vue的初步了解（官方文档的介绍章节）就结束了。

"我还是很喜欢你，像雨洒落在热带与极地，不远万里。"

vue2.x学习笔记（二）的更多相关文章

  1. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  4. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  5. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  6. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  7. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  8. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  9. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  10. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

随机推荐

  1. Python第四章-流程控制

    流程控制 在以前的代码中,所有的代码都是交由 Python 忠实地从头执行到结束.但是这些远远不够.很多时候需要根据不同的情况执行不同的代码. 如果你想改变这一工作流程,应该怎么做? 就像这样的情况: ...

  2. Android对话框(Dialog)

    Android对话框 前几天出差没有进行更新,今天写一下安卓中用的比较多的对话框——AlertDialog. dialog就是一个在屏幕上弹出一个可以让用户做出一个选择,或者输入额外的信息的对话框,一 ...

  3. 一文看懂NLP神经网络发展历史中最重要的8个里程碑！

    导读:这篇文章中作者尝试将 15 年的自然语言处理技术发展史浓缩为 8 个高度相关的里程碑事件,不过它有些偏向于选择与当前比较流行的神经网络技术相关的方向.我们需要关注的是,本文中介绍的许多神经网络模 ...

  4. Math对象常用方法介绍

     <script>         /* 001-Math.abs()  绝对值 */         console.log(Math.abs(123), Math.abs(-998), ...

  5. setAttribute 方法

    IE8及以下不支持 setAttribute用来修改dom标签上的属性比如(onclick); getAttribute用来获取dom标签上的属性

  6. 基于STM32F030F4P9和STM32 CUBEMX 输出PWM波形

    STM32F030F4P9定时器功能比较丰富,在此记录项目中使用其自动输出PWM波形(频率:50HZ).CubeMX配置定时器如下图说明. 在此定时器基础时钟为48MHZ,配置中不做分频处理,预分频系 ...

  7. 分享一款一直在维护的【网络开发运维|通用调试工具】: http请求, websocket,cmd, RSA,DES, 参数签名工具，脚本批量生成工具，google动态口令，端口检测，组件注册,js混淆...

    首先发下下载地址:https://files.cnblogs.com/files/taohuadaozhu/ConfigLab.Test.ex.rar 日常开发,运维,跨部门跨公司对接中.  想快速调 ...

  8. vue中的生命周期事件和钩子函数

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期.通俗的将就是vue实例从创建到销毁的 ...

  9. J. Justifying the Conjecture（规律——整数拆分）

    题目链接 五校友谊赛终于开始了,话不多说A题吧. 从前从前有一个正整数n,你需要找到一个素数x和一个合数y使x+y=n成立,这样就可以双剑合并了. 素数是一个大于1的自然数,它的因数只有1与它自己本身 ...

  10. apache-atlas 深度剖析

    atlas  是apache下的大数据的元数据管理平台,支持对hive.storm.kafka.hbase.sqoop等进行元数据管理以及以图库的形式展示数据的血缘关系. 一.架构 整体架构实现如下图 ...