您的位置：首页 > 产品设计 > UI/UE
vue.js学习笔记第一季-基础指令集（JS胖老师课程）

2018-03-22 15:12 816 查看
<!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 教程指令集
相关文章推荐
新的分享
章节导航