Vue基础笔记2
2024-09-06 10:34:34
目录
1. 如何获取Vue对象中的成员？
第一种：this.$options.自定义的成员对象
第二种：this.$data.msg 获取的是vue对象中的data对象下的msg值
2. pre指定
场景：在vue控制的组件中，想要在组件中不被vue控制，就需要使用对应的标签就需要被v-pre修饰
3. for循环
<p v-for='v in arr'>
<span>{{ v }}</span>
</p>
<p v-for='{k,v} in arr'>
<span>{{ k + "" + v }}</span>
</p>
#
4. todolist
消息删除 ，增加
5. 分隔符
6. computed 计算后的
- 计算后的属性，不能与data下的key重复定义
- 计算后属性必须渲染后，绑定的方法才会生效
- 计算后的属性绑定的方法中任意的变量值更新，方法都会被调用
- 计算后属性为只读属性（不可写）
<head>
<meta charset="UTF-8">
<title>获取成员对象</title>
</head>
<body>
<div id="app">
姓：<input type="text" name="fisrt_name" v-model="f_name">
名: <input type="text" name="last_name" v-model="l_name">
<h1>{{ xyz }}</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
f_name: "",
l_name: "",
},
computed:{
xyz(){
console.log("111");
//当computed的函数中 有 包含data中的属性时，一旦属性值发生改变，那么对应的computed下对应的函数就会被执行。
return this.f_name + this.l_name
}
}
})
</script>
7. vue的生命周期（讲解不全）
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
8. watch 监听绑定的变量
<head>
<meta charset="UTF-8">
<title>获取成员对象</title>
</head>
<body>
<div id="app">
<input type="text" name="num" v-model="a">
<h1>{{ b }}</h1>
<h1>{{ c }}</h1>
<h1>{{ d }}</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
a: "",
b: "",
c: "",
},
watch:{
a(){
this.c = this.a * 10;
this.d = this.a * 20;
}
}
})
</script>
9. 组件（重点）
组件的组成部分：由 template + css + js 三部分组成(.vue文件)
特点：
- 组件具有复用性
- 复用组件时，数据要隔离
- 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别
组件的详细介绍：
- 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
- 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
- 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
- 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
- template只能解析一个根标签
<head>
<meta charset="UTF-8">
<title>获取成员对象</title>
<style>
.ad{
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<div id="naa">
<global-tag></global-tag>
</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 全局模板 不需要 注册，直接使用即可
Vue.component('global-tag',{
template: `
<div class="ad">
<h2>我是全局的模板</h2>
</div>
`
});
// 局部模板，需要在根组件中注册。
let localTag = {
template: `
<div class="ad">
<img src="img/mn.jpg" alt="">
<h4>美女</h4>
</div>
`
};
// 根组件
new Vue({
el: "#app",
data: {
msg: "message",
},
template: `
<div id="python">
<h1>我把根标签替换了</h1>
</div>
`,
// 将局部模板注册到根组件中
components:{
localTag,
}
})
</script>
10. 组件复用，数据隔离
除了根组件，数据都是函数的返回值的字典
<head>
<meta charset="UTF-8">
<title>获取成员对象</title>
<style>
.ad {
width: 200px;
padding: 5px;
margin: 5px;
box-shadow: 0 0 5px 0 gold;
float: left;
}
.ad img {
width: 100%;
}
.ad h4 {
margin: 0;
font: normal 20px/30px '微软雅黑';
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<local-tag></local-tag>
<global-tag></global-tag>
</div>
<div id="main">
<local-tag></local-tag>
<global-tag></global-tag>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 局部组件
let localTag = {
template: `
<div @click="click1" class="ad">
<img src="../img/mn.jpg" alt="">
<h4>美女被点了{{ num }}下</h4>
</div>
`,
data () {
return {
num: 0
}
},
methods: {
click1() {
this.num ++
}
},
};
//全局组件
Vue.component('global-tag',{
template: `
<div class="ad" @click="click2">
<img src="../img/mn.jpg" alt="">
<h4>共享{{ count }}次美女</h4>
</div>
`,
data() {
return {
count: 0
}
},
methods: {
click2() {
this.count ++
}
}
});
// 根组件app
new Vue({
el: "#app",
data: {
msg: "message",
},
components: {
localTag
}
});
// 根组件main
new Vue({
el: "#main",
data: {
msg: "message",
},
components: {
localTag,
}
})
</script>
特点：
- 子组件自己管理自己的数据，方法。
11. 组件信息 父 传 子
<head>
<meta charset="UTF-8">
<title>获取成员对象</title>
<style>
.ad {
width: 200px;
padding: 5px;
margin: 5px;
box-shadow: 0 0 5px 0 gold;
float: left;
}
.ad img {
width: 100%;
}
.ad h4 {
margin: 0;
font: normal 20px/30px '微软雅黑';
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//局部变量
let localTag = {
props: ['ad_dic'],
template: `
<div>
<img :src="ad_dic.img" alt="">
<h4>{{ ad_dic.title }}</h4>
</div>
`
};
let ads = [
{
'img': '../img/001.png',
'title': '小猫'
},
{
'img': '../img/002.png',
'title': '黄蛋'
},
{
'img': '../img/003.png',
'title': '蓝蛋'
},
{
'img': '../img/004.png',
'title': '短腿'
},
];
new Vue({
el: "#app",
data: {
msg: "message",
ads: ads,
},
components: {
localTag,
},
})
</script>
总结：
- 父组件与子组件进行数据交换时，是通过循环遍历数据ad后，然后利用子组件自定义的属性ad_dic将ad的值赋值给ad_dic
- 赋值后，通过子组件的props成员属性，可以拿到对应的子组件属性指令，这样就等同于拿到了ad的值。
- 在赋值给子组件下的其他标签时，如果是赋值给属性就一定要加上“:”，这样才能被Vue管理。如果是插值表达式，直接使用即可。
12. 组件信息 子 传 父
<head>
<meta charset="UTF-8">
<title>获取成员对象</title>
<style>
body {
font-size: 30px;
}
li:hover {
color: orange;
cursor: pointer;
}
.del:hover {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" name="info" v-model="msg">
<button @click="down_btn"> 提交 </button>
</p>
<ul>
<msg-tag :notice="info" :index="i" v-for="(info,i) in infos" :key="info" @del_action="del_li"></msg-tag>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
let msgTag = {
props: ['notice','index'],
template: `
<li>
<span @click="del_fn" class="del">X</span>
<span> {{ notice }} </span>
</li>
`,
methods: {
del_fn(){
this.$emit('del_action', this.index)
},
}
};
new Vue({
el: "#app",
data: {
msg: "",
infos: JSON.parse(sessionStorage.infos||'[]'),
},
components:{
msgTag
},
methods: {
down_btn(){
if(this.msg){
this.infos.unshift(this.msg);
this.msg = '';
sessionStorage.infos = JSON.stringify(this.infos)
}
},
del_li(index) {
console.log(index);
console.log(111);
this.infos.splice(index, 1);
sessionStorage.infos = JSON.stringify(this.infos);
console.log(sessionStorage.infos);
}
}
})
</script>
总结：
- 父组件先将数据传给子组件，通过11中的示例进行传输
- 子组件msgTag在删除数据时，需要将数据提交给父组件app，然后由父组件对数据进行删除。详细流程为：
- 子组件需要在自己的标签中自定义一个事件（del_action，属性名可随意取），注意该属性需要加@符号，表示被Vue管理
- @del_action="del_li",对应的del_li变量由父组件提供，注意该变量是一个事件。
- 子组件向父组件提交数据时使用的方法为：this.$emit('del_action', this.index)，this.index为参数。
- 最后对数据的处理逻辑都在父组件app的del_li方法中处理
最新文章
- Where is the Global.asax.cs file
- Linux字符串替换一例：根据IP地址获取指定内容
- ERP_Oracle Erp R12.2的新技术特点（概念）
- vim变ide
- poj2299解题报告（归并排序求逆序数）
- rpm与yum命令的初步认识
- Ｗeb Application的目录结构
- 腾讯云数据库团队：MySQL AHI 实现解析
- Blob分析--粘连颗粒检测 基于距离变换的分水岭区域分割 盆地与原连通域求交集
- JVM 字节码（四）静态方法、构造代码、this 以及 synchronized 关键字
- Java第09次实验(IO流)
- CSS学习总结1：CSS样式
- Android Fragment的用法（二）
- 学习6__STM32--SPI外设之中断收发---
- [vs2013]远程服务器调试
- Android Service总结01 目录
- CentOS常用命令、快照、克隆大揭秘
- Effective C++ 条款08：别让异常逃离析构函数
- 系统性能优化- Session丢失
- IDEA 部署项目的时候出错：Jar not loaded错误