基礎(chǔ)
語法
<div id="app">
<h1>{{ title }}</h1>
<div>
<span>{{ views+1 }}</span>
<span>{{ type ? '原創(chuàng)' : '轉(zhuǎn)載' }}</span>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
title : 'hello',
views : 1152,
type : true
}
});
</script>
指令
<div id="app">
<!-- HTML輸出 -->
<div v-html="content"></div>
<a v-bind:href="home"></a>
<!-- 簡寫 -->
<a :href="home"></a>
<button v-on:click="notice">提示</button>
<!-- 簡寫 -->
<button @click="notice">提示</button>
<p>{{copyright()}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
content : '<ul class="list-unstyled"><li>列表1</li><li>列表2</li></ul>',
home:'/home',
company: 'Xcxxkj'
},
methods:{
notice:function(event){
alert('notice message');
},
copyright:function(event){
return 'Copyright '+this.company
}
}
});
</script>
計算屬性
<div id="app">
<div>{{ number }}</div>
<div>{{ formatNumber }}</div>
<div>{{ fullName }}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
number:7,
firstName : "Jone",
lastName: "Doe"
},
computed: {
formatNumber:function(){
return 'No. '+this.number+' ,';
},
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(val){
var names = val.split(' ');
this.firstName = names[0];
this.lastName = names[names.length-1];
},
}
},
});
vm.fullName = "Tom Tone";
</script>
條件判斷,循環(huán)
<div id="app">
<div v-if="status">根據(jù)status顯示</div>
<div v-show="status">根據(jù)status顯示</div>
<div v-if="score > 90">優(yōu)秀</div>
<div v-else-if="score > 80">良好</div>
<div v-else>努力</div>
<ul>
<li v-for="(item,index) in lists">{{item.name}}</li>
</ul>
<ul>
<li v-for="(value,key) in information">{{key}}-{{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
status: true,
score:75,
lists:[{name:'jim'},{name:'lili'},{name:'tom'}],
information:{nickname:'石武',age:18}
}
});
</script>
Class,Style
<div id="app">
<div class="box" style="font-size:38px;"
v-bind:class="{'box-active':isActive,'box-title':true}"
v-bind:style="{'padding':boxPadding,'color':'red'}">
樣式
</div>
<code>
{'box-active':true,'box-title':true} 可簡寫為 ['box-active','box-title']
</code>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isActive:true,
boxPadding:'20px',
}
});
</script>
事件處理
<div id="app">
<input name="publish_time" v-bind:readonly="isReadonly" :disabled="isDisabled">
<br>
<input v-on:click="buttonClick" @keyup.enter="buttonEnter">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isReadonly:false,
isDisabled:true,
buttonText:"按鈕T",
},
methods:{
buttonClick:function(){
console.log('點擊了');
},
buttonEnter:function(){
console.log('回車了')
}
}
});
</script>
組件
全局注冊
<div id="app">
<blog-post tag="國內(nèi)" :title="blogTitle"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['title','tag'],
data: function () {
return {
count: 0
}
},
template: '<h3 v-on:click="count++">{{tag}} - {{ title }} - {{count}}</h3>'
})
var vm = new Vue({
el:'#app',
data:{
blogTitle:"資料"
},
});
</script>
局部注冊
<div id="app">
<blog-post :title="blogTitle"></blog-post>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
blogTitle:"資料"
},
components:{
'blog-post':{
props: ['title','tag'],
data: function () {
return {
count: 0
}
},
template: '<h3 v-on:click="count++">{{tag}} - {{ title }} - {{count}}</h3>
}
}
});
</script>
過濾器
全局注冊
<div id="app">
<input v-model="message" type="text">
<p>{{message | capitalize}}</p>
</div>
<script>
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
var vm = new Vue({
el:'#app',
data:{
message:"helloworld"
},
});
</script>
局部注冊
<div id="app">
<input v-model="message" type="text">
<p>{{message | capitalize}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:"helloworld"
},
filters: {
'capitalize': function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
</script>
