Vue知识体系总结Vue入门(风之极陨杀)
Posted 哪 吒
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue知识体系总结Vue入门(风之极陨杀)相关的知识,希望对你有一定的参考价值。
在进行一门新的语言学习时,基础是最重要的点,只要你get到它,学习新技术只是时间的问题。
一、vue常用标签简介
1、v-for和@click实现点击赋予红色效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in girls"
v-bind:class="{active:currentIndex == index}"
@click="liClick(index)">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
girls: ['比比东','千仞雪','美杜莎','云韵','雅妃'],
currentIndex: 0
},
methods: {
liClick(index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>
2、合并两个字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{fullName}}</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
message: '哪吒',
firstName: '无情',
lastName:'冷血'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
3、计算属性的复杂操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{es62}}</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
girls: [
{name: '千仞雪',age:18},
{name: '云韵',age:20},
{name: '比比东',age:25},
{name: '美杜莎',age:22}
]
},
computed: {
ageSum: function () {
let sum = 0
let result = 0
for(let i = 0;i<this.girls.length;i++){
sum += this.girls[i].age
}
result = sum/this.girls.length;
return result
},
es6: function () {
let sum = 0
let result = 0
for(let i in this.girls){
sum += this.girls[i].age
}
result = sum/this.girls.length;
return result
},
es62: function () {
let sum = 0
let result = 0
for(let girl of this.girls){
sum += girl.age
}
result = sum/this.girls.length;
return result
}
}
})
</script>
</body>
</html>
4、var没有块级作用域,let有块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
message: '哪吒'
}
})
// 因为ES5前if和for都没有块级作用域,所以很多时候引入function的块级作用域
var btns = document.getElementsByTagName('button');
for(var i = 0;i<btns.length;i++){
(function (i) {
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击');
})
})(i)
}
const btns = document.getElementsByTagName('button')
for(let i = 0;i<btns.length;i++){
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击');
})
}
</script>
</body>
</html>
5、const 常量的定义
6、v-on的参数问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="btnClick(abc, $event)">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
message: '哪吒',
abc: 123
},
methods: {
btnClick(abc,event){
console.log(abc, event);
}
}
})
</script>
</body>
</html>
7、v-on修饰符
- stop - 调用 event.stopPropagation(),停止冒泡。
- prevent - 调用 event.preventDefault(),组织浏览器默认事件。
- capture - 添加事件侦听器时使用 capture 模式。
- self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- native - 监听组件根元素的原生事件。
- once - 只触发一次回调。
- left - (2.2.0) 只当点击鼠标左键时触发。
- right - (2.2.0) 只当点击鼠标右键时触发。
- middle - (2.2.0) 只当点击鼠标中键时触发。
- passive - (2.3.0) 以 { passive: true } 模式添加侦听器
8、v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
message: '哪吒',
isUser: true
}
})
</script>
</body>
</html>
注:通过key=username解决input复用问题,input复用机制是vue底层为了缓存而制定的策略。
9、v-show
10、v-for遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in user">{{item}}</li>
</ul>
<ul>
<li v-for="(key, value) in user">{{key}}-{{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
message: '哪吒',
user: {
name: '哪吒',
age: 18,
address: '大连'
}
}
})
</script>
</body>
</html>
key的作用主要是为了高效的更新虚拟DOM。
11、哪些数组的方法是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in girls" :key="item">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {//定义数据
message: '哪吒',
girls: [
'比比东','云韵','美杜莎','雅妃'
]
},
methods: {
// 响应式方法简介
btnClick(){
//1.push方法
this.girls.push('哪吒')
//2.pop():删除数组中的最后一个元素
this.girls.pop()
//3.shift():删除数组中的第一个元素
this.girls.shift()
//4.unshift():在数组最前面添加元素
this.girls.unshift('哪吒')
this.girls.unshift('CSDN','哪吒')
//5.splice():删除元素/插入元素/替换元素
//删除元素:第二个参数表示你要删除几个元素
//插入元素:第二个参数,传入0,后面加上要插入的元素
//替换元素:第二个参数,表示我们要替换几个元素,后面是用于替换前面元素的新元素
//splice(start)
this.girls.splice(2,2,'无情','冷血')
//6.sort()
this.girls.sort()
//7.reverse()
this.girls.reverse()
//8.注意:通过索引值修改数组中的元素,不是响应式的
this.girls[0] = '云芝'
//9.set(要修改的元素,索引值,修改后的值)
Vue.set(this.girls,0,'云芝啊')
}
}
})
</script>
</body>
</html>
非响应式“云芝”写入失败。
响应式,“云芝”写入成功
二、购物车综合案例
需求分析:通过动态加载数据,价格格式化展示,数量可增可减,可移除购物车,可清空购物车。
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div v-if="girls.length">
<table>
<thead>
<tr>
<th></th>
<th>名字</th>
<th>年龄</th>
<th>价格</th>
<th>数量</th>
<th>技能</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in girls">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)"
:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td>{{item.skill}}</td>
<td>
<button @click="removeHandler(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格:{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
2、index.js
const app = new Vue({
el: '#app',
data: {
girls: [
{
id: 1,
name: '比比东',
age: 18,
count: 1,
skill: '不死之身',
price: 100.00
},{
id: 2,
name: '千仞雪',
age: 20,
count: 1,
skill: '天使圣剑',
price: 25.00
},{
id: 3,
name: '美杜莎',
age: 17,
count: 1,
skill: '美杜莎的凝望',
price: 19.00
},{
id: 4,
name: '云韵',
age: 25,
count: 1,
skill: '风之极陨杀',
price: 1999.99
},{
id: 5,
name: '雅妃',
age: 21,
count: 1,
skill: '红衣诱惑',
price: 68.00
}
]
},
methods :{
increment(index){
this.girls[index].count++
},
decrement(index){
this.girls[index].count--
},
removeHandler(index){
this.girls.splice(index, 1)
}
},
computed: {
totalPrice(){
let totalPrice = 0;
for(let i=0;i<this.girls.length;i++){
totalPrice += this.girls[i].price * this.girls[i].count;
}
return totalPrice;
}
},
filters: {
showPrice(price) {
return '$' + price.toFixed(2)
}
}
})
3、style.css
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
4、实现效果
通过移除,清空购物车。
往期精彩内容:
以上是关于Vue知识体系总结Vue入门(风之极陨杀)的主要内容,如果未能解决你的问题,请参考以下文章