當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue全家桶之 Vue基础

發布時間：2024/9/27 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue全家桶之 Vue基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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>
插值表達式支持基本的計算操作

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 的一段代碼，與拼接字符串相比，代碼明顯規范了很多，它擁有自己的一套模板語法規則。

優點：大家都遵循同樣的規則寫代碼，代碼可讀性明顯提高了，方便后期的維護。

缺點：沒有專門提供事件機制。

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"><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> <p>{{message}}</p> <p v-text="text"></p>  </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>  <span v-pre>{{msg}}</span>  <script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}}); </script>

3.2.4 數據響應式

如何理解響應式

① html5 中的響應式（屏幕尺寸的變化導致樣式的變化）

② 數據的響應式（數據的變化導致頁面內容的變化）
什么是數據綁定

數據綁定：將數據填充到標簽中
v-once 只編譯一次

即，顯示內容之后不再具有響應式功能；

執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】
  <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 指令用法

注： 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><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基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript从入门到放弃 -（七
下一篇： Java-For循环

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

生活随笔

生活随笔

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如何處理事件？

總結

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

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.js 的創建者

Vue是什么？

2.1.1 直接用 script 標簽引入