内容概览
- class与style
- 条件渲染
- 列表渲染
- 双向数据绑定
- input的事件处理
class与style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.colour {
background-color: red;
}
.typeface {
font-size: 60px;
}
</style>
</head>
<body>
<div id="app">
<h1>class的使用</h1>
<div :class="cls">
class
</div>
<hr>
<h1>style的使用</h1>
<div :style="sty">
style
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// // class的字符串写法
cls: 'colour typeface',
// // class的数组写法(推荐)
cls: ['colour', 'typeface'],
// // class的对象写法
cls: {'colour': false, 'typeface': true},
// style的字符串写法
sty: 'background-color: red; font-size: 20px',
// style的数组写法,注意需要加引号,或者使用驼峰体
sty: [{'background-color': 'red'}, {fontSize: '30px'}],
// style的对象写法(推荐)
sty: {backgroundColor: 'red', fontSize: '80px'}
}
})
</script>
</html>
条件渲染
写在标签上，控制标签的显示与不显示(if判断)
语法结构
<div v-if='布尔值/运算后是布尔值'></div>
<div v-else-if='布尔值/运算后是布尔值'></div>
<div v-else></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>条件渲染</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=60 && score<80">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
}
})
</script>
</html>
列表渲染
v-for：放在标签上，根据数据循环显示多个当前标签
语法结构
<div v-for='i in 循环数据'></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>列表渲染</h1>
<!--点击后加载数据-->
<button @click="handleClick" class="btn btn-success">查看购物车</button>
<!--当商品列表中有数据才展示,否则不展示表格-->
<div v-if="goodList.length>0">
<table class="table table-bordered">
<thead>
<tr>
<th>商品id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList"> <!--将变量中的数据循环取出-->
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goodList: []
},
methods: {
handleClick() {
// 假设为后端返回的数据
this.goodList = [{id: 1, name: '钢笔', price: '8元', count: 10},
{id: 2, name: '铅笔', price: '2元', count: 20},
{id: 3, name: '苹果', price: '3元', count: 15},
{id: 4, name: '香蕉', price: '5元', count: 30},]
}
}
})
</script>
</html>
v-for循环数字、字符串、数组、对象
<div id="app">
<div v-for="(n,i) in 5">索引：{{i}} 数字：{{n}}</div>
<!--如果是数字：n就是从1开始的一个个数字,i就是索引-->
<hr>
<div v-for="(n,i) in 'hello vue'">索引：{{i}} 字符：{{n}}</div>
<!--如果是字符串：n就是一个个字符,i就是索引-->
<hr>
<div v-for="(n,i) in ['a', 'b','c']">索引：{{i}} 单个元素：{{n}}</div>
<!--如果是数组：n就是数组的一个个元素,i就是索引-->
<hr>
<div v-for="(n, i) in {name:'小明', age:18}">key：{{i}} value：{{n}}</div>
<!--如果是对象：n就是一个个value的值，i就是一个个key-->
</div>
<!--每次循环的标签上，一般都会带一个属性 :key='值必须唯一'
为了使虚拟dom的替换效率更高-->
<tr v-for="good in goodList" :key="good.id">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
数据的检测与更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数组的检测与更新</h1>
<button @click="handleClick">点击添加一个</button>
<button @click="handleClick1">点击添加多个</button>
<div v-for="i in listMsg">{{i}}</div>
<hr>
<h1>对象的检测与更新</h1>
<button @click="handleClick2">点击添加身高</button>
<div v-for="(v,k) in obj">{{k}}：{{v}}</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
listMsg: ['aaa', 'bbb', 'ccc'],
obj: {name: '小明', age: '15'}
},
methods: {
handleClick() {
this.listMsg.push('ddd') // 点击后正常添加
},
handleClick1() {
// this.listMsg.concat(['ddd','eee','fff']) // 点击没有变化
this.listMsg = this.listMsg.concat(['ddd', 'eee', 'fff']) // 不会直接修改变量,而是将添加后的值返回
},
handleClick2() {
// this.obj.height = '180' // 监控不到变化
// console.log(this.obj) // 通过打印能看到已经添加成功
Vue.set(this.obj, 'height', '180') // 可以监控到变化
// 使用Vue.set还可以通过索引给数组添加(替换)数据
// Vue.set(this.listMsg, 0, 'ggg')
}
}
})
</script>
</html>
双向数据绑定
使用属性指令绑定 value=‘变量’ 是数据的单向绑定
使用 v-model=‘变量’ 是数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数据单向绑定</h1>
<p>name：<input type="text" :value="name"></p>
<p>password：<input type="password" :value="password"></p>
<!--使用属性指令是单向绑定，可以通过变量控制input框内的值;无法通过往input框输入数据改变变量的值-->
<h1>数据双向绑定</h1>
<p>name1：<input type="text" v-model="name1"></p>
<p>password1：<input type="password" v-model="password1"></p>
<!--使用v-model可以实现双向绑定;既可以通过变量控制input框,也可以通过input框控制变量-->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
password: '',
name1: '',
password1: '',
},
})
</script>
</html>
input的事件处理
input也有很多事件
blur：失去焦点触发
change：文本域变化触发
input：输入触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>input的事件处理</h1>
<h2>blur</h2>
<input type="text" v-model="name1" @blur="handleBlur">
<h2>change</h2>
<input type="text" v-model="name2" @change="handleChange">
<h2>input</h2>
<input type="text" v-model="name3" @input="handleInput">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name1: '',
name2: '',
name3: '',
},
methods: {
handleBlur() {
console.log('失去焦点', this.name1)
},
handleChange() {
console.log('文本变化', this.name2)
},
handleInput() {
console.log('输入文本', this.name3)
},
}
})
</script>
</html>
补充知识
<script>
1. 数组过滤方法，内置的
var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
'csrf',
'd',
'dddd',
]
// filter，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
// 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
l = l.filter(function (item) {
console.log('进来一个值：',item)
return false
})
console.log(l) // 由于直接返回的false,所以l为空
2. 判断子字符串是否在字符串中
var s='tttatom'
var a ='a'
console.log(s.indexOf(a)>=0) // indexOf查找s中a的索引位置,如果没有返回-1;所以大于等于0就代表s字符串中存在a
3. es6的语法: 模板字符串``、对象的简写、箭头函数
var f = function(){console.log('执行函数')}
3.1 不带参数的箭头函数
var f = () => {console.log('执行函数')}
f()
3.2 带参数没有返回值的箭头函数
var f = arguments => {console.log('执行函数')} // 可以不加括号直接写参数
f()
3.3 带多个参数没有返回值的箭头函数
var f = (name, age) => {console.log('执行函数')} // 多个参数则需要使用括号
f()
3.4 带一个参数,函数体代码只有一行return
var f = arguments => arguments+'dddd'
f()
3.5 箭头函数的指向,箭头函数没有自己的this,会用上一层的this
var obj = {
f: function () {
console.log('匿名函数的this', this)
}, // 打印的obj对象
f1: () => {
console.log('箭头函数的this', this)
} // 打印的window
}
obj.f()
obj.f1()
</script>
过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<p><input type="text" v-model="search" placeholder="输入要搜索的内容" @input="handleSearch"></p>
<!--因为每输入一个字都需要查询符合的数据,所以使用input-->
<ul>
<li v-for="itme in alterDataList">{{itme}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd',],
// 过滤不能修改本身数据,否则删除后数据也不存在,需要使用另一个数据保存过滤后的数据
alterDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd',],
},
methods: {
handleSearch() {
// // 不用箭头函数的写法
// var _this = this // 由于函数的指向问题,需要提前准备好this
// this.alterDataList = this.dataList.filter(function(item){
// console.log(this) // 函数内的this是window对象
// // 判断this.search是否在item中，如果在保留，return true，如果不在返回false
// if (item.indexOf(_this.search)>=0){
// return true
// }else {
// return false
// }
// })
// 使用箭头函数的简写方法
this.alterDataList = this.dataList.filter(itme => itme.indexOf(this.search) >= 0)
}
}
})
</script>
</html>
事件修饰符
.stop：只处理自己的事件，不会向父控件冒泡
.self：只处理自己的事件，子控件冒泡的时间不处理
.prevent：阻止a链接的跳转
.once：事件只会触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件修饰符</h1>
<h2>通过stop阻止事件冒泡</h2>
<div @click="handleClick">父div
<div @click.stop="handleClick1">子div1</div>
<div @click="handleClick2">子div2</div>
</div>
<h2>通过self阻止事件冒泡</h2>
<div @click.self="handleClick">父div
<div @click="handleClick1">子div1</div>
<div @click="handleClick2">子div2</div>
</div>
<h2>阻止a标签跳转</h2>
<a href="http://www.baidu.com" @click.prevent="handleA">点击</a>
<h2>只执行一次事件</h2>
<button @click.once="handleOnce">抢购</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick() {
console.log('父div')
},
handleClick1() {
console.log('子div1')
},
handleClick2() {
console.log('子div2')
},
handleA() {
console.log('a标签')
},
handleOnce() {
console.log('抢购')
}
}
})
</script>
</html>
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="search" placeholder="输入搜索内容" @keyup.enter="handleUp">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {search: ''},
methods: {
handleUp(event) {
// console.log(event.code) // 通过event可以查看到按下的是什么键
// if (event.code === 'Enter'){
// console.log('回车被按了')
// }
console.log('回车被按了') // 通过按键修饰符,指定按某个键才会执行事件
}
}
})
</script>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
