簡(jiǎn)介
Vue.js是目前比較火的輕量級(jí)的前端框架之一。是一套構(gòu)建用戶界面的漸進(jìn)式框架类溢。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件凌蔬。
var newVue=new Vue({
el:'#demo',
data:{
name:'curry',
age:18,
},
create:function(){
console.log("hello,"+this.name);
},
methods:{
showMsg(){
console.log("hello,"+this.name);
},
},
})
Vue包含掛在元素（el），數(shù)據(jù)（data），模板（template）龟梦，方法（methods）與生命周期鉤子（created等）等選項(xiàng)隐锭。不同的實(shí)例選項(xiàng)擁有不同的功能，如：
- el表明我們的Vue需要操作哪一個(gè)元素下的區(qū)域计贰，’#demo’表示操作id為demo的元素下區(qū)域钦睡。
- data表示Vue 實(shí)例的數(shù)據(jù)對(duì)象，data 的屬性能夠響應(yīng)數(shù)據(jù)的變化躁倒。
- created表示實(shí)例生命周期中創(chuàng)建完成的那一步荞怒，當(dāng)實(shí)例已經(jīng)創(chuàng)建完成之后將調(diào)用其方法。
指令
v-text
v-text: 用于更新綁定元素中的內(nèi)容
<div v-text="text"></div>
//兩者一樣
<div>{{text}}</div>
v-html
v-html: 用于更新綁定元素中的html內(nèi)容
<div v-html="html"></div>
一般情況下不會(huì)再頁(yè)面使用html插入秧秉，以防止xss攻擊褐桌。
v-show
v-show：根據(jù)表達(dá)式之真假值，切換元素的display CSS 屬性
<div v-show=true>顯示我</div>
v-if象迎、v-else荧嵌、v-else-if
根據(jù)表達(dá)式的值的真假條件渲染元素
//根據(jù)隨機(jī)值來(lái)進(jìn)行顯示不同的內(nèi)容
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后砾淌。
v-for
v-for是以item in items的形式的特殊語(yǔ)法啦撮，常用來(lái)綁定數(shù)據(jù)到數(shù)組來(lái)渲染一個(gè)列表
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '張三' },
{ name: '李四' },
{ name: '王五' }
]
}
})
</script>
也可以將第二個(gè)參數(shù)作為鍵名
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
第三個(gè)參數(shù)為索引
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
v-on
v-on：綁定事件監(jiān)聽(tīng)器
<button v-on:click="doThis"></button>
<!-- 縮寫(xiě) -->
<button @click="doThis"></button>
v-bind
v-bind:動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，或一個(gè)組件 prop 到表達(dá)式汪厨。
<!-- 綁定一個(gè)屬性 -->
<!-- 縮寫(xiě) -->
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定一個(gè)有屬性的對(duì)象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
v-model
v-model:隨表單控件類(lèi)型不同而不同赃春。只有<input>
、<select>
劫乱、<textarea>
织中、components可以使用。
用于表單控件綁定衷戈。
<input v-model="remark"></input>
修飾符：
- .lazy - 取代 input 監(jiān)聽(tīng) change 事件
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
- .number - 輸入字符串轉(zhuǎn)為數(shù)字(如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值)
<input v-model.number="age" type="number">
- .trim - 輸入首尾空格過(guò)濾
<input v-model.trim="msg">
v-once
v-once：只渲染元素和組件一次狭吼。隨后的重新渲染,元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能殖妇。
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
