1. Vue 概述
2. Vue 基本使用
- 2.1 Vue安装
- - 2.1.1 直接用 script 标签引入
  - 2.1.2 NPM
  - 2.1.3 其它安装方式（略...）
- 2.2 与传统开发模式对比
- 2.3 Vue.js 之 HelloWorld 细节分析
- - 2.3.1 Vue实例参数
  - 2.3.2 插值表达式的用法
  - 2.3.3 Vue代码运行原理
3. Vue模板语法
- 3.1 模板语法概述
- - 3.1.1 理解前端渲染
  - 3.1.2 前端渲染方式
  - 3.1.3 **Vue模板语法概览**
- 3.2 指令
- - 3.2.1 什么是指令
  - 3.2.2 v-cloak指令用法
  - 3.2.3 数据绑定指令
  - 3.2.4 数据响应式
- 3.3 双向数据绑定指令
- - 3.3.1 什么是双向数据绑定
  - 3.3.2 v-model 指令用法
  - 3.3.3 MVVM设计思想
- 3.4 事件绑定
- - 3.4.1 Vue如何处理事件？

1. Vue 概述

　　尤雨溪：Vue.js 的创建者

2014 年 2 月， Vue.js 正式发布
　2015 年 10 月 27 日，正式发布 1.0.0
　2016 年 4 月 27 日，发布 2.0 的预览版本

Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架；
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

使用 Vue 将 helloworld 渲染到页面上：

Vue：渐进式 JavaScript 框架

声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue；
灵活：在一个库和一套完整框架之间自如伸缩；
高效： 20kB 运行大小，超快虚拟 DOM。

2. Vue 基本使用

2.1 Vue安装

2.1.1 直接用 script 标签引入

开发环境 版本（包含了有帮助的命令行警告）

