Vue.js第三波，直接上代码
2016-10-20 00:00
253 查看
Vue.js第三波，直接上代码
必须要写代码才能快速熟悉，学到 v-if 的时候就把我整蒙了，看教程还要问度娘，多方面寻找答案，才能真正了解框架性能。
html部分 ↓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<div>{{message + 'Vue is awesome'}}</div>
<div>{{message.split('').reverse().join('')}}</div>
<input type="text" v-model="message"/>
<br />
<select v-model="selected" multiple>
<option selected>a</option>
<option>b</option>
<option>c</option>
</select>
<br />
<span>Selected: {{ selected | json }}</span>
<br />
<table class="table table-striped text-right">
<tr class="info">
<td>序号</td>
<td>书名</td>
<td>作者</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr class="success" v-for="book in books ">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<td><button class="btn btn-danger" @click="delBook(book)">删除</button></td>
</tr>
</table>
<button class="btn btn-success" @click="doSomething">doSomething</button>
<div id="add-book">
<legend>添加书籍</legend>
<div class="form-group">
<label for="">书名</label>
<input type="text" class="form-control" v-model="book.name"/>
</div>
<div class="form-group">
<label for="">作者</label>
<input type="text" class="form-control" v-model="book.author"/>
</div>
<div class="form-group">
<label for="">价格</label>
<input type="text" class="form-control" v-model="book.price"/>
</div>
<button class="btn btn-primary btn-block" @click="addBook()">添加</button>
<br />
</div>
<input type="text" v-model="newTodo" @keyup.enter="addTodo"/>
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button @click="removeTodo($index)">X</button>
</li>
</ul>
<div>
a = {{ a }}, b = {{ b }}
</div>
<input type="text" v-model="a"/>
<div>
{{ fullName }}
</div>
<div>
{{ allName }}
</div>
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }">
对象语法，传对象
</div>
<div v-bind:class="classObject">
对象语法，绑定数据里的对象
</div>
<div v-bind:class="[classA,classB]">
数组语法，传数组
</div>
<div v-bind:class="[classA, isA ? classB : '']">
数组语法，三元表达式
</div>
<div v-bind:class="[classA, { 'classB': isA, 'classC': isA }]">
当有多个条件class时，可以在数组语法中使用对象语法
</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
绑定内联样式，对象语法
</div>
<div :style="styleObject">
绑定内联样式，对象语法直接绑定一个样式对象
</div>
<div :style="[styleObjectA, styleObjectB]">
绑定内联样式，数组语法，多个样式对象应用到一个元素上
</div>
{{#if ok}}
<h1>Hello</h1>
{{if}}
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<template v-if="ok">
<h1 :style="[styleObjectB]">Title</h1>
<p :style="[styleObjectB]">Paragraph 1</p>
<p :style="[styleObjectB]">Paragraph 2</p>
</template>
<h1 v-show="ok">Hello!</h1>
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
<custom-component v-show="condition">警告组件</custom-component>
<p v-show="!condition" class="btn btn-primary btn-block">这可能也是一个警告组件</p>
<ul>
<li v-for="item in items" :style="styleObject">
{{ item.message }}
</li>
</ul>
<h1>v-for遍历对象，用$index</h1>
<ul>
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>
<div v-for="item of items">
{{ index }} {{ item.message}}
</div>
<ul>
<template v-for="item in items" track-by="id">
<li>
{{ item.message }}
<button class="btn btn-danger" @click="removeItem(item)">删除</button>
</li>
<li class="divider"></li>
</template>
</ul>
<h1>v-for遍历对象，除了$index,还可以用$key</h1>
<ul>
<li v-for="value in uname">
{{ $key }} : {{ value }}
</li>
</ul>
<div>
<h1>值域v-for</h1>
<span v-for="n in 10" :style="styleObjectB">{{ n }}</span>
</div>
</div>
</div>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
js部分 ↓
var vm = new Vue({
el: '#app',
data: {
message: 'Hello vue.js',
a: 1,
isA: true,
isB: false,
classObject: {
'class-a': false,
'class-b': true
},
classA: 'class-a',
classB: 'class-b',
classC: 'class-c',
firstName: 'Foo',
lastName: 'Bar',
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: '曹雪芹',
name: '红楼梦',
price: 32.0
},{
id: 2,
author: '施耐庵',
name: '水浒传',
price: 30.0
},{
id: 3,
author: '罗贯中',
name: '三国演义',
price: 24.0
},{
id: 4,
author: '吴承恩',
name: '西游记',
price: 20.0
}],
newTodo: '',
todos: [{
text: 'Add some todos'
}],
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'blue',
fontSize: '12px',
listStyle: 'none'
},
styleObjectA: {
background: '#f1f1f1'
},
styleObjectB: {
textAlign: 'center',
color: '#7eccf3',
fontWeight: 'bold'
},
ok: true,
items: [
{ id: 1, message: '列表渲染' },
{ id: 2, message: 'Foo' },
{ id: 3, message: 'Bar' }
],
parentMessage: 'Parent',
uname: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
},
methods: {
doSomething: function () {
window.location.href= 'http://www.jinxiaowang.cn'
},
addBook: function () {
this.book.id = this.books.length + 1;
this.books.push(this.book);
this.book = '';
},
delBook: function (book) {
this.books.$remove(book);
},
addTodo: function () {
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo = '';
}
},
removeTodo: function (index) {
this.todos.splice(index,1);
},
removeItem: function (item) {
this.items.$remove(item)
}
},
created: function () {
console.log('a is: ' + this.message);
},
computed: {
b: function () {
var x = parseInt(this.a, 10) + 2;
return x;
},
fullName: function () {
return this.firstName + ' ' + this.lastName;
},
allName: {
get: function () {
return this.firstName + ' ' + this.lastName;
},
set: function (nameValue) {
var names = nameValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1]
}
}
}
});
//vm.$watch('firstName', function (val) {
// this.fullName = val + ' ' + this.lastName;
//});
//vm.$watch('lastName',function (val) {
// this.fullName = val + ' ' + this.firstName;
//});
//vm.items = vm.items.filter(function (item) {
// return item.message.match(/Foo/)
//})
必须要写代码才能快速熟悉，学到 v-if 的时候就把我整蒙了，看教程还要问度娘，多方面寻找答案，才能真正了解框架性能。
html部分 ↓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<div>{{message + 'Vue is awesome'}}</div>
<div>{{message.split('').reverse().join('')}}</div>
<input type="text" v-model="message"/>
<br />
<select v-model="selected" multiple>
<option selected>a</option>
<option>b</option>
<option>c</option>
</select>
<br />
<span>Selected: {{ selected | json }}</span>
<br />
<table class="table table-striped text-right">
<tr class="info">
<td>序号</td>
<td>书名</td>
<td>作者</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr class="success" v-for="book in books ">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<td><button class="btn btn-danger" @click="delBook(book)">删除</button></td>
</tr>
</table>
<button class="btn btn-success" @click="doSomething">doSomething</button>
<div id="add-book">
<legend>添加书籍</legend>
<div class="form-group">
<label for="">书名</label>
<input type="text" class="form-control" v-model="book.name"/>
</div>
<div class="form-group">
<label for="">作者</label>
<input type="text" class="form-control" v-model="book.author"/>
</div>
<div class="form-group">
<label for="">价格</label>
<input type="text" class="form-control" v-model="book.price"/>
</div>
<button class="btn btn-primary btn-block" @click="addBook()">添加</button>
<br />
</div>
<input type="text" v-model="newTodo" @keyup.enter="addTodo"/>
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button @click="removeTodo($index)">X</button>
</li>
</ul>
<div>
a = {{ a }}, b = {{ b }}
</div>
<input type="text" v-model="a"/>
<div>
{{ fullName }}
</div>
<div>
{{ allName }}
</div>
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }">
对象语法，传对象
</div>
<div v-bind:class="classObject">
对象语法，绑定数据里的对象
</div>
<div v-bind:class="[classA,classB]">
数组语法，传数组
</div>
<div v-bind:class="[classA, isA ? classB : '']">
数组语法，三元表达式
</div>
<div v-bind:class="[classA, { 'classB': isA, 'classC': isA }]">
当有多个条件class时，可以在数组语法中使用对象语法
</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
绑定内联样式，对象语法
</div>
<div :style="styleObject">
绑定内联样式，对象语法直接绑定一个样式对象
</div>
<div :style="[styleObjectA, styleObjectB]">
绑定内联样式，数组语法，多个样式对象应用到一个元素上
</div>
{{#if ok}}
<h1>Hello</h1>
{{if}}
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<template v-if="ok">
<h1 :style="[styleObjectB]">Title</h1>
<p :style="[styleObjectB]">Paragraph 1</p>
<p :style="[styleObjectB]">Paragraph 2</p>
</template>
<h1 v-show="ok">Hello!</h1>
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
<custom-component v-show="condition">警告组件</custom-component>
<p v-show="!condition" class="btn btn-primary btn-block">这可能也是一个警告组件</p>
<ul>
<li v-for="item in items" :style="styleObject">
{{ item.message }}
</li>
</ul>
<h1>v-for遍历对象，用$index</h1>
<ul>
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>
<div v-for="item of items">
{{ index }} {{ item.message}}
</div>
<ul>
<template v-for="item in items" track-by="id">
<li>
{{ item.message }}
<button class="btn btn-danger" @click="removeItem(item)">删除</button>
</li>
<li class="divider"></li>
</template>
</ul>
<h1>v-for遍历对象，除了$index,还可以用$key</h1>
<ul>
<li v-for="value in uname">
{{ $key }} : {{ value }}
</li>
</ul>
<div>
<h1>值域v-for</h1>
<span v-for="n in 10" :style="styleObjectB">{{ n }}</span>
</div>
</div>
</div>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
js部分 ↓
var vm = new Vue({
el: '#app',
data: {
message: 'Hello vue.js',
a: 1,
isA: true,
isB: false,
classObject: {
'class-a': false,
'class-b': true
},
classA: 'class-a',
classB: 'class-b',
classC: 'class-c',
firstName: 'Foo',
lastName: 'Bar',
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: '曹雪芹',
name: '红楼梦',
price: 32.0
},{
id: 2,
author: '施耐庵',
name: '水浒传',
price: 30.0
},{
id: 3,
author: '罗贯中',
name: '三国演义',
price: 24.0
},{
id: 4,
author: '吴承恩',
name: '西游记',
price: 20.0
}],
newTodo: '',
todos: [{
text: 'Add some todos'
}],
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'blue',
fontSize: '12px',
listStyle: 'none'
},
styleObjectA: {
background: '#f1f1f1'
},
styleObjectB: {
textAlign: 'center',
color: '#7eccf3',
fontWeight: 'bold'
},
ok: true,
items: [
{ id: 1, message: '列表渲染' },
{ id: 2, message: 'Foo' },
{ id: 3, message: 'Bar' }
],
parentMessage: 'Parent',
uname: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
},
methods: {
doSomething: function () {
window.location.href= 'http://www.jinxiaowang.cn'
},
addBook: function () {
this.book.id = this.books.length + 1;
this.books.push(this.book);
this.book = '';
},
delBook: function (book) {
this.books.$remove(book);
},
addTodo: function () {
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo = '';
}
},
removeTodo: function (index) {
this.todos.splice(index,1);
},
removeItem: function (item) {
this.items.$remove(item)
}
},
created: function () {
console.log('a is: ' + this.message);
},
computed: {
b: function () {
var x = parseInt(this.a, 10) + 2;
return x;
},
fullName: function () {
return this.firstName + ' ' + this.lastName;
},
allName: {
get: function () {
return this.firstName + ' ' + this.lastName;
},
set: function (nameValue) {
var names = nameValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1]
}
}
}
});
//vm.$watch('firstName', function (val) {
// this.fullName = val + ' ' + this.lastName;
//});
//vm.$watch('lastName',function (val) {
// this.fullName = val + ' ' + this.firstName;
//});
//vm.items = vm.items.filter(function (item) {
// return item.message.match(/Foo/)
//})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在IE上直接编辑网页内容的js代码(IE地址栏js)
- 不弹出确认直接关闭窗口的JS代码
- 在Java中直接调用js代码
- 通过js引用外部脚本（嘿嘿，方便直接在浏览器上调试抓取代码）
- 不提示直接关闭网页窗口的JS代码
- js使用对象直接量创建对象的代码
- 在Java中直接调用js代码
- 不提示直接关闭网页窗口的JS示例代码
- 不提示直接关闭网页窗口的JS示例代码
- js颜色选择器的两种实现直接上代码（代码里有一种，附件里是另一种）
- 不弹出确认直接关闭窗口的JS代码
- js判断文本框不能输入特殊符号 （代码可直接用）
- 在Java中直接调用js代码
- 网页中通过js代码将直接关注某个微信账号
- JS 实现图片直接下载示例代码
- 在IE上直接编辑网页内容的js代码(IE地址栏js)
- 获取html绝对坐标 屏蔽Ctrl+V 按回车键直接登录 js代码
- [转载]获取html绝对坐标 屏蔽Ctrl+V 按回车键直接登录 js代码 .
- VBS一键配置VOIP脚本（其中包括VBS操作JS网页中的按钮事件--直接执行确认按钮中的脚本代码）
- 在Java中直接调用js代码（转载）