Vue实战笔记
1、组件的属性
例子:
<template>
<div class="hello">
<test-props
name="demo"
title="我是title"
:names="names"
></test-props>
</div>
</template> <script>
import TestProps from 'components/TestProps' export default {
name: 'HelloWorld',
data () {
return {
names: '我是Name'
}
},
components: {
TestProps
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>
<template>
<div class="testProps">
{{names}}
</div>
</template> <script>
export default {
name: 'TestProps',
// inheritAttrs: false, // 用来控制是否显示原生属性
props: {
names: {
type: String,
default: ''
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
<template>
<div class="testProps">
{{names}}
</div>
</template> <script>
export default {
name: 'TestProps',
inheritAttrs: false, // 用来控制是否显示原生属性
props: {
names: {
type: String,
default: ''
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
title是原生属性,当inheritAttrs为false时,原生属性不显示
2、事件
3、插槽
4、如何触发组件的更新
Vue在实例化的时候,会对Data里的数据进行getter和setter的转化(说白了就是对这个数据进行一层代理,不管是获取数据还是设置数据的值,都会经过这个代理层,然后再去执行相应的操作),当我们在渲染组件的时候,
需要一些数据,如果这个数据用到了,就会把它放到watch里,如果没有用到,就不会进入这个watch
如果这个数据在watch中,当setter的时候,就会通知watch进行更新
5、计算属性和watch
计算属性依赖的数据,必须是响应式数据,就是data里return的数据
computed能做的,watch都能做,反之则不行
能用computed做的,尽量用computed
6、生命周期
创建阶段:在beforeCreate之前,会执行一个初始化,初始化事件和生命周期;created生命周期会进行data、props、watch、computed的初始化;beforeMount模板编译到render(如果直接编写的是render,这部分会跳过),我们一般用
template,所以会把template编写成render;然后就是render会生成虚拟dom,挂载到真实dom上,然后执行mounted
我们可以在mounted进行异步请求、操作DOM和定时器等,但是Vue并不承诺mounted时候子组件也全部挂载好,所以我们需要this.$nextTick
updated生命周期,也不承诺子组件全部更新完成,所以需要this.$nextTick
在beforeUpdate和updated生命周期中,千万不能更改响应数据,不然会陷入死循环,一更改就触发
https://cn.vuejs.org/v2/guide/render-function.html#向子元素或子组件传递特性和事件
可以用来编写临时变量
把var1和var2传递给这个函数式组件,然后直接返回,然后借助v-slot作用于插槽就可以使用var1、var2了
7、指令的本质是什么?
就是一个语法糖、标志位,当在编译阶段,把template编译成render函数的时候,会把这些语法糖编译成JS代码,这也是为什么jsx和render函数不支持内置指令的原因(jsx也在慢慢支持部分的指令,jsx也是个语法糖,也会编译成render函数)
让一个对象可响应。Vue 内部会用它来处理 data
函数返回的对象。
https://cn.vuejs.org/v2/api/#Vue-observable
9、template和jsx对比
在Vue中,tremplate和jsx都是语法糖,最后都要转换为createElement
Vue实战笔记的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- mysql颠覆实战笔记(五)--商品系统设计(二):定时更新商品总点击量
继续回到沈老师的MYSQL颠覆实战,首先回顾下上一节课的内容,请大家会看下上节课写的存储过程. 打开prod_clicklog表, 我们只要把日期(不含时分秒)的部分存在数据库中, 如果同一日期有相同 ...
- mysql颠覆实战笔记(四)--商品系统设计(一):商品主表设计
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...
- mysql颠覆实战笔记(一)--设计一个项目需求,灌入一万数据先
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...
- mysql颠覆实战笔记(七)--白话理解事务
今天我们学习web开发级mysql颠覆实战课程第9课没MYSQL事务(一):白话理解事务.前面有两节课第7讲:商品系统设计(四):商品属性设计之自定义属性,第8讲:商品系统设计(五):一维属性的商品价 ...
- mysql颠覆实战笔记(六)--商品系统设计(三):商品属性设计之固定属性
今天我们来讲一下商品属性 我们知道,不同类别的商品属性是不同的. 我们先建一个表prod_class_attr:
- mysql颠覆实战笔记(三)-- 用户登录(二):保存用户操作日志的方法
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...
- mysql颠覆实战笔记(二)-- 用户登录(一):唯一索引的妙用
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...
随机推荐
- C语言之四舍五入
在C语言中,如果进行强制类型转换,它会将所需要取的位数直接提取出来,而其他位数的数字会被直接删除,不会对提取出来的位数有任何影响 所以如果我们需要提高精度,对所取的数进行四舍五入,需要给所需去的数的最 ...
- Django admin注册model究竟要怎么写才优雅 批量注册model
比如在Django admin 注册models时,会用到. 对于APP里自带的models,可以使用这种方式注册. from django.contrib import admin # Regist ...
- CodeForces Round #549 Div.2
A. The Doors 代码: #include <bits/stdc++.h> using namespace std; ; int N; , One = ; int a[maxn], ...
- 其它综合-VMware虚拟机安装Ubuntu 19.04 版本
Ubuntu 19.04 版本安装过程 1. 环境: 使用的虚拟机软件是VMware,版本为 12 .(网上一搜一大推,在此不再演示.) 使用的 ISO镜像为Ubuntu 19.04.(自己也可以在网 ...
- USB安装centos6系统(centos7需要换软件)
一.下载系统镜像 二.下载安装软碟通软件UltraISO 三.插入U盘制作启动盘 1.用软碟通打开镜像文件:文件-->打开 2.写入映像:启动-->写入硬盘映像 3.等待写入完成 四.系统 ...
- Python——Django-模板
一.模板的种类 1.变量 {{变量名}} 2.语句类{% %} 2.1 {%for i in booklist%} {{i}} {%endfor%} 2.2 {%if 10>5%} {%else ...
- aop通知加参数的匹配规则
- 省市区JSON
行政编码 ViewBag.CssLinks = ""; 行政编码 中国和韩国行政编码选择.数据来自json文件,但在前端通过json对象调用. 注意本地方式,是将json文件作为对 ...
- 从零开始部署javaWeb项目到阿里云上面
[详情请看]http://www.cnblogs.com/softidea/p/5271746.html 补充几点特别需要注意的事情 一:putty相当于阿里云的控制台, WinSCP 相当于是专门上 ...
- platform驱动分离
目录 platform驱动分离 框架结构 与输入子系统联系 设备描述 驱动算法 注册机制 程序 测试 platform驱动分离 框架结构 与输入子系统联系 设备描述 驱动算法 注册机制 程序 测试 - ...