vue簡單構建
html
<div id="app">
{{ message }}
<button v-on:click="change">點擊</button>
</div>
JS
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
change:function(){
this.message='hello world!'
}
}
})
</script>
methods 用于定義的函數，可以通過 return 來返回函數值镊叁。
{{ }} 用于輸出對象屬性和函數返回值尘颓。
id名稱 “app” ,與new Vue()中的el “#app” 相對應
HTML中的 “{{message}}” 與new Vue()中的data的 “message” 相對應
HTML中的 “change” 與new Vue()中的methods的 “change” 方法相對應
Vue.js 模板語法
1、插值晦譬，數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值包括JS表達式
<p>{{ message }}</p>
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
2疤苹、v-text 指令用于輸出文本<div v-text="message"></div>
3、v-html 指令用于輸出 html 代碼<div v-html="message"></div>
4敛腌、v-model指令用于實現(xiàn)雙向數據綁定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
<p>單個復選框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多個復選框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選擇的值為: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!',
checked : false,
checkedNames: []
}
})
</script>
5卧土、v-cloak 隱藏未編譯的標簽，通常用來解決{{}}表達式閃爍問題
<style>
[v-cloak]{display:none;}
</style>
<span v-cloak>{{msg}}</span>
6像樊、v-bind 指令用于綁定各種屬性尤莺，v-bind:可以簡寫為:
綁定id
<div v-bind:id="dynamicId"></div>
綁定disabled屬性
<button v-bind:disabled="isButtonDisabled">Button</button>
多種方式綁定style和class
<style>
.red{color:red;}
.fs-30{font-size:30px;}
.c-blue{color:blue;}
.classC{color:green;}
.classD{width:100px;border-bottom:1px solid green;}
</style>
<ul id="app">
<li v-bind:src="imageSrc" :style="{'width':'100px'}"></li>
<li v-bind:class="{red:isRed}">red</li>
<li :class="[classA,classB]">blue</li>
<li :class="[classA,{classC:isC;classD:isD}]">green</li>
<li :class="{fontSize:size+'px'}">skyblue</li>
<li :class="[styleObjectA,styleObjectB]">purple</li>
</ul>
<script>
new Vue({
el:"#app",
data:{
imageSrc="./images/1.png",
isRed:true,
classA:'fs-30',
classB:'c-blue',
isC:'true',
isD:'true',
size:'10',
styleObjectA:{
"font-size":"25px",
"color":"red"
},
styleObjectB:{
"width":"150px",
"border-bottom":"1px dashed red"
}
}
})
</script>
7、v-if 指令用于判斷生棍，如果seen是true可以看到颤霎，如果是false看不到
<p v-if="seen">現(xiàn)在你看到我了</p>
8、v-else與v-else-if涂滴，這兩個必須用于v-if后面
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else-if="Math.random() <0.8">
a little sorry
</div>
<div v-else>
Not sorry
</div>
9友酱、v-show，與v-if都可以用來顯示/隱藏元素<p v-show="seen">現(xiàn)在你看到我了</p>
注意：v-if 為false時柔纵，元素不會被渲染缔杉；而v-show為false時元素被渲染，只是在元素上增加了
display:none樣式進行隱藏
10搁料、v-on 指令用于綁定各種方法或详，監(jiān)聽DOM事件系羞，v-on:可以簡寫為@
<a v-on:click="doSomething">
11、修飾符霸琴，修飾符是以半角句號 . 指明的特殊后綴椒振，用于指出一個指令應該以特殊方式綁定。例如.stop沈贝、.prevent杠人、.capture、.self宋下、.once 等嗡善。
.prevent修飾符告訴 v-on 指令對于觸發(fā)的事件調用 event.preventDefault()
<form v-on:submit.prevent="onSubmit"></form>
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按鍵修飾符
Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符学歧，記住所有的 keyCode 比較困難罩引，所以 Vue 為最常用的按鍵提供了別名，包括.enter枝笨、.tab袁铐、.delete (捕獲 "刪除" 和 "退格" 鍵)、.esc横浑、.space剔桨、.up、.down徙融、.left洒缀、.right、.ctrl欺冀、.alt树绩、.shift、.meta
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
表單修飾符
表單修飾符用于表單輸入框.lazy隐轩、.number 饺饭、.trim
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據职车，但你可以添加一個修飾符 lazy 瘫俊，從而轉變?yōu)樵?change 事件中同步，即只有input輸入框失去焦點的時候才同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值）悴灵，可以添加一個修飾符 number 給 v-model 來處理輸入值扛芽，type="number" 時 HTML 中輸入的值也總是會返回字符串類型。：
<input v-model.number="age" type="number">
如果要自動過濾用戶輸入的首尾空格称勋，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">
12、過濾器
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
capitalize是自定義的一個過濾器涯竟，將單詞首字母變?yōu)榇髮?13赡鲜、v-for遍歷數組和對象
遍歷數組
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
//<li v-for="(site,index) in sites">{{index}}:{{site}}:{{ site.name }}</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
遍歷對象
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
//<li v-for="(value, key) in object">{{ key }} : {{ value }}</li> key-鍵名
//<li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li> index-索引值
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鳥教程',
url: 'http://www.runoob.com',
slogan: '學的不僅是技術空厌，更是夢想！'
}
}
})
</script>
v-for 也可以循環(huán)整數
<li v-for="n in 10">
{{ n }}
</li>
14银酬、計算屬性computed
<div id="app">
<p>原始字符串: <input type="text" v-model="message"/></p>
<p>計算后反轉字符串: <input type="text" v-model="reversedMessage"/></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!',
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
</script>
計算屬性與methods對比
我們可以使用 methods 來替代 computed嘲更，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存揩瞪，只有相關依賴發(fā)生改變時才會重新取值赋朦。而使用 methods ，在重新渲染的時候李破，函數總會重新調用執(zhí)行宠哄。
<div id="app">
<p>原始字符串: <input type="text" v-model="message"/></p>
<p>計算后反轉字符串: <input type="text" v-model="reversedMessage"/></p>
<button @click="change">反轉</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!',
reversedMessage: ''
},
methods: {
change:function(){
this.reversedMessage=this.message.split('').reverse().join('');
}
}
})
</script>
15、$watch監(jiān)聽屬性
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一個實例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 這個回調將在 vm.kilometers 改變后調用
document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "嗤攻，修改后值為: " + newValue;
})
</script>
