发表于： 2023-05-11 21:28:20
0 255
vue知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>姓名案例_计算属性简写</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
computed和watch之间的区别:
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数.
这样this的指向才是vm 或 组件实例对象。
-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br></br>
名：<input type="text" v-model="lastName"> <br></br>
姓名：<span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
firstName:'张',
lastName: '三',
fullName: '张-三'
},
watch:{
firstName:{
handler(newValue){
// setTimeout(() => {
// this.fullName = newValue + '-' + this.lastName
// }, 1000);
this.fullName = newValue + '-' + this.lastName
}
},
lastName:{
handler(newValue){
this.fullName = this.firstName + '-' + newValue
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绑定样式</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
<style>
.basiv{
width: 300px;
height: 50px;
border: 1px solid #333;
}
.happy{
background-color: red;
border: 2px solid yellow;
}
.sad{
background-color: #e3e3e3;
border: 2px solid green;
}
.normal{
background-color: skyblue;
border: 2px solid rebeccapurple;
}
.atguigu1{
background-color: skyblue;
}
.atguigu2{
font-size: 30px;
}
.atguigu3{
border-radius: 20px;
}
</style>
</head>
<body>
<!--
绑定样式:
1。class样式
写法:class="xxx”xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2。style样式
:style="{fontsize: xxx]"其中xxx是动态值
:style="[a,b]"其中a、b是样式对象。
-->
<div id="root">
<!-- 绑定class样式 字符串写法 适用于：样式的类名不确定 需要动态指定 -->
<div class="basiv" :class="mood" @click="changeMood">{{name}}</div> <br></br>
<!-- 绑定class样式 数组写法 适用于：要绑定的样式个数不确定，名字也不确定 -->
<div class="basiv" :class="arr">{{name}}</div> <br></br>
<!-- 绑定class样式 对象写法 适用于：要绑定的样式个数确定，名字也确定,但要动态决定用不用 -->
<div class="basiv" :class="obj">{{name}}</div> <br></br>
<!-- 绑定class样式 对象写法 -->
<div class="basiv" :style="styleObj">{{name}}</div> <br></br>
<!-- 绑定class样式 数组写法 -->
<div class="basiv" :style="styleArr">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院',
mood: 'normal',
arr: ['atguigu1','atguigu2','atguigu3'],
obj:{
atguigu1:false,
atguigu2:false,
atguigu3:true
},
styleObj:{
fontSize: '40px',
color:'red',
backgroundColor:'orange'
},
styleArr:[
{
fontSize:'40px',
color:'blue'
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
// this.mood = 'happy'
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>条件渲染</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
条件渲染:
1.v-if
写法:
(1).v-if="表达式"
(2)v-else-if="表达式"
(3).V-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
2.V-show
写法:v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
-->
<div id="root">
<h2>当前n的值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用 v-show 做条件渲染 -->
<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
<!-- 使用 v-if 做条件渲染 -->
<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
<div v-if=" n === 3">周星驰</div>
<div v-if=" n === 3">彭于晏</div>
<div v-if=" n === 3">胡歌</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院',
n:0
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基本列表</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<div id="root">
<!--
-for指令
1.用于展示列表数据
2.语法: v-for="(item， index) in xxx” :key="yyy"
3.可遍历: 数组、对象、字符串 (用的很少)、指定次数 (用的很少)
-->
<!-- 遍历数组 -->
<h2>人员列表 (遍历数组)</h2>
<ul>
<li v-for="p in persons" :key="p.id">
{{p.name}} - {{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息 (遍历对象)</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{value}} - {{k}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串 (用得少)</h2>
<ul>
<li v-for="(char,index) in str" :key="index">
{{char}} - {{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数 (用得少)</h2>
<ul>
<li v-for="(number,index) in 5" :key="index">
{{index}} - {{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
persons: [
{ id: 001, name: '张三', age: 18 },
{ id: 002, name: '李四', age: 19 },
{ id: 003, name: '王五', age: 20 }
],
car: {
name: '奥迪',
price: '70万',
color: '黑色'
},
str:'hello'
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>key的原理</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<div id="root">
<!--
面试题: react、vue中的key有什么作用? (key的内部原理)
1。虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]
随后Vue进行[新虚拟DOM] 与[旧虚拟DOM] 的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:@.若虚拟DOM中内容没变，直接使用之前的真实DOM!@.
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。
3。用index作为key可能会引发的问题:
1。若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==>
界面效果没问题，但效率低。
2。如果结构中还包含输入类的DOM:会产生错误DOM更新 ==> 界面有问题。
4。开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值.
2,如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示.
-->
<!-- 遍历数组 -->
<h2>人员列表 (遍历数组)</h2>
<ul>
<button @click.once="add" >点击添加</button>
<li v-for="p in persons" :key="p.id">
{{p.name}} - {{p.age}}
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
persons: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 }
],
},
methods: {
add(){
const p = {id:'004',name:'老王',age:40}
this.persons.push(p)
}
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表过滤</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="p in filPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//用watch实现
//#region
// new Vue({
// el: '#root',
// data: {
// keyWord:'',
// persons: [
// { id: 001, name: '马冬梅', age: 19,sex:'女' },
// { id: 002, name: '周冬雨', age: 20,sex:'女' },
// { id: 003, name: '周杰伦', age: 21,sex:'男' },
// { id: 004, name: '温兆伦', age: 22,sex:'男' }
// ],
// filPersons:[]
// },
// watch:{
// keyWord:{
// //immediate:true; 立即执行,当刷新页面时会立即执行一次handler函数
// immediate:true,
// handler(val){
// // console.log('keyWord被改变了',val)
// // filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
// this.filPersons = this.persons.filter((p)=>{
// // indexOf 数组中要查找的元素
// return p.name.indexOf(val) !== -1
// })
// }
// }
// }
// })
//#endregion
//用computed实现
new Vue({
el: '#root',
data: {
keyWord:'',
persons: [
{ id: 001, name: '马冬梅', age: 19,sex:'女' },
{ id: 002, name: '周冬雨', age: 20,sex:'女' },
{ id: 003, name: '周杰伦', age: 21,sex:'男' },
{ id: 004, name: '温兆伦', age: 22,sex:'男' }
]
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
</body>
</html>
返回列表
评论