文章目录
style属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 对象语法 -->
<span v-bind:style="{fontSize:fontSize, color:color}">{{message}}</span>
<span :style="baseStyle">{{tip}}</span>
<!-- 数组语法 -->
<p :style="[baseStyle1, baseStyle2]">
style属性的绑定
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello v-bind.',
tip:'v-bind的简写：:',
fontSize:'50px',
color:'red',
baseStyle:{
fontSize:'50px',
color:'blue'
},
baseStyle1:{
fontSize:'50px',
},
baseStyle2:{
color:'green'
}
}
})
</script>
</body>
</html>
事件处理
事件处理方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="greet">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'Hello Vue.js'
},
methods:{
greet(event){
/* this在方法里指向当前Vue实例 */
console.log(this.name);
if(event) {
console.log(event.target.tagName);
// BUTTON
}
}
}
})
</script>
</body>
</html>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<form action="#" method="post" @submit="warn('Form cannot be submitted yet.',$event)">
<input type="text" name="username"><br>
<input type="submit" value="提交"/>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
warn(message, event){
if(event) {
event.preventDefault();
}
console.log(message);
}
}
})
</script>
</body>
</html>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#outer {
width: 300px;
height: 200px;
background-color: red;
}
#inner {
width: 150px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<div id="outer" @click="show">
<div id="inner" @click.stop="dothis">
<!-- 当不添加事件修饰符.stop时，点击inner默认会触发show方法 -->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
dothis() {
console.log("inner");
},
show() {
console.log("outer");
}
}
})
</script>
</body>
</html>
阻止默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<form action="#" method="post" @submit.prevent="onSubmit">
<input type="text" name="username">
<input type="submit" value="提交"/>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
onSubmit() {
console.log("表单提交");
}
}
})
</script>
</body>
</html>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
事件触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<a :href="url" target="_blank" @click.once="doThis">跳转到哔哩哔哩</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
url:'https://www.bilibili.com'
},
methods:{
doThis() {
console.log("我只会执行一次.");
}
}
})
</script>
</body>
</html>
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.enter="submit">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'按键修饰符enter'
},
methods:{
submit() {
console.log(this.name);
}
}
})
</script>
</body>
</html>
条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!!!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
awesome:true
}
})
</script>
</body>
</html>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 80">良好</span>
<span v-else-if="score >= 60">及格</span>
<span v-else>不及格</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
score:80
}
})
</script>
</body>
</html>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样。
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#demo{
width: 200px;
height: 100px;
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div id="app">
<div id="demo" v-show="flag">
</div>
<button @click="flag=!flag">显示/隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
</body>
</html>
列表渲染
遍历数组
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in films">{{index}}---{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
films:['星际穿越','复仇者联盟','小丑','白宫陷落']
}
})
</script>
</body>
</html>
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<div v-for="item of items">{{item}}</div>
遍历对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-for="(value, name, index) in object">
{{index}}---{{name}}---{{value}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</body>
</html>
数组更新检测
使用数组的下面这些方法会触发视图的更新。
push数组尾部添加元素pop数组尾部删除元素shift数组头部删除元素unshift数组头部添加元素splice添加/删除元素sort数组排序reverse数组元素反转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ol>
<li v-for="item of books">{{item}}</li>
</ol>
<button v-on:click="btnClick()">button</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: ['百年孤独', '平凡的世界', '白夜行', '时间简史'],
},
methods: {
btnClick() {
//1、push()
this.books.push('aaa');
//2、通过索引值修改数组的元素不是响应式
//this.books[0] = '三体';
//3、pop():删除数组中最后一个元素
this.books.pop();
//4、shift():删除数组第一个元素
this.books.shift();
//5、unshift():在数组的头部添加元素
this.books.unshift('三体');
/* 三体、平凡的世界、白夜行、时间简史 */
//6、splice():删除元素、插入元素、替换元素
//splice(起始元素下标，删除元素的个数，添加元素1,添加元素2,...)
this.books.splice(0, 2); /* 从下标为0的元素开始，删除两个元素 */
/* 白夜行、时间简史 */
this.books.splice(1, 0, '三体', '红楼梦'); /* 从下标为1的元素开始，不删除元素，添加'三体'和'红楼梦' */
/* 白夜行、三体、红楼梦、时间简史 */
this.books.splice(2, 2, '忏悔录'); /* 从下标为2的元素开始，删除两个元素，添加'忏悔录' */
/* 白夜行、三体、忏悔录 */
//7、sort():排序
//this.books.sort();
//8、reverse():反转
this.books.reverse();
/* 忏悔录、三体、白夜行 */
}
}
});
</script>
</body>
</html>
循环案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in students">
{{index}}---{{item.name}}---{{item.age}}---{{item.gender}}
<a href="#" @click.prevent="del(index, item.name)">删除</a>
<a href="#" @click.prevent='update(index, {
id:4,
name:"赵六",
age:26,
gender:"男"
})'>修改</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
students:[
{
id:1,
name:'张三',
age:23,
gender:'男'
},
{
id:2,
name:'李四',
age:24,
gender:'男'
},
{
id:3,
name:'王五',
age:25,
gender:'男'
}
]
},
methods:{
del(index, name) {
if(window.confirm("你确定删除" + name + "吗?")) {
this.students.splice(index,1);
}
},
update(index, item) {
if(window.confirm("你确定更新" + name + "吗?")) {
this.students.splice(index, 1, item);
}
}
}
})
</script>
</body>
</html>