當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue全家桶之 Vue基础

發(fā)布時(shí)間：2024/9/27 vue 38 豆豆

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

1. Vue 概述
2. Vue 基本使用
- 2.1 Vue安裝
- - 2.1.1 直接用 script 標(biāo)簽引入
  - 2.1.2 NPM
  - 2.1.3 其它安裝方式（略...）
- 2.2 與傳統(tǒng)開發(fā)模式對比
- 2.3 Vue.js 之 HelloWorld 細(xì)節(jié)分析
- - 2.3.1 Vue實(shí)例參數(shù)
  - 2.3.2 插值表達(dá)式的用法
  - 2.3.3 Vue代碼運(yùn)行原理
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 數(shù)據(jù)綁定指令
  - 3.2.4 數(shù)據(jù)響應(yīng)式
- 3.3 雙向數(shù)據(jù)綁定指令
- - 3.3.1 什么是雙向數(shù)據(jù)綁定
  - 3.3.2 v-model 指令用法
  - 3.3.3 MVVM設(shè)計(jì)思想
- 3.4 事件綁定
- - 3.4.1 Vue如何處理事件？

1. Vue 概述

　　尤雨溪：Vue.js 的創(chuàng)建者

2014 年 2 月， Vue.js 正式發(fā)布
　2015 年 10 月 27 日，正式發(fā)布 1.0.0
　2016 年 4 月 27 日，發(fā)布 2.0 的預(yù)覽版本

Vue是什么？

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架；
vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。

使用 Vue 將 helloworld 渲染到頁面上：

Vue：漸進(jìn)式 JavaScript 框架

聲明式渲染 → 組件系統(tǒng) → 客戶端路由 → 集中式狀態(tài)管理 → 項(xiàng)目構(gòu)建

官網(wǎng)：https://cn.vuejs.org/v2/guide/

易用：熟悉 HTML 、 CSS 、 JavaScript 知識后，可快速上手 Vue；
靈活：在一個(gè)庫和一套完整框架之間自如伸縮；
高效： 20kB 運(yùn)行大小，超快虛擬 DOM。

2. Vue 基本使用

2.1 Vue安裝

2.1.1 直接用 script 標(biāo)簽引入

開發(fā)環(huán)境 版本（包含了有幫助的命令行警告）
// 制作原型或?qū)W習(xí)，可以使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生產(chǎn)環(huán)境 版本（優(yōu)化了尺寸和速度）
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

對于 生產(chǎn)環(huán)境，推薦鏈接到明確的版本號 (避免新版本造成不可預(yù)期的破壞）：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

2.1.2 NPM

構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝：

#最新穩(wěn)定版 $ npm install vue

2.1.3 其它安裝方式（略…）

更多 >> 訪問官方文檔：https://cn.vuejs.org/v2/guide/installation.html

2.2 與傳統(tǒng)開發(fā)模式對比

原生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 細(xì)節(jié)分析

2.3.1 Vue實(shí)例參數(shù)

el ：元素的掛載位置（值可以是 CSS 選擇器或 DOM 元素）；
data ：模型數(shù)據(jù)（值是一個(gè) 對象）

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

2.3.2 插值表達(dá)式的用法

將數(shù)據(jù)填充到 HTML 標(biāo)簽中；

示例2：
<div id="app">{{ message }} </div>
插值表達(dá)式支持基本的計(jì)算操作

2.3.3 Vue代碼運(yùn)行原理

概述編譯過程的概念（ 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拼接字符串

基本上就是將數(shù)據(jù)以字符串的方式拼接到 HTML 標(biāo)簽中，前端代碼風(fēng)格大體如下示。

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>白天風(fēng)向：'+day[3]+'</li>'tag += '<li>白天風(fēng)速：'+day[4]+'</li>'tag += '</ul>';var div = document.createElement('div');div.innerHTML = tag;info.appendChild(div); }

缺點(diǎn)：不同開發(fā)人員的代碼風(fēng)格差別很大，隨著業(yè)
務(wù)的復(fù)雜，后期的維護(hù)變得逐漸困難起來。

使用前端模板引擎

以下是基于模板引擎 art-template 的一段代碼，與拼接字符串相比，代碼明顯規(guī)范了很多，它擁有自己的一套模板語法規(guī)則。

優(yōu)點(diǎn)：大家都遵循同樣的規(guī)則寫代碼，代碼可讀性明顯提高了，方便后期的維護(hù)。

缺點(diǎn)：沒有專門提供事件機(jī)制。

3.1.3 Vue模板語法概覽

差值表達(dá)式；
指令；
事件綁定；
屬性綁定；
樣式綁定；
分支循環(huán)結(jié)構(gòu)。

3.2 指令

3.2.1 什么是指令

指令的 本質(zhì) 就是 自定義屬性。

Vue 中指令都是以 v- 開頭（比如：v-cloak）

官網(wǎng)：https://cn.vuejs.org/v2/api/#指令

3.2.2 v-cloak指令用法

v-cloak：防止頁面加載時(shí)出現(xiàn)閃爍

1）插值表達(dá)式存在的問題：“閃動(dòng)”；
2）如何解決該問題：使用 v cloak 指令；
3）解決該問題的原理：先隱藏，替換好值之后再顯示最終的值。

示例如下：
<style type="text/css">/*1、通過屬性選擇器選擇帶有屬性 v-cloak的標(biāo)簽，使其隱藏*/[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 里存儲的模型數(shù)據(jù)msg: 'Hello Vue'}});</script> </body> </html>

3.2.3 數(shù)據(jù)綁定指令

v-text 填充純文本 ；

用于將數(shù)據(jù)填充到標(biāo)簽中，作用與插值表達(dá)式類似，但沒有閃動(dòng)問題。相比插值表達(dá)式更加簡潔。

