二、基本語法
三、vue指令
vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，vue 也完全能夠為複雜的單頁應用提供驅動。
這裡介紹使用script標籤進行引入。
"js/vue.js"
>
<
/script>
語法如下：
let vm =
newvue
()
型別作用
el字串
配置控制的元素—表示vue要控制的區域，值為css選擇器
data
物件存放要用到的資料，資料為響應式
methods
物件用於定義的函式，可以通過 return 來返回函式值
使用插值表示式：}
能存放的型別有：數字、字串、陣列、物件、表示式
案例：
>
姓名：}<
/h3>
年齡：}<
/h3>
性別：}<
/h3>
}<
/h3>
<
/div>
let vm =
newvue(,
methods:}}
)<
/script>
資料變化，頁面重新渲染
例項
//上方**相同
vm.name =
"李明"
;//改變姓名,頁面重新渲染
指令：具有特殊的含義擁有特殊功能的特性 指令
作用v-pre
跳過這個元素和它的子元素的編譯過程
v-once
只渲染元素一次
v-text
以文字方式顯示data裡面的內容 優先順序要高於插值表示式
v-html
以標籤的形式出現在頁面上(容易引起xss攻擊)
v-if
將根據表示式值(true 或 false )來決定是否插入該元素
v-else
可以用 v-else 指令給 v-if 新增乙個else塊
v-else-if
用作 v-if 的 else-if 塊，可以鏈式的多次使用
v-show
使用 v-show 指令來根據條件展示元素
v-for
v-for 可以繫結資料到陣列來渲染乙個列表
語法如下：
}//顯示的內容
<
/div>
let vm =
newvue(}
)<
/script>
語法如下：
}顯示的內容
<
/div>
let vm =
newvue(}
) vm.name =
"小芳"
;//改變姓名,頁面重新渲染
vm.name =
"小李"
; vm.name =
"小王"
;<
/script>
語法如下：
"msg"
>
}<
/div>
let vm =
newvue(}
)<
/script>
這是乙個vue指令<
/span>
語法如下：
"msg"
>
<
/div>
let vm =
newvue(}
)<
/script>
語法如下：
>
"math.random()>0.5"
>
success
<
/div>
else
>
error
<
/div>
<
/div>
let vm =
newvue()
<
/script>
可以看到當隨機數大於0.5時顯示success,否則顯示error,也就是根據表示式值(true 或 false )來決定是否插入該元素。
語法如下：
>
"type==='a'"
>
a<
/div>
else-if
="type==='b'"
>
b<
/div>
else-if
="type==='c'"
>
c<
/div>
else
>
not a/b
/c<
/div>
<
/div>
let vm =
newvue(}
)<
/script>
可以看到用作 v-if 的 else-if 塊，可以鏈式的多次使用。
語法如下：
>
"ok"
>hello<
/h1>
<
/div>
let vm =
newvue(}
)<
/script>
總結
相關文件:
Vue元件使用基礎
這篇博文用來記錄.vue元件的使用方法。可以把元件 按照template style script的拆分方式，放置到對應的.vue檔案中。模板 template 初始資料 data 接受的外部引數 props 方法 methods 生命週期鉤子函式 lifecycle hooks 在html中使用元...
vue的使用基礎
官方的說法是這樣，簡單的理解下來就是乙個框架，別人幫我們寫好的框架，我們只需要拿來使用就行了。上面說了，vue是別人寫好的框架，我們只需要拿過來用就行了。用標籤來引入 script 通過new vue 方法來使用vue div var vm newvue methods script body 最終...
vue的基礎使用
1 通過new的方式來得到了vue的例項，在new通過乙個物件來對vue的例項配置 el，data 接觸了雙花括號 mustache interpolation 的語法 可以讀取變數的值 顯示在呼叫的元素的innerhtml中。2 雙花括號 語法 作用 執行表示式，將表示式的結果 輸出到當前呼叫元素...