Vue基础笔记2
目录
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方法中处理
Vue基础笔记2的更多相关文章
- vue 基础笔记
Vue01笔记 ES6模块使用和新的函数声明方式 a) Import 一定不能放在函数内, 建议放在上方 b) Export 除了声明式的以外, 尽量放在代码的下方 Import {name,age} ...
- Vue基础笔记4
路由传参 第一种 router.js { path: '/course/detail/:pk/', name: 'course-detail', component: CourseDetail } 传 ...
- Vue基础笔记3
插槽指令 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- vue基础笔记
目录 Vue 渐进式 JavaScript 框架 一.走进Vue 二.Vue实例 三.生命周期钩子 四.Vue指令 五.组件 六.Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue.js笔记总结
一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...
- Vue:实践学习笔记(1)——快速使用
Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- Windows下解决github push failed (remote: Permission to userA/XXXX.git denied to userB.) 上传gitHub失败报错
Windows环境下解决 github push failed (remote: Permission to userA/XXXX.git denied to userB.) · 初学GitHub的朋 ...
- 题解【洛谷P1314】[NOIP2011]聪明的质监员
题面 题解 不难发现,\(W\)增大时,\(Y\)值会随之减小. 于是考虑二分\(W\). 如何\(\mathcal{O}(N)check?\) 每一次前缀和记录一下\(1-i\)之间\(w_i \g ...
- 安装python3并新建python3的虚拟环境
安装依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel -y 下载P ...
- DTU DeepLearning: exercise 6
Does batch_size have any affects in results quality? how to set the optimal batch size and number ...
- python pymysql 基本使用
from pymysql import * # 1.创建连接数据库 conn = connect(host="localhost", port=3306, user="r ...
- python lambda ，map详解
lambda 匿名函数 # 普通定义函数 def func1(x,y): return x+y # 执行函数 print(func(1,2)) # 如果此函数只调用一次,或者功能简单,此方法就显得笨拙 ...
- <<甄嬛传>>后感
2020年疫情和休假的时间里,刷了几部喜欢的电视剧,从<好先生>孙红雷和车晓的现代剧,到刷了至少6遍的<新三国>后,一直想了解司马懿和曹丕,接着就到了<大军师司马懿之军师 ...
- codeforces 1288D. Minimax Problem（二分）
链接:https://codeforces.com/contest/1288/problem/D D. Minimax Problem 题意:给定n个数组,长度为m,从n中数组挑选两个数组,两个数组中 ...
- C++索引从0开始的堆排序算法实现
更新2019年11月4日 04:26:35 睡不着觉起来寻思寻思干点啥吧,好像好久没写堆排了.于是写了个索引从0开始的堆排,这次把建堆函数略了并在heapsort主函数里,索引从0开始到size-1结 ...
- JS jQuery 点击页面弹出文字
<style> .animate{ animation:myfirst 3s; -moz-user-select:none;/*火狐*/ -webkit-user-select:none; ...