三十三、深入Vue.js语法（上篇）
@Author：Runsen
@Date：2020/6/11
人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！
文章目錄
- 開始
- 設置掛載點
- data數據對象
- 插值表達式 {{}}
- v-text
- v-html
開始
今天Runsen開始掙擼Vue.js，只要把官方文檔搞定就基本沒事了。
我的筆記可能涉及到一點B站的黑馬程序員和極客時間的教程，不說了開始干
設置掛載點
下面新建一個html，引入我們的 Vue.js。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app">{{messsage}}</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{messsage:"Runsen is 20"}})</script></body> </html>el就是掛載點，element元素的意思，它的就是告訴實例要找頁面上節點id為app的元素來插入替換；
data數據對象
Vue中的數據，都可存放于data下。想調用Vue中的數據，可以使用插值表達式，也可以使用Vue的命令，v-text和v-html都可以使用，方式如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app">{{ messsage }}<h2>{{person}}</h2><h2>{{person.name}}{{person.age}}</h2><h2>{{person.name}}{{person.age}}</h2><ul><li>{{ week[0] }}</li><li>{{ week[1] }}</li><li>{{ week[2] }}</li><li>{{ week[3] }}</li><li>{{ week[4] }}</li><li>{{ week[5] }}</li><li>{{ week[6] }}</li></ul> </div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{messsage:"Runsen is 20",person:{name:"Runsen",age:20},week : ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]}})</script> </body> </html>插值表達式 {{}}
數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值。例如：
<span>Message: {{ msg }}</span>Mustache 標簽將會被替代為對應數據對象上 msg 屬性（msg定義在data對象中）的值。
無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會自動更新。
v-text
v-text指令的作用是:設置標簽的內容 text Content
默認寫法會替換全部內容
使用差值表達式可以替換指定內容，內部支持寫表達式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><h2 v-text="messsage+'!'">潤森</h2><h2>{{messsage+'!'}}潤森</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{messsage:"Runsen is 20"}})</script> </body> </html>v-html
v-text 會將數據解釋為純文本，而非HTML。有時我們需要輸出真正的HTML，這時就可以使用v-html。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><p v-text="message"></p><p v-html="html"></p><p v-text="html"></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"Runsen is 20",html: '<input type="date"><input type="color">'}})</script> </body> </html>注意：生產環境中動態渲染HTML是非常危險的，容易導致XSS攻擊。所以在使用v-html時，不要在用戶提交或可操作的網頁上使用。
如果本文對你有幫助，大家可以點贊轉發一波，有錯誤大家可以評論指出，感謝！
大家繼續加油，未來可期！Runsen的征途是星辰大海！
總結
以上是生活随笔為你收集整理的三十三、深入Vue.js语法（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么更改为硬盘启动 修改硬盘启动顺序
- 下一篇： gho镜像怎么用u盘装 使用U盘装载GH