// 制作原型或学习，可以使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境 版本（优化了尺寸和速度）
```
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```
对于 生产环境，推荐链接到明确的版本号 (避免新版本造成不可预期的破坏）：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
```

2.1.2 NPM

构建大型应用时推荐使用 NPM 安装：

#最新稳定版
$ npm install vue

2.1.3 其它安装方式（略…）

更多 >> 访问官方文档：https://cn.vuejs.org/v2/guide/installation.html

2.2 与传统开发模式对比

原生JavaScript

<div id="msg"></div>
<script type="text/javascript">var msg = 'Hello World'var div = document.getElementById('msg')div.innerHTML= msg
</script>

jQuery

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">var msg = 'Hello World';$('#msg').html(msg);
</script>

Vue

<div id="app"><div>{{ msg }}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({el: '#app',data: {msg: 'HelloWorld'}
})
</script>

2.3 Vue.js 之 HelloWorld 细节分析

2.3.1 Vue实例参数

el ：元素的挂载位置（值可以是 CSS 选择器或 DOM 元素）；

data ：模型数据（值是一个对象）

示例1：

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

2.3.2 插值表达式的用法

将数据填充到 HTML 标签中；

示例2：

<div id="app">{{ message }}
</div><!--输出 Hello Vue! -->

插值表达式支持基本的计算操作

2.3.3 Vue代码运行原理

概述编译过程的概念（ Vue 语法 → 原生语法）

#mermaid-svg-lVgIvi9fv8B2oSJ9 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .label text{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .node rect,#mermaid-svg-lVgIvi9fv8B2oSJ9 .node circle,#mermaid-svg-lVgIvi9fv8B2oSJ9 .node ellipse,#mermaid-svg-lVgIvi9fv8B2oSJ9 .node polygon,#mermaid-svg-lVgIvi9fv8B2oSJ9 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .node .label{text-align:center;fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .node.clickable{cursor:pointer}#mermaid-svg-lVgIvi9fv8B2oSJ9 .arrowheadPath{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edgeLabel rect{opacity:0.9}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edgeLabel span{color:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .cluster text{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-lVgIvi9fv8B2oSJ9 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-lVgIvi9fv8B2oSJ9 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .actor-line{stroke:grey}#mermaid-svg-lVgIvi9fv8B2oSJ9 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .sequenceNumber{fill:#fff}#mermaid-svg-lVgIvi9fv8B2oSJ9 #sequencenumber{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .messageText{fill:#333;stroke:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-lVgIvi9fv8B2oSJ9 .labelText,#mermaid-svg-lVgIvi9fv8B2oSJ9 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .loopText,#mermaid-svg-lVgIvi9fv8B2oSJ9 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-lVgIvi9fv8B2oSJ9 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-lVgIvi9fv8B2oSJ9 .noteText,#mermaid-svg-lVgIvi9fv8B2oSJ9 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-lVgIvi9fv8B2oSJ9 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-lVgIvi9fv8B2oSJ9 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-lVgIvi9fv8B2oSJ9 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .section{stroke:none;opacity:0.2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .section2{fill:#fff400}#mermaid-svg-lVgIvi9fv8B2oSJ9 .section1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .section3{fill:#fff;opacity:0.2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .sectionTitle0{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .sectionTitle1{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .sectionTitle2{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .sectionTitle3{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-lVgIvi9fv8B2oSJ9 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .grid path{stroke-width:0}#mermaid-svg-lVgIvi9fv8B2oSJ9 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .task{stroke-width:2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText:not([font-size]){font-size:11px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .task.clickable{cursor:pointer}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskText3{fill:#fff}#mermaid-svg-lVgIvi9fv8B2oSJ9 .task0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .task1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .task2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutside0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutside2{fill:#000}#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutside1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .taskTextOutside3{fill:#000}#mermaid-svg-lVgIvi9fv8B2oSJ9 .active0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .active1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .active2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeText0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeText1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeText2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeText3{fill:#000 !important}#mermaid-svg-lVgIvi9fv8B2oSJ9 .done0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .done1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .done2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneText0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneText1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneText2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneText3{fill:#000 !important}#mermaid-svg-lVgIvi9fv8B2oSJ9 .crit0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .crit1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .crit2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCrit0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCrit1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCrit2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCrit0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCrit1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCrit2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-lVgIvi9fv8B2oSJ9 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .milestoneText{font-style:italic}#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCritText0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCritText1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCritText2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .doneCritText3{fill:#000 !important}#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCritText0,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCritText1,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCritText2,#mermaid-svg-lVgIvi9fv8B2oSJ9 .activeCritText3{fill:#000 !important}#mermaid-svg-lVgIvi9fv8B2oSJ9 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.classGroup text .title{font-weight:bolder}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.clickable{cursor:pointer}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-lVgIvi9fv8B2oSJ9 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .dashed-line{stroke-dasharray:3}#mermaid-svg-lVgIvi9fv8B2oSJ9 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 .commit-id,#mermaid-svg-lVgIvi9fv8B2oSJ9 .commit-msg,#mermaid-svg-lVgIvi9fv8B2oSJ9 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-lVgIvi9fv8B2oSJ9 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-lVgIvi9fv8B2oSJ9 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-lVgIvi9fv8B2oSJ9 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-lVgIvi9fv8B2oSJ9 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edgeLabel text{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-lVgIvi9fv8B2oSJ9 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-lVgIvi9fv8B2oSJ9 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-lVgIvi9fv8B2oSJ9 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-lVgIvi9fv8B2oSJ9 .note-edge{stroke-dasharray:5}#mermaid-svg-lVgIvi9fv8B2oSJ9 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-lVgIvi9fv8B2oSJ9 .error-icon{fill:#522}#mermaid-svg-lVgIvi9fv8B2oSJ9 .error-text{fill:#522;stroke:#522}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-lVgIvi9fv8B2oSJ9 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-lVgIvi9fv8B2oSJ9 .marker{fill:#333}#mermaid-svg-lVgIvi9fv8B2oSJ9 .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-lVgIvi9fv8B2oSJ9 {color: rgba(0, 0, 0, 0.75);font: ;}

Vue 代码

Vue框架

原生JavaScript

3. Vue模板语法

3.1 模板语法概述

3.1.1 理解前端渲染

3.1.2 前端渲染方式

原生 js 拼接字符串；
使用前端模板引擎；
使用 vue 特有的模板语法。

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到 HTML 标签中，前端代码风格大体如下示。

var d = data.weather;
var info = document.getElementById('info');
info.innerHTML = '';
for(var i=0;i<d.length;i++){var date = d[i].date;var day = d[i].info.day;var night = d[i].info.night;var tag = '';tag += '<span>日期：'+date+'</sapn><ul>'tag += '<li>白天天气：'+day[1]+'</li>'tag += '<li>白天温度：'+day[2]+'</li>'tag += '<li>白天风向：'+day[3]+'</li>'tag += '<li>白天风速：'+day[4]+'</li>'tag += '</ul>';var div = document.createElement('div');div.innerHTML = tag;info.appendChild(div);
}

缺点：不同开发人员的代码风格差别很大，随着业
务的复杂，后期的维护变得逐渐困难起来。

使用前端模板引擎

以下是基于模板引擎 art-template 的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。
```
<script id="abc" type="text/html">{{if isAdmin}}<h1>{{title}}</h1><ul>{{each list as value i}}<li> 索引 {{i + 1}}:{{value}}</li>{{/each}}</ul>{{/if}}
</script>
```
优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

缺点：没有专门提供事件机制。

3.1.3 Vue模板语法概览

差值表达式；
指令；
事件绑定；
属性绑定；
样式绑定；
分支循环结构。

3.2 指令

3.2.1 什么是指令

指令的本质就是 自定义属性。

Vue 中指令都是以 v- 开头（比如：v-cloak）

官网：https://cn.vuejs.org/v2/api/#指令

3.2.2 v-cloak指令用法

v-cloak：防止页面加载时出现闪烁

1）插值表达式存在的问题：“闪动”；
2）如何解决该问题：使用 v cloak 指令；
3）解决该问题的原理：先隐藏，替换好值之后再显示最终的值。

示例如下：

<style type="text/css">/*1、通过属性选择器 选择带有属性 v-cloak的标签，使其隐藏*/[v-cloak]{display: none; /* 元素隐藏 */}
</style><body><div id="app"><!-- 2、 让带有插值语法的元素添加 v-cloak 属性，在数据渲染完场之后，v-cloak 属性会被自动去除，v-cloak 一旦移除也就是没有这个属性了，属性选择器就选择不到该标签对应的标签变为可见    --><div v-cloak> {{msg}} </div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',  // 指定挂载位置：元素id 为 app 的元素data: {      // data 里存储的模型数据msg: 'Hello Vue'}});</script>
</body>
</html>

3.2.3 数据绑定指令

v-text 填充纯文本 ；

用于将数据填充到标签中，作用与插值表达式类似，但没有闪动问题。相比插值表达式更加简洁。

如果数据中有HTML标签会将html标签一并输出。

注：此为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
```
<div id="app"><p v-text="msg"></p><p>{{msg}}</p>
</div>
<script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});
</script>
```

v-html填充 HTML 片段；

用法和v-text相似，但是它可以将 HTML 片段填充到标签中。

① 存在安全问题；

② 本网站内部数据可以使用（一般只在可信任内容上使用 v-html），永不用在用户提交的内容上（来自第三方的数据不可以用）。

示例：

<div id="app"><p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 --><p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> --><p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div><script>let app = new Vue({el: "#app",data: {message: "<span>通过双括号绑定</span>",html: "<span>html标签在渲染的时候被解析</span>",text: "<span>html标签在渲染的时候被源码输出</span>",}});
</script>

v-html与v-text区别在于，v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当 html 标签解析。
后输出。

v-pre填充原始信息；

显示原始信息跳过编译过程；
跳过这个元素和它的子元素的编译过程；
一些静态的内容不需要编译时，加这个指令可以加快渲染。

示例：

<span v-pre>{{ this will not be compiled }}</span>
<!-- 显示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
<script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});
</script>

3.2.4 数据响应式

如何理解响应式

① html5 中的响应式（屏幕尺寸的变化导致样式的变化）

② 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定

数据绑定：将数据填充到标签中

v-once 只编译一次

即，显示内容之后不再具有响应式功能；

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<!-- 即使data里面定义了msg 后期我们修改了，仍然显示的是-->
<!-- 第一次data里面存储的数据,即 Hello Vue.js -->
<span v-once>{{ msg}}</span><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});
</script>

3.3 双向数据绑定指令

3.3.1 什么是双向数据绑定

当数据发生变化的时候，视图也就发生变化；
当视图发生变化的时候，数据也会跟着同步变化。

图示：

3.3.2 v-model 指令用法

<div id="app"><div>{{msg}}</div><div><!--输入框中内容改变的时候， 页面上的msg 会自动更新 --><input type="text" v-model='msg'></div>
</div>

注： v-model指令限制在 <input>、<select>、<textarea>、components 中使用。

3.3.3 MVVM设计思想

M(model)
V(view)
VM(View Model)

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel：

m（model）
数据层，Vue 中数据层都放在 data 里面；
v（view / 视图）
Vue 中 view 即我们的 HTML 页面；
vm （view-model）控制器将数据和视图层建立联系
vm 即 Vue 的实例，就是 vm。

3.4 事件绑定

3.4.1 Vue如何处理事件？

v-on 指令：用来绑定事件

形式如：v-on:click 简写为 @click;

用法：

<input type='button' v-on:click='num++'/>

简写形式：

<input type='button' @click='num++'/>

v-on事件函数中传入参数

 <div id="app"><div>{{num}}</div><div><!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --><button v-on:click='handle1'>点击1</button><!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event --><button v-on:click='handle2(123,456,$event)'>点击2</button></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num++;}}});</script>

Vue全家桶之 Vue基础相关推荐

Vue全家桶（Vue基础看这篇就够了）
目录第一章:vue核心 1.1.Vue 简介 1.1.1 官网 1.1.2 Vue是什么? 1.1.3 Vue的特点 1.1.4 Vue周边库 1.2 初识Vue 1.3 模板语法 1.4 数据绑定 ...
浅谈VUE全家桶（Vue、VueX、Vue-Router、axios、Vue-cli）的理解与认识
1.Vue veu是一个渐进式的 .专注于视图层的前端开发框架,通过数据驱动和组件化的方式实现了高效的前端开发 ,既可以通过文件引入的方式在普通页面中被引入使用,也可以基于webpack等构建系统结 ...
Vue全家桶(一)之基础指令
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.12 前端发请求,调用后端接口,来获取特定格式的数 ...
Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体数据驱动:通过数据变化直接影响bom展示, ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
vue全家桶和react全家桶
感谢内容提供者:金牛区吴迪软件开发工作室今天笔者就简单的给大家介绍一下一般项目在开发的时候所提到的vue全家桶和react全家桶分别都包括哪些内容. vue全家桶: vue(整体架构) + vue ...
什么是vue全家桶？
vue全家桶: vue(整体架构) + vuex(状态管理) + vue-router(路由) + vue_resource || axios(ajax请求) + mint-UI(移动端UI框 ...

Vue全家桶之 Vue基础

目录

1. Vue 概述

尤雨溪：Vue.js 的创建者

Vue是什么？

Vue：渐进式 JavaScript 框架

2. Vue 基本使用

2.1 Vue安装

2.1.1 直接用 script 标签引入

2.1.2 NPM

2.1.3 其它安装方式（略…）

2.2 与传统开发模式对比

2.3 Vue.js 之 HelloWorld 细节分析

2.3.1 Vue实例参数

2.3.2 插值表达式的用法

2.3.3 Vue代码运行原理

3. Vue模板语法

3.1 模板语法概述

3.1.1 理解前端渲染

3.1.2 前端渲染方式

3.1.3 Vue模板语法概览

3.2 指令

3.2.1 什么是指令

3.2.2 v-cloak指令用法

3.2.3 数据绑定指令

3.2.4 数据响应式

3.3 双向数据绑定指令

3.3.1 什么是双向数据绑定

3.3.2 v-model 指令用法

3.3.3 MVVM设计思想

3.4 事件绑定

3.4.1 Vue如何处理事件？

Vue全家桶之 Vue基础相关推荐

最新文章

热门文章

Vue全家桶 之 Vue基础

目录

1. Vue 概述

尤雨溪：Vue.js 的创建者

Vue是什么 ？

Vue：渐进式 JavaScript 框架

2. Vue 基本使用

2.1 Vue安装

2.1.1 直接用 script 标签 引入

2.1.2 NPM

2.1.3 其它安装方式（略…）

2.2 与传统开发模式对比

2.3 Vue.js 之 HelloWorld 细节分析

2.3.1 Vue实例参数

2.3.2 插值表达式的用法

2.3.3 Vue代码运行原理

3. Vue模板语法

3.1 模板语法概述

3.1.1 理解前端渲染

3.1.2 前端渲染方式

3.1.3 Vue模板语法概览

3.2 指令

3.2.1 什么是指令

3.2.2 v-cloak指令用法

3.2.3 数据绑定指令

3.2.4 数据响应式

3.3 双向数据绑定指令

3.3.1 什么是双向数据绑定

3.3.2 v-model 指令用法

3.3.3 MVVM设计思想

3.4 事件绑定

3.4.1 Vue如何处理事件？

Vue全家桶 之 Vue基础相关推荐

最新文章

热门文章

Vue全家桶之 Vue基础

　　尤雨溪：Vue.js 的创建者

Vue是什么？

2.1.1 直接用 script 标签引入

Vue全家桶之 Vue基础相关推荐