Vue基本使用

● 引入vue.js

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>vue.js測試程式
title
>
<
script 
src="vue.min.js"
>
script
>
head
>
html
>

● v-model。雙向繫結

<

body
>
<
div 
id>
}    
<
input 
type
="text" v-model="num1"
/>
+    
<
input 
type
="text" v-model="num2"
/>
=    
<
span 
v-text
="number.parseint(num1) + number.parseint(num2)"
/>
<
button
>計算
button
>
div>
body
>
<
script
>
varvm 
=new
vue(
});script
>

● v-text。避免載入頁面時顯示插值表示式

<

body
>
<
div 
id>
}    
<
input 
type
="text"
v-model
="num1"
/>
+    
<
input 
type
="text"
v-model
="num2"
/>=　　
<
span v-text=
"number.parseint(num1) + number.parseint(num2)"
/>
<
button
>計算
button
>
div>
body
>
<
script
>
varvm 
=new
vue(
});script
>

● v-on。監聽事件

<

body
>
<
div 
id>
}    
<
input 
type
="text"
v-model
="num1"
/>
+    
<
input 
type
="text"
v-model
="num2"
/>
=<
span 
v-text
="result"
>
span
>
<
button v-on:click="change"
>計算
button
>
div>
body
>
<
script
>
varvm 
=new
vue(,
methods: 
}});
script
>

● v-bind。繫結資料（可省略v-bind）

<

body
>
<
div 
id>
<
a v-bind:href
="url"
>
<
span 
v-text
="name"
>
span
>
a>
<
input 
type
="text"
v-model
="num1"
/>
+    
<
input 
type
="text"
v-model
="num2"
/>
=    
<
span 
v-text
="result"
>
span
>
<
button 
v-on:click
="change"
>計算
button
>
<
div 
v-bind:style
="">vue測試
div>
div>
body
>
<
script
>
varvm 
=new
vue(,
methods: 
}});
script
>

● v-for

<

body
>
<
div 
id>
<
ul>
<
li v-for
="(item,index) in userlist"
:key
="item.user.name"
>
<
div 
v-if
="item.user.name=='lihua'"
style
="background-color: #00a4ff"
>
}--}--}
div>
<
div 
v-else
>
}--}--}
div>
li>
ul>
div>
body
>
<
script
>
varvm 
=new
vue(},}]
},});
script
>

● v-if。決定某個html元素是否存在

<

body
>
<
div 
id>
<
ul>
<
li v-for
="(item,index) in userlist"
:key
="item.user.name"
>
<
div 
v-if
="item.user.name=='lihua'"
style
="background-color: #00a4ff"
>
}--}--}
div>
<
div 
v-else
>
}--}--}
div>
li>
ul>
div>
body
>
<
script
>
varvm 
=new
vue(},}]
},});
script
>

VUE基本使用

建立前呼叫this.currdate fun 方法 created function mounted function watch else 出勤checkbox 請假值 檢查，乙個為真，另外乙個設定為false singleout data function tmp else 1 html頁面呼叫...

vue基本使用

注意事項 掛載點要使用id選擇器 掛載點不能是ntml或者body標籤 doctype html en utf 8 viewport content width device width,initial scale 1.0 安裝vue title imgsrc alt changeimg 換圖 bu...

VUE的基本使用

cn.vuejs.org src vue.js script 掛載點 data msg 資料 methods v text v html 插入文字兩者的區別和innertext innerhtml 區別一樣 v show css級別的顯示隱藏，display none v show true fal...