1. vue簡介

vue的組件化

后綴名為.vue的文件是vue.js特有文件格式，表示一個vue組件 ，即單頁式組件，可承載視圖模板-,“樣式定義”-

2.vue擴展插件

vue-cli:腳手架 vue-resource(axios):ajax請求 vue-router:路由管理 vuex:狀態管理 vue-lazyload:圖片懶加載 vue-scroller:頁面滾動 mint-ui:移動端UI組件庫 element-ui:PC端UI組件庫 ...

3.模板

插值

用雙大括號{{}}引住的內容被稱為"Mustache"語法 Mustache標簽會被相應的數據對象屬性值替換,且當這個屬性變化是也會隨之更新

運行結果：

插值-雙大括號表達式

插值支持js表達式進行運算及簡單處理

<p>{{name.toUpperCase()}}</p>

三大括號表達式

被廢除，使用不當導致xss攻擊，功能由v-html代替

v-text和v-html

v-text等價于{{}}
用法：<p v-text="mesg"></p><p v-html="mesg"></p>

v-bind指令

強制綁定
用法：

<a href="url">lianjie</a><a v-bind:href="url">lianjie</a><a :href="url">lianjie</a>

使用效果：

v-on指令

強制數據綁定
用法：

<button v-on:click="go">Chilk me</button><button @click="go('test')">Chilk me</button><button @click="go(msg)">Chilk me</button> methods:{go(msg){console.log("點擊了按鈕! msg="+msg)}}

運行結果：
解釋：不帶參調用 返回其類型；帶參調用分兩種，第一種帶單撇號，其結果就是這個字符串。不帶單撇號，返回這個字符串綁定的函數值

{{}}導致加載閃爍問題目前沒有遇見

參見鏈接：https://blog.csdn.net/ABAP_Brave/article/details/81677158

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的1.vue简介以及模板语法---vue教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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