<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<style>
.h3{
color:red;
}
.classA{
color:green;
}
.classB{
font-weight: bold;
}
.classC{
font-size: 20px;
font-family:'微軟雅黑';
color:gray;
}
[v-cloak] {
display:none
},
</style>
<body>
<div id="app">
<h1 id="h1" v-text="message"></h1>
<hr>
<span v-if="isLoadding">加載</span>
<span v-else>不加載</span><br/>
<span v-show="isShow">css的display屬性</span>
<ul>
<li v-for="number in numbers"><span v-text="number"></span></li>
</ul>
<ul>
<li v-for="number in sortItems"><span v-text="number"></span></li>
</ul>
<ul>
<li v-for="(user,index) in users"><span v-text="index"></span> <span v-text="user.name"></span> -- <span v-text="user.age"></span></li>
</ul>
<h3 class="h3">對象數組排序</h3>
<ul>
<li v-for="(user,index) in sortUsers"><span v-text="index"></span> <span v-text="user.name"></span> -- <span v-text="user.age"></span></li>
</ul>
<h2 id="h2" v-html="msgHtml"></h2>
<h2 id="h3" v-text="count"></h2>
<button v-on:click="minues"> - </button> <button v-on:click="add"> + </button><br />
<button @click="minues"> - </button> <button @click="add"> + </button><br />
<h3 class="h3">綁定Enter鍵添加數字</h3>
<input type="text" @keyup.enter="onEnter" v-model="secondCount"/><br />
<h3 class="h3" v-text="word"></h3>
<input type="text" v-model="word"/>
<h3 class="h3">多選按鈕綁定一個值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label><br />
<input id="cb1" type="checkbox" value="cb1" v-model="cbNames"/>
<label for="cb1">cb1</label>
<input id="cb2" type="checkbox" value="cb2" v-model="cbNames"/>
<label for="cb2">cb2</label>
<input id="cb3" type="checkbox" value="cb3" v-model="cbNames"/>
<label for="cb3">cb3</label>
<p>{{cbNames}}</p>
<h3>單選按鈕綁定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
<img v-bind:src="imgSrc" v-on:click="popup" width="200px"><br/>
<a v-bind:href="url">baidu.com</a><br/>
<a :href="url">baidu.com</a><br/>
<div :class="{classA:isTrue}">2.CSS是否顯示的判斷</div><br/>
<div :class="[classB,classC]">3.綁定class中的數組</div>
<div :class="isOK?'classB':'classC'">4.CSS三元表達式</div><br/>
<div :style="{color:red,fontSize:font}">5.綁定style</div><br/>
<div :style="styleObject">6.用對象綁定style樣式</div><br/>
<div v-pre>跳過vue的編譯，直接輸出原始值。{{message}}</div><br/>
<div v-cloak>在vue渲染完指定的整個DOM後才進行顯示{{classA}}</div><br/>
<div v-once>在第一次DOM時進行渲染，渲染完成後視爲靜態內容，跳出以後的渲染過程：{{message}}</div>
<div><input type="text" v-model="message"></div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
classB:'classB',
classC:'classC',
red:'red',
font:'17px',
classA:'classA',
styleObject:{
fontSize:'20px',
},
message:"hello world！",
isLoadding:true,
isShow:true,
numbers:[20,23,18,65,32,19,5,56,41],
users:[
{name:'zhangsan',age:20},
{name:'lisi',age:24},
{name:'wanger',age:30},
{name:'zhouwu',age:19},
{name:'tianqi',age:20}
],
msgHtml:'<h2>hello Vue!</h2>',
count:1,
secondCount:0,
word:'雙向綁定!',
isTrue:true,
isOK:true,
sex:'',
cbNames:'',
imgSrc:'http://i1.bbswater.fd.zol-img.com.cn/t_s1200x5000/g5/M00/06/06/ChMkJ1i3ZeqIZvtqAAORkkVBlH0AAaV3gJWwa0AA5Gq037.jpg',
url:'http://www.baidu.com'
},
computed:{
sortItems:function(){
return this.numbers.sort(sortNumber);
},
sortUsers:function(){
return sortByAge(this.users,'age');
}
},
methods:{
minues:function(){
this.count--;
},
add:function(){
this.count++;
},
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
},
popup:function(){
alert("123");
}
}
});
function sortNumber(a,b){
return a-b
}
function sortByAge(users,age){
return users.sort(function(a,b){
var x=a[age];
var y=b[age];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
</body>
</html>vue.js 學習筆記第一季-基礎指令集（JS胖老師課程）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章