Vue一些重要的知识点
vue
- sync修饰
(1)双向数据绑定,父子组件之间信息的交互
1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么可以实现通信过程
2⃣️使用简单的方式传递,如上图中emmit(updete:title),然后在v-bind:title.sync='title',从而实现双向数据绑定(2)双向数据绑定,使用v-model
通过在自组件中使用model 定义 prop event ,从而可以实现父子组件之间通过v-model实现通信,或者不定义model ,使用默认的的prop:value,enent:input
- keep-alive
<keep-alive><My-component /> <keep-alive> 可以实现缓存 - 作用域插槽
这个其实就是可以使用自组件中的数据,使用slot-scope接受自组件中的数据 - 自组件访问父级组件
1⃣️ let father = this.$parent
2⃣️通过依赖注入 - 计算属性
刚开始在学习计算属性的时候,一直默认的认为是一个函数,但是在调用的时候,是不用加()的,这样的话,在认为是一个函数就不对了,其实就是类似于
data中的数据,只不过会有缓存和更新。例如使用的时候直接{{computed}},通俗的说,可以单纯的将它作为一个data值 - method方法
调用方法的时候,如果不传递值的话,那么可以不用加入() - 混入 minxins
自定义指令
通过Vue.directive(name,{})
Vuex
- 三部分构成 state actions mutations
- state
此部分存放数据,可以通过mapStated获取到数据。 actions
可以使用异步,通过this.$store.dispathc()触发mutatios
mutatios
必须是同步,通过this.emmit()触发步骤:
Vue.use(Vuex) const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Vue一些重要的知识点的更多相关文章
- vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
- vue中的一些知识点--多看文档
重温vue,一些知识点简单记录. 1.我们都知道当数据变化时,视图会重新渲染.注意:只有当vue实例被创建时,data中存在的属性才是响应式的.后续新添加的属性不会触发视图变化. 使用 Object. ...
- vue面试题,知识点汇总(有答案)
一. Vue核心小知识点 1.vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态 ...
- vue.js的一些知识点
1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- vue较深入的知识点
1 理解何为虚拟节点 虚拟dom是什么? 虚拟dom就是通过js对象来模拟描述dom树,包括tag,attr, children等属性来代表标签名,属性,子元素等.由于不需要有操作dom的方法,所以比 ...
- MVC,MVVM,MVP的区别/ Vue中忽略的知识点!
按照顺序学习: https://scotch.io/courses/build-an-online-shop-with-vue/hello-world Vue Authentication And R ...
- vue经验 - 细节小知识点汇总(更新中...)
1. $refs 数据这么绑定的: 然后在created中抛出来,猜猜看看打印的是两个什么? 结果如下: 第一个跑出来了,第二个,却undefiend,没有东西?!... 后来去官网查看$refs的解 ...
- vue有关绑定的知识点
一.v-bind绑定class 1.对象的形式 <div :class="{text-danger:true}"></div> 数组形式绑定class &l ...
- vue组件的基本知识点
1. 组件中 is 的特性: 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格 ...
随机推荐
- POJ 1416 Shredding Company【dfs入门】
题目传送门:http://poj.org/problem?id=1416 Shredding Company Time Limit: 1000MS Memory Limit: 10000K Tot ...
- 【luogu P3375 KMP字符串匹配】 模板
题目链接:https://www.luogu.org/problemnew/show/P3375 精华:在每次失配后不从头匹配而是尝试找一个新的开始并且是新开始的位置最长的相同前缀和后缀. 实际上KM ...
- ES6 基础概念汇总
let const命令 声明变量 let 声明的变量 没有变量提升的效果 1 let声明的变量只在代码块内有效 for循环的计数器 2 不存在变量提升 要在声明后使用 let bar = 2 3 ...
- mysql慢查询开启及分析方法
最近服务维护的公司的DB服务器,总是会出现问题,感觉需要优化一下了,登陆上去,发现慢查询日志都没有开,真是惭愧, 故果断加上慢查询日志, 经过分析sql记录,发现问题很多,开发人员很多没有对sql优化 ...
- Linux查看日志命令- more、less、tail、head命令的区别
参考:https://blog.csdn.net/caib1109/article/details/52195942 1.more 2.tail 3.less 4.cat 5.head
- react中图片校验码实现以及new Buffer()使用方法
图片校验码原理就是图片是后端生成的前端只是前后端传过来的数据流做些处理展示即可,先直接上核心代码图: 这里就是简单得对axios的一些默认项属性重写:最后你只需要将resolve的内容插入页面的< ...
- 20181009noip HZ EZ两校联考sum(莫队,组合数学)
题面戳这里 思路: noip考莫队???!!! 考场上死活没往这方面想啊!!!数据分治忘写endl50pts滚粗了 这里每个询问都有n,m两个参数 我们可以把它看做常规莫队中的l和r 然后利用组合数的 ...
- ABAP术语-EDI (Electronic Data Interchange)
EDI (Electronic Data Interchange) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/29/1057386.ht ...
- webpack打包之后背景图不显示的问题
修改build/utils.js文件里面的ExtractTextPlugin,添加:publicPath: ‘…/…/’,具体代码如下:
- css实现下拉菜单功能(多中实现方式即原理)
引导思路: 1.需要用到的元素:position hover (z-index) 或(overflow)或(display)等等. 关键点就是div的溢出部分的处理. 2.实现过程: 2.1:就是要 ...