Vue2 第三天学习
阅读目录
1.计算属性
在模板内可以对一些属性的计算。如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<p>正序："{{ message }}"</p>
<p>倒序："{{ reversedMessage }}"</p>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})
</script>
</html>
输出结果为：
正序："Hello"
倒序："olleH"
如上我们提供的函数将用作属性 vm.reversedMessage 的 getter 。如下代码：
console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'
我们可以通过调用表达式中的 method 来达到同样的效果：代码如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<p>Reversed message: "{{ reversedMessage() }}"</p>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
console.log(vm.reversedMessage()) // -> 'olleH'
</script>
</html>
那么他们的区别是？
计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。也就是说只要message值没有发生变化，多次访问reversedMessage计算属性会立即返回之前的结果，不必再执行函数。
但是method方法只要发生重新渲染，总是会执行该函数。
2.Class 与 Style的绑定。
1. 绑定Html class --- 对象语法
我们可以传给 v-bind:class 一个对象，以动态的切换class。如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<div class="static" v-bind:class = "{ active: isActive, 'text-danger': hasError }"></div>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
});
</script>
</html>
代码被渲染为如下：
<div id="app"><div class="static active text-danger"></div></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 false ， class列表将变为 "static active "。
也可以直接绑定数据里的一个对象：如下代码
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<div class="static" v-bind:class="classObject"></div>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
});
</script>
</html>
渲染效果和上面一样。
也可以在这里绑定返回对象的计算属性。如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<div class="static" v-bind:class="classObject"></div>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
});
</script>
</html>
渲染后的代码如下：
<div id="app"><div class="static active"></div></div>
2. 数组语法
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<div class="static" v-bind:class="[activeClass, errorClass]"></div>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
});
</script>
</html>
被渲染为如下代码：
<div id="app"><div class="static active text-danger"></div></div>
3. 使用在组件上
例如，如果你声明了这个组件:
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '#app'
});
使用组件的时候 添加一些class，如下代码：
<div id="app">
<my-component class='baz boo'></my-component>
</div>
所有代码如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<my-component class='baz boo'></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript"> Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '#app'
});
</script>
</html>
HTML最终被渲染为：
<div id="app"><p class="foo bar baz boo">Hi</p></div>
同样的适用于绑定 HTML class :
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<my-component v-bind:class="{ active: isActive }"></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript"> Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
</html>
当isActive为true的时候，HTML最终被渲染成为如下代码：
<div id="app"><p class="foo bar active">Hi</p></div>
4. 级联内联样式
如下级联样式代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">11112222</div>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript"> Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30
}
});
</script>
</html>
页面被渲染为如下代码：
<div id="app"><div style="color: red; font-size: 30px;">11112222</div></div>
也可以绑定到一个样式对象通常更好，让模板更清晰：如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="app">
<div v-bind:style="styleObject">11112222</div>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript"> Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
fontSize: '22px'
}
}
});
</script>
</html>
代码被渲染成为如下：
<div id="app"><div style="color: red; font-size: 22px;">11112222</div></div>
3.列表渲染
3-1 v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
如下面代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<ul id='app'>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
items: [
{message: 'foo'},
{message: 'bar'}
]
}
});
</script>
</html>
页面代码被渲染为如下：
<ul id="app"><li>foo</li><li>bar</li></ul>
v-for 我们拥有对父作用域属性的完全访问权限 还支持一个可选的第二个参数为当前项的索引。
如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<ul id='app'>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
parentMessage: 'Parent',
items: [
{message: 'foo'},
{message: 'bar'}
]
}
});
</script>
</html>
页面被渲染为如下代码：
<ul id="app">
<li>Parent - 0 - foo</li>
<li>Parent - 1 - bar</li>
</ul>
可以用 of 替代 in 作为分隔符。
<div v-for="item of items"></div>
3-2 在template中也可以使用 v-for , 如下代码：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
3-3 对象迭代v-for
我们也可以用 v-for 通过一个对象的属性来迭代。
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<ul id='app'>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
object: {
f: 'kongzhi',
l: 'longen',
Age: 30
}
}
});
</script>
</html>
代码被渲染为：
<ul id="app">
<li>kongzhi</li>
<li>longen</li>
<li>30</li>
</ul>
可以提供第二个的参数为键名：如下代码：
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
3-4 整数的迭代
v-for 也可以取整数。如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<span v-for="n in 10">{{ n }}</span>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app'
});
</script>
</html>
页面代码被渲染为：
<div id="app">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
3-5 组件使用v-for
组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props. 如下代码：
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index">
</my-component>
下面是一个demo；页面上默认有3项列表数据，当用户在输入框输入值的时候 按enter键的时候 会增加一项，当然也可以点击删除x删除一项。
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<input
v-model='newTodoText'
v-on:keyup.enter='addNewTodo'
placeholder="Add a todo"
>
<ul>
<li
is='todo-item'
v-for="(todo, index) in todos"
v-bind:title='todo'
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('todo-item', {
template: '<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>',
props: ['title']
})
new Vue({
el: '#app',
data: {
newTodoText: '',
todos: [
'do the dishes',
'Take out the trash',
'Mow the lawn'
]
},
methods: {
addNewTodo: function() {
this.todos.push(this.newTodoText);
this.newTodoText = '';
}
}
});
</script>
</html>
4.事件处理器
4-1 v-on 监听事件 代码如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<button v-on:click="counter += 1">增加1</button>
<p>这个按钮被点击了 {{ counter }}次。</p>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</html>
4-2 方法事件处理器
直接把 JavaScript 代码写在 v-on 指令中是不可行的，比如当代码变得很复杂的时候，因此 v-on 可以接收一个定义的方法来调用。
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<button v-on:click="greet">Greet</button>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
name: 'vue'
},
methods: {
greet: function(event) {
alert('hello ' + this.name + '!'); // hello vue
// event 是原生的 DOM事件
alert(event.target.tagName); // BUTTON
}
}
})
</script>
</html>
也可以用 JavaScript 直接调用方法
example1.greet() // -> 'Hello Vue'
4-3 内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<button v-on:click="say(1)">1</button>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
methods: {
say: function(message) {
alert(message);
}
}
});
</script>
</html>
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<button v-on:click="warn('warn message', $event)">submit</button>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
methods: {
warn: function(message, event) {
console.log(event); // 打开控制台查看 打印出原生事件的所有信息
alert(message);
}
}
});
</script>
</html>
4-4 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()。尽管我们可以在 methods 中轻松实现这点。
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止点击事件冒泡 -->
<a v-on:click.stop='dothis'></a> <!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent='onSubmit'></form> <!-- 修饰符可以连着写 -->
<a v-on:click.stop.prevent='dothis'></a> <!-- 只有修饰符 -->
<form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 （2.14 新增）-->
<a v-on:click.once="doThis"></a>
4-5 按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
// Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
// 全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
5.表单控件绑定
v-model 负责监听用户的输入事件以更新数据。
5-1 input框如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</html>
5-2 多行文本 textrea
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<span>message is: </span>
<p>{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines" style="height: 100px"></textarea>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</html>
5-3 复选框-- 单个勾选框 逻辑值
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<input type="checkbox" v-model='checked' />
<label>{{ checked }}</label>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
checked: false
}
});
</script>
</html>
复选框-- 多个勾选框，绑定到同一个数组
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<input type="checkbox" value="Jack" v-model="checkedNames">
<label>Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label>John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label>Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
checkedNames: []
}
});
</script>
</html>
单选按钮
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<input type="radio" value="One" v-model="picked">
<label>One</label>
<br>
<input type="radio" value="Two" v-model="picked">
<label>Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
picked: ''
}
});
</script>
</html>
选择列表 -- 单选列表
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
selected: 'A'
}
});
</script>
</html>
多选列表（绑定到一个数组）：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
selected: []
}
});
</script>
</html>
动态选项，用 v-for 渲染：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'one', value: 'A' },
{ text: 'two', value: 'B' },
{ text: 'three', value: 'C' },
]
}
});
</script>
</html>
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
<input v-model.number="age" type="number">
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
Vue2 第三天学习的更多相关文章
- 20145213《Java程序设计》第三周学习总结
20145213<Java程序设计>第三周学习总结 教材学习内容总结 正所谓距离产生美,上周我还倾心于Java表面的基础语法.其简单的流程结构,屈指可数的基本类型分类,早已烂熟于心的运算符 ...
- 20145304 Java第三周学习报告
20145304 <Java程序设计>第三周学习总结 教材学习内容总结 1.定义类: 类定义时使用class关键词,建立实例要使用new关键词. 代码如下: /*定义类 书上例子 衣服的型 ...
- 20145330《Java程序设计》第三周学习总结
20145330 <Java程序设计>第三周学习总结 第三周知识的难度已经逐步上升,并且一周学习两章学习压力也逐渐加大,需要更高效率的来完成学习内容,合理安排时间. 类与对象 对象(Obj ...
- 20145337《Java程序设计》第三周学习总结
20145337 <Java程序设计>第三周学习总结 教材学习内容总结 类与对象 类与对象的关系:要产生对象必须先定义类,类是对象的设计图,对象是类的实例.我觉得在视频中对类与对象关系的描 ...
- 20145218 《Java程序设计》第三周学习总结
20145218 <Java程序设计>第三周学习总结 教材学习内容总结 定义类 编写程序要产生对象就要先定义类.类是对象的设计图,对象是类的实例.类定义时使用class关键词,建立实例时, ...
- 《Java程序设计》第三周学习总结
20145224-陈颢文 <Java程序设计>第三周学习总结 教材学习内容总结 一.定义类: ·类定义时使用class关键字,要对类中变量(值域成员/对象数据成员)行类型声明. class ...
- JDBC第三次学习
这是我的JDBC第三次学习了,在学习的过程中,老是会忘掉一些知识,不记下笔记实在不行啊! 使用JDBC调用存储过程 (1)关于如何使用Navicat(11.1.13) for MySQL如何创建存储过 ...
- 20155304 2016-2017-2 《Java程序设计》第三周学习总结
20155304 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 第四章 类与对象 定义: 对象(Object):存在的具体实体,具有明确的状态和行为. 类( ...
- 201521123038 《Java程序设计》 第三周学习总结
201521123038 <Java程序设计> 第三周学习总结 1. 本周学习总结 附大图链接 http://naotu.baidu.com/file/5774caa2be710afbc0 ...
随机推荐
- Matlab 根号的输入
二次根号: sqrt(a)或a^0.5 三次根号: x^(1/3)或者x.^(1/3) 根据x的数据结构类型 矩阵.数组需要.^
- 移动端meta整理
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- linux基础学习之软件安装以及常用命令
linux基础学习之软件安装以及常用命令 调用中央仓库: yum install wget 然后下载nodejs: wget https://nodejs.org/dist/v10.14.2/node ...
- git命令详解（ 四 ）
此篇为git命令详解的第四篇,话不多说,我们直接上知识点好吧 git Push 偏离的工作 gitPush: 此命令负责将你的变更上传到指定的远程仓库,并在远程仓库上合并你的新提交记录.一旦 git ...
- 一款超级炫酷的编辑代码的插件 Power Mode
今天偶尔发现了一款比较炫酷的插件,想让你们看看效果 打代码的时候会有非常炫酷的效果哟 因为我用的编辑器是VScode,所以我也只搞了搞VSCode中使用Power Mode的方法,如果你用的是别的编辑 ...
- 【读书笔记】iOS-Web应用程序的自动化测试
seleniumHQ:https://github.com/seleniumhq/selenium Appium:https://github.com/appium/appium 参考资料:<i ...
- 一. Redis 常用命令
键值相关命令 1. KETS 查询所有的key 127.0.0.1:6379> keys * 1) "tony"2) "hexu1"3) "he ...
- sql server全文索引使用中的小坑 （转载）
一.业务场景 我们在实际生产环境中遇到了这样一种需求,即需要检索一个父子关系的子树数据 估计大家也遇到过类似的场景,最典型的就是省市数据,其中path字段是按层级关系生成的行政区路径: 如果我们已知某 ...
- django模板语言之Template
当前端的一些数据需要后端传送过来并展示时,用到了django的模板语言,模板语言的作用就是,在后端把一些处理好的数据,通过模板语言所规定的格式,通过render渲染,放到前端页面固定的位置展示.这之间 ...
- 【PAT】B1056 组合数的和（15 分）
就看着代码量一直到没什么好说的了 #include<stdio.h> int main(){ int N,K;scanf("%d",&N); int sum=0 ...