如果數(shù)據(jù)中有HTML標(biāo)簽會將html標(biāo)簽一并輸出。

注：此為單向綁定，數(shù)據(jù)對象上的值改變，插值會發(fā)生變化；但是當(dāng)插值發(fā)生變化并不會影響數(shù)據(jù)對象的值。
<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 片段填充到標(biāo)簽中。

① 存在安全問題；

② 本網(wǎng)站內(nèi)部數(shù)據(jù)可以使用（一般只在可信任內(nèi)容上使用 v-html），永不用在用戶提交的內(nèi)容上（來自第三方的數(shù)據(jù)不可以用）。

示例：
<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標(biāo)簽在渲染的時(shí)候被解析</span>",text: "<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>",}}); </script>
v-html與v-text區(qū)別在于，v-text輸出的是純文本，瀏覽器不會對其再進(jìn)行html解析，但v-html會將其當(dāng) html 標(biāo)簽解析。
后輸出。
v-pre填充原始信息；
- 顯示原始信息跳過編譯過程；
- 跳過這個(gè)元素和它的子元素的編譯過程；
- 一些靜態(tài)的內(nèi)容不需要編譯時(shí)，加這個(gè)指令可以加快渲染。
示例：
<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 數(shù)據(jù)響應(yīng)式

如何理解響應(yīng)式

① html5 中的響應(yīng)式（屏幕尺寸的變化導(dǎo)致樣式的變化）

② 數(shù)據(jù)的響應(yīng)式（數(shù)據(jù)的變化導(dǎo)致頁面內(nèi)容的變化）
什么是數(shù)據(jù)綁定

數(shù)據(jù)綁定：將數(shù)據(jù)填充到標(biāo)簽中
v-once 只編譯一次

即，顯示內(nèi)容之后不再具有響應(yīng)式功能；

執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會繼續(xù)更新】
  <span v-once>{{ msg}}</span><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}}); </script>

3.3 雙向數(shù)據(jù)綁定指令

3.3.1 什么是雙向數(shù)據(jù)綁定

當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化；
當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會跟著同步變化。

圖示：

3.3.2 v-model 指令用法

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

3.3.3 MVVM設(shè)計(jì)思想

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

MVC 是后端的分層開發(fā)概念； MVVM是前端視圖層的概念，主要關(guān)注于視圖層分離，也就是說：MVVM把前端的視圖層，分為了三部分 Model, View , VM ViewModel：

m（model）
數(shù)據(jù)層，Vue 中數(shù)據(jù)層都放在 data 里面；
v（view / 視圖）
Vue 中 view 即我們的 HTML 頁面；
vm （view-model）控制器將數(shù)據(jù)和視圖層建立聯(lián)系
vm 即 Vue 的 實(shí)例 ，就是 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事件函數(shù)中傳入?yún)?shù)
<div id="app"><div>{{num}}</div><div><button v-on:click='handle1'>點(diǎn)擊1</button><button v-on:click='handle2(123,456,$event)'>點(diǎn)擊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>

總結(jié)

以上是生活随笔為你收集整理的Vue全家桶之 Vue基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： JavaScript从入门到放弃 -（七
下一篇：解决Vue3创建项目后的Error: C

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

生活随笔

生活随笔

vue

Vue全家桶之 Vue基础

目錄

1. Vue 概述

尤雨溪：Vue.js 的創(chuàng)建者

Vue是什么？

Vue：漸進(jìn)式 JavaScript 框架

2. Vue 基本使用

2.1 Vue安裝

2.1.1 直接用 script 標(biāo)簽引入

2.1.2 NPM

2.1.3 其它安裝方式（略…）

2.2 與傳統(tǒng)開發(fā)模式對比

2.3 Vue.js 之 HelloWorld 細(xì)節(jié)分析

2.3.1 Vue實(shí)例參數(shù)

2.3.2 插值表達(dá)式的用法

2.3.3 Vue代碼運(yùn)行原理

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 數(shù)據(jù)綁定指令

3.2.4 數(shù)據(jù)響應(yīng)式

3.3 雙向數(shù)據(jù)綁定指令

3.3.1 什么是雙向數(shù)據(jù)綁定

3.3.2 v-model 指令用法

3.3.3 MVVM設(shè)計(jì)思想

3.4 事件綁定

3.4.1 Vue如何處理事件？

總結(jié)

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

vue

Vue全家桶 之 Vue基础

目錄

1. Vue 概述

尤雨溪：Vue.js 的創(chuàng)建者

Vue是什么 ？

Vue：漸進(jìn)式 JavaScript 框架

2. Vue 基本使用

2.1 Vue安裝

2.1.1 直接用 script 標(biāo)簽 引入

2.1.2 NPM

2.1.3 其它安裝方式（略…）

2.2 與傳統(tǒng)開發(fā)模式對比

2.3 Vue.js 之 HelloWorld 細(xì)節(jié)分析

2.3.1 Vue實(shí)例參數(shù)

2.3.2 插值表達(dá)式的用法

2.3.3 Vue代碼運(yùn)行原理

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 數(shù)據(jù)綁定指令

3.2.4 數(shù)據(jù)響應(yīng)式

3.3 雙向數(shù)據(jù)綁定指令

3.3.1 什么是雙向數(shù)據(jù)綁定

3.3.2 v-model 指令用法

3.3.3 MVVM設(shè)計(jì)思想

3.4 事件綁定

3.4.1 Vue如何處理事件？

總結(jié)

Vue全家桶之 Vue基础

　　尤雨溪：Vue.js 的創(chuàng)建者

Vue是什么？

2.1.1 直接用 script 標(biāo)簽引入