vue02 vue的基础使用
2022/7/10 23:52:59
本文主要是介绍vue02 vue的基础使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
vue的基础使用
1 style和class使用
# 属性指令控制style和class # class 可以等于 ：字符串，数组（用的多），对象 # style 可以等于 ：字符串，数组，对象（用的多）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
background-color: red;
font-size: 80px;
}
.green {
background-color: green;
font-size: 40px;
}
.yellow-back {
background-color: yellow;
}
.pink-back {
background-color: pink;
}
.size-40 {
font-size: 40px;
}
.size-100 {
font-size: 100px;
}
</style>
</head>
<body>
<div id="app">
<h1>class的使用</h1>
<button @click="handleClick">点我变色</button>
<hr>
<div :class="class_obj">
lqz is handsome!!!
</div>
<h1>style的使用</h1>
<button @click="handleClick2">点我变色</button>
<hr>
<div :style="style_obj">
lqz is handsome2222!!!
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
// class_str: 'yellow-back size-100',
// class_array: ['yellow-back',],
// class_obj: {'pink-back': true, 'size-40': false},
// style_str:'font-size: 60px;background-color: aqua'
// style_array: [{'font-size': '90px'}, {backgroundColor: 'aqua'}]
style_obj: {'font-size': '90px', backgroundColor: 'aqua'}
},
methods: {
handleClick() {
// this.class_obj = 'green'
// 点击让字体变大---数组
// this.class_array.push('size-100')
// 对象
this.class_obj['size-40'] = true
},
handleClick2() {
this.style_obj['backgroundColor'] = 'pink'
}
}
})
</script>
</html>
2 条件渲染
# v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
您的成绩是：
<p v-if="score>90">优秀</p>
<p v-else-if="score>=60 && score<=90">良好</p>
<p v-else>不及格</p>
</div>
</body>
<script>
var vm=new Vue({
el: '#app',
data: {
score:80
},
})
</script>
</html>
3 列表渲染之购物车显示不显示
# for 循环 ---》v-for='item in 数组/对象/数字'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>购物车</h1>
<button @click="handleClick" class="btn btn-danger">点击模拟加载数据</button>
<div v-if="good_list.length>0">
<table class="table table-hover">
<thead>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
<div v-else style="margin-top: 30px">
购物车空空如也
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: []
},
methods: {
handleClick() {
this.good_list = [
{name: '跑车', count: 2, price: 888888},
{name: '面包', count: 5, price: 3},
{name: '钢笔', count: 7, price: 8},
{name: '铅笔', count: 6, price: 2}
]
}
}
})
</script>
</html>
4 v-for遍历数字，数组，对象
# v-for 可以循环什么？
数字
字符串
数组
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>循环变量之数字</h1>
<p v-for="item in number">数字：{{item}}</p>
<h1>循环变量之字符串</h1>
<p v-for="item in name">字符串循环：{{item}}</p>
<h1>循环变量之数组--》注意循环时，索引是第二个变量</h1>
<p v-for="(item,index) in good_list">数组循环：第{{index}}个是{{item}}</p>
<h1>循环变量之对象---》循环key和value，第二个变量是key</h1>
<p v-for="(value,key) in obj">对象循环：key值是：{{key}},value值是：{{value}}</p>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// 数字
number:10,
// 字符串
name:'lqz is handsome',
//数组
good_list: [
{name: '跑车', count: 2, price: 888888},
{name: '面包', count: 5, price: 3},
{name: '钢笔', count: 7, price: 8},
{name: '铅笔', count: 6, price: 2}
],
// 对象
obj:{name:'lqz',age:19,gender:'男'}
},
})
</script>
</html>
5 key值解释和数组的检测与更新
5.1 v-for 循环，key值的解释
# 别人写v-for循环，在标签内部会有一个key属性：
-element-ui：饿了么团队开源的vue的ui组件库
-<el-carousel-item v-for="item in 4" :key="item">
vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，【属性值唯一】
页面更新之后，会加速DOM的替换（渲染）
:key="变量"
# 提高页面刷新速度
# 如果要加key属性，一定要设置成唯一的
# 要么干脆不加
5.2 数组的检测与更新
# 有时候，我们用一些数组，对象的方法更新数组或对象时，发现页面没有变化
#使用如下方式更新即可
handleClick5() {
// vm.$set(vm.obj,'xx','uu') 这个可以
Vue.set(vm.obj, 'gender', '未知')
alert('ss')
}
6 事件处理之过滤案例
# input 标签的事件
-change ：只要内容发生变化，就会触发
-blur ：失去焦点，会触发
-input ：只要输入内容，就触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>v-model</h1>
用户名1--input事件：<input type="text" v-model="name1" @input="handleInput"> --->{{name1}}
<br>
用户名2--change事件：<input type="text" v-model="name2" @change="handleChange"> --->{{name2}}
<br>
用户名3--blur事件：<input type="text" v-model="name3" @blur="handleBlur"> --->{{name3}}
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name1: '',
name2: '',
name3: ''
},
methods:{
handleInput(){
console.log(this.name1)
},
handleChange(){
console.log(this.name2)
},
handleBlur(){
console.log(this.name3)
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>过滤案例</h1>
<input type="text" v-model="myText" @input="handleInput">
<hr>
<p v-for="item in newList">{{item}}</p>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
this.newList = this.dataList.filter(item=> {
// 只要myText在数组中某个字符串中有，就留着，没有就不留
// if (item.indexOf(this.myText) >= 0) {
// return true
// } else {
// return false
// }
return item.indexOf(this.myText) >= 0
})
},
}
})
// 补充1：数组的过滤方法
// var l =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var ll=l.filter(function (item){
//
// return false
// })
// console.log(ll)
// 补充2：判断子字符串是否在字符串中 大于等于0，表示子字符串在字符串中
// var name='qq'
// var s='lqz is nb'
// var res=s.indexOf(name)
// console.log(res)
// 补充3 ，es6的箭头函数
// var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var ll = l.filter(item => {
// return false
// })
// console.log(ll)
// var obj = {
// 'f': function (item) {
// console.log(item)
// }
// }
// var obj = {
// 'f': item => 99
//
// }
// obj['f']('999')
//
//
// var f = function (item, key) {
// }
// var f1 = (item, key) => {
// }
</script>
</html>
7 事件处理之事件修饰符
# 修饰事件 .stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） .self 只处理自己的事件，子控件冒泡的事件不处理 .prevent 阻止a链接的跳转 .once 事件只会触发一次（适用于抽奖页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>事件修饰符</h1>
<ul @click.self="handleUl">
<li @click="handelLi">第一行</li>
<li>第二行</li>
</ul>
<hr>
<a href="http://www.baidu.com" @click.prevent="handlePrevent">点我看美女</a>
<hr>
<button @click.once="handleOnce">秒杀</button>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handelLi() {
alert('li被点了')
},
handleUl() {
alert('ul被点了')
},
handlePrevent(){
console.log('a标签被点了，不跳转')
// 跳转
location.href='http://www.cnblogs.com'
},
handleOnce(){
console.log('秒到了')
}
}
})
// 补充1：数组的过滤方法
// var l =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var ll=l.filter(function (item){
//
// return false
// })
// console.log(ll)
// 补充2：判断子字符串是否在字符串中 大于等于0，表示子字符串在字符串中
// var name='qq'
// var s='lqz is nb'
// var res=s.indexOf(name)
// console.log(res)
// 补充3 ，es6的箭头函数
// var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var ll = l.filter(item => {
// return false
// })
// console.log(ll)
// var obj = {
// 'f': function (item) {
// console.log(item)
// }
// }
// var obj = {
// 'f': item => 99
//
// }
// obj['f']('999')
//
//
// var f = function (item, key) {
// }
// var f1 = (item, key) => {
// }
</script>
</html>
8 数据的双向绑定
# input 标签的内容发生变化，js变量就发生变化，js变量变化，内容就变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>v-model</h1>
用户名：<input type="text" v-model="name"> --->{{name}}
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
})
</script>
</html>
这篇关于vue02 vue的基础使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
