版本：1.0
教程推荐：https://laravist.com/series/vue-js-1-0-in-action-series
官方教程：https://cn.vuejs.org/guide
个人感觉真的很好用，有些功能如果用原生js来写的话会非常麻烦，用vue.js真的很方便，真的是一个很有潜力的框架，而且2.0也要来了~
下面代码的具体效果：http://demo.laji.blog/study/vuejs
数据双向绑定，循环输出数据/渲染列表
<div id="demo" class="container">
<h3 v-if="iftitle">数据双向绑定</h3>
<input type="text" class="form-control" v-model="test">
<h3>循环输出数据/渲染列表</h3>
<ul>
<li v-for="person in persons">{{person.name}}({{person.sex}},{{person.age}})</li>
</ul>
</div>var demo = new Vue({
el:'#demo',
data:{
iftitle:true,
test:'Hello World',
persons:[
{ name:'张三',age:18,sex:'男' },
{ name:'李四',age:25,sex:'女' },
{ name:'王五',age:40,sex:'男' }
]
}
});处理用户输入/事件["v-on:"可以用"@"来简写]
<div id="demo2" class="container">
<h3>处理用户输入/事件["v-on:"可以用"@"来简写]</h3>
<input type="text" class="form-control" v-model="name" v-on:keyup.enter="addName">
<button class="btn btn-block btn-success" v-on:click="addName">添加名字</button>
<ul>
<li v-for="name in names"><span>{{name}}</span> <button @click="removeName($index)">删除</button></li>
</ul>
</div>var demo2 = new Vue({
el:'#demo2',
data:{
name:'',
names:['张三','李四','王五']
},
methods:{
addName:function () {
if(this.name.trim()){
this.names.push(this.name);
this.name = '';
}
},
removeName:function (index) {
this.names.splice(index,1)
}
}
});数据排序[升序降序]
<div id="demo3" class="container">
<h3>数据排序[升序降序]</h3>
<table class="table table-striped">
<thead>
<tr>
<th><a href="javascript:;" v-on:click="sortBy('name')">姓名</a></th>
<th><a href="javascript:;" v-on:click="sortBy('age')">年龄</a></th>
<th><a href="javascript:;" v-on:click="sortBy('sex')">性别</a></th>
</tr>
<tbody>
</thead>
<tr v-for="person in persons | orderBy sortKey order">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
</tr>
</tbody>
</table>
</div>var demo3 = new Vue({
el:'#demo3',
data:{
sortKey: '',
order: '',// 1升序 -1降序
persons: [
{ name:'张三',age:18,sex:'男' },
{ name:'李四',age:46,sex:'女' },
{ name:'王五',age:40,sex:'男' },
{ name:'赵六',age:58,sex:'男' }
]
},
methods:{
sortBy:function (sortKey) {
if(this.order == '' || this.order == -1){
//升序
this.order = 1;
}else{
//降序
this.order = -1;
}
this.sortKey = sortKey;
}
}
});v-show['显示'或'隐藏/display:none'] 和 v-if['显示'或'代码块删除/消失']
<div id="demo4" class="container">
<h3>v-show['显示'或'隐藏/display:none'] 和 v-if['显示'或'代码块删除/消失']</h3>
<h4>可以审查元素观察一下~</h4>
<h4>截断默认操作：</h4>
<h5>1. @submit.prevent / v-on:submit.prevent</h5>
<h5>2. function(e){ e.preventDefault() }</h5>
<form action="post.php" @submit.prevent="test">
<h5>v-show</h5>
<input type="text" v-model="username"><span class="error" v-show="!username"> 请输入用户名！</span><br/><br/>
<input type="password" v-model="password"><span class="error" v-show="!password"> 请输入密码！</span><br/>
<h5>v-if</h5>
<input type="text" v-model="username"><span class="error" v-if="!username"> 请输入用户名！</span><br/><br/>
<input type="password" v-model="password"><span class="error" v-if="!password"> 请输入密码！</span><br/><br/>
<input type="submit" v-show="username && password">
</form>
</div>var demo4 = new Vue({
el: '#demo4',
data:{
username: '',
password: ''
},
methods:{
test:function () {
alert('233');
}
}
});Vue.js组件化,代码重用
<div id="demo5" class="container">
<h3>Vue.js组件化,代码重用</h3>
<div id="likesORdislikes">
<counter heading="赞同" color="green"></counter>
<counter heading="反对" color="red"></counter>
</div>
<template id="counter-template">
<h4>{{ heading }}</h4>
<button class="btn" @click="count += 1" style="background: {{ color }}; width: 80px">{{ count }}</button>
</template>
</div>Vue.component('counter',{
template:'#counter-template',
props:['heading','color'],
data:function () {
return { count:0 };
}
});
var demo5 = new Vue({
el:'#demo5'
});computed（返回计算(判断)过后的数据）
<div id="demo6" class="container">
<h2>computed</h2>
<h4>用户等级：{{ level }}</h4>
<h4>用户名：{{ username }}</h4>
用户经验值：<input type="text" v-model="experience"> [100:初级,200:中级,300:高级]<br/><br/>
FirstName：<input type="text" v-model="firstname">
LastName：<input type="text" v-model="lastname">
</div>
var demo6 = new Vue({
el: '#demo6',
data:{
experience:110,
firstname:'Marvin',
lastname:'Jackson'
},
computed:{
level:function () {
if(this.experience < 100){
return '初级会员';
}else if( this.experience>=100 && this.experience < 200){
return '中级会员';
}else if( this.experience >= 200 ){
return '高级会员';
}else{
return '未获取到用户等级';
}
},
username:function () {
return this.firstname + ' ' + this.lastname;
}
}
});v-on:class(:class) 和 代码重用 和 动态props
<div id="demo7" class="container">
<h2>v-on:class(:class) 和 代码重用 和 动态props</h2>
<div id="tasksListContainer">
<Counter2 v-bind:list="tasks1">
</Counter2>
<Counter2 v-bind:list="tasks2">
</Counter2>
<Counter2 v-bind:list="[{something:'233333333',finish:true}]">
</Counter2>
</div>
<template id="tasks-template">
<h3>待办事项<span v-show="list.length">({{remaining}}/{{ list.length }})</span>：</h3>
<div v-model="tasks"></div>
<ul>
<li v-for="task in list">
<span v-bind:class="{'lineThrough':task.finish}" v-on:click="change(task)"><a href="javascript:;">{{ task.something }}</a></span>[<a href="javascript:;" v-on:click="deleteTask(task)">删除</a>]
</li>
</ul>
</template>
</div>Vue.component('Counter2',{
template:'#tasks-template',
props:['list'],
methods:{
change:function (task) {
task.finish = !task.finish;
},
deleteTask:function (task) {
this.list.$remove(task);
}
},
computed:{
remaining:function () {
return this.list.filter(function (task) {
return ! task.finish;
}).length;
}
}
});
var tasksListContainer = new Vue({
el:'#tasksListContainer',
data:{
tasks1:[
{something:'交资料',finish:true},
{something:'下午开会',finish:false},
{something:'买洗衣粉',finish:false}
],
tasks2:[
{something:'交水电费',finish:false},
{something:'充话费',finish:true},
{something:'买饲料',finish:false}
]
}
});
var demo7 = new Vue({
el:'#demo7'
});
Comments | NOTHING