2.跟css、jq同樣,須要在html文本紅隊vue.js的類庫進行引入css
<script src="https://unpkg.com/vue/dist/vue.js"></script>
複製代碼
<!DOCTYPE HTML>
<html lang="zh">
<head>
<title></title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href= "css/hello.css" rel="stylesheet">
<meta>
</head>
<body>
<div id="showMsg">
{{ message }}
</div>
<script>
var msg = new Vue({
el:'#showMsg',
data: {
message : "Hello world !!"
}
})
</script>
<div id="myGame">
<h3>遊戲列表</h3>
<div v-if="seen">2018最新熱賣</div>
<ol>
<li v-for="game in games">
{{game.title}} / {{game.price}} 元
</li>
</ol>
</div>
<script>
var myGame = new Vue( {
el:'#myGame',
data:{
seen:true, //若是false,元素不會加載到dom
games:[
{title:'超級馬里奧', price:'99'},
{title:'英雄聯盟', price:'238'},
{title:'大金剛', price:'345'}
]
}
})
</script>
<!-- 3動態綁定 -->
<div id="myFavorite">
<p>輸入的是:{{ favoriteGame }}</p>
<input v-model="favoriteGame" >
</div>
<script>
var myFavorite = new Vue ({
el:'#myFavorite',
data:{
favoriteGame : '三國殺'
},
});
</script>
<!-- 4.點擊按鈕觸發事件 -->
<div id="sport">
<p>你喜歡的運動是:{{ favoriteSport }}</p>
<button v-on:click="btnClick('basketball')">basketball</button>
<button v-on:click="btnClick('football')">football</button>
<button v-on:click="btnClick('tennis')">tennis</button>
</div>
<script>
var sport = new Vue({
el:'#sport',
data:{
favoriteSport:'basketball'
},
methods:{
btnClick:function(sp) {
this.favoriteSport = sp;
}
}
})
</script>
<!-- 組件 -->
<div id="subject">
<ol>
<param-subject v-for="item in subjects" v-bind:sjb="item"></param-subject>
</ol>
</div>
<script>
Vue.component('param-subject', {
props:['sjb'],
template:'<li>{{ sjb.name }}</li>'
});
var subject = new Vue({
el:'#subject',
data:{
subjects:[
{name:'math'},
{name:'english'},
{name:'science'}
]
}
});
</script>
<!-- 過濾 -->
<div id='learn'>
<p>{{ msg }}</p>
<p>{{ msg | toUpper }}</p>
<hr>
<p>當前進度爲{{ num }}({{ num | toPercentage }})</p>
</div>
<script>
var learn = new Vue({
el:'#learn',
data:{
msg:'how to learn vue?',
num: 0.3
},
filters: {
toUpper:function(value) {
return value.toUpperCase();
},
toPercentage:function(value) {
return value * 100 + "%";
}
}
})
</script>
<hr>
<!-- 計算/觀察 -->
<div id="cacu">
<p>iphone xs約合{{ dollar }} 美圓,含稅價爲{{ dollarTax }}美圓,摺合人民幣爲{{ rmb }} 元</p>
<button @click="btnClick(120)">加價120美圓</button>
</div>
<script>
var cacu = new Vue({
el:'#cacu',
data:{
dollar: 2000,
},
computed : {
dollarTax: function() {
return this.dollar * 1.05;
},
rmb: function () {
return Math.round(this.dollarTax * 6.2);
}
},
watch: {
dollar: function (newVal, oldVal) {
console.log(newVal, oldVal);
this.dollarTax = newVal * 1.05;
this.rmb = Math.round(newVal * 1.05 * 6.2);
}
},
methods: {
btnClick: function(newVal) {
this.dollar += newVal;
}
}
})
</script>
<hr>
<div id="changeColor">
<div v-bind:class="{active:isActive}">文本顏色展現</div>
<div :class="{active:isActive}">文本顏色展現</div>
<button @click="btnClick">改變顏色</button>
</div>
<script>
var changeColor = new Vue ({
el: '#changeColor',
data: {
isActive : true,
},
methods : {
btnClick: function () {
this.isActive = !this.isActive;
}
}
})
</script>
<hr>
<!-- 綁定class對象 -->
<div id="bindClass">
<div :class="myclass">這是class對象綁定</div>
<button @click="btnClick">改變class的樣式</button>
</div>
<script>
var bindClass = new Vue({
el:'#bindClass',
data: {
myclass: {
active:true,
big: true
}
},
methods: {
btnClick : function() {
this.myclass.big = !this.myclass.big;
}
}
})
</script>
<!-- 條件渲染 -->
<div id="condition">
<div v-if="result <= 0">{{ result }}分紅績未公佈</div>
<div v-else-if="result < 60">{{ result }} 成績不及格</div>
<div v-else-if="result < 80">{{ result }} 良好</div>
<div v-else="result >= 90">{{ result }} 優秀</div>
<div v-show="present">遊戲機</div>
<button @click="btnClick">獲取成績</button>
</div>
<script>
var condition = new Vue ({
el:'#condition',
data: {
result : 0,
present:false
},
methods : {
btnClick : function() {
this.result = Math.round(Math.random() * 100);
if (this.result >= 80) {
this.present = true;
} else {
this.present = false;
}
}
}
})
</script>
<div>
<div id="myFood">
<div v-for="(value,key) in foods">
{{key}}:{{value}}
</div>
</div>
</div>
<script>
var myFood = new Vue({
el:'#myFood',
data:{
foods:{
name:"apple",
price:"5yuan",
color:"red"
}
}
})
</script>
</body>
</html>
複製代碼
瀏覽器運行html文件:html