疑问
-
vue中的几种set/get（以及一个$set, getter/setter 转化）
- 计算属性中的get和set
- $set
-
template属性和标签
-
作属性时候，可以是new Vue实例的一个属性,只能含一个标签
var vm = new Vue({ el: '#app', template: '<div>第三种写法</div>', } -
作标签时候 ----看不懂
-
-
bus总线
整理
基本属性介绍与理解
-
data，methods，computed
data，method，computed等属性方法都会挂载在vue实例下面
总结： new Vue() 在实例化以后， data对象中的所有属性加入了vue实例的属性，
methods的方法直接加入vue实例中的方法；
compute计算属性的值（是一个方法的返回值） 也会添加到其中
props : 目前用到
---- 待完善 —
Vue实例化后 el属性也有接口可以获取，用$el; -----这个不用考虑
data 属性 也有 $data
methods 属性没有 ，他没有app.$methods
compute 属性没有 ，他没有app.$compute
-
props中可以添加校验
props:{ content:{ type:String require:true //必须传 default:"default value" validator:function(value){ //校验器 是一个函数 return (value.length>5) } } }, -
事件绑定的时候中的method中（）加不加的问题
当在注册事件的时候 ，一般是可以不加括号的，但是是可以加的 ，另外 加（）的话 ，这里面可以传参；
-----------以前用script编写绑定事件的时候 是不传参数的（要用什么属性值 都是dom获取的，或者用e事件处理对象）；
--------用标签属性onclick注册事件的时候也是要传参数的，如alert(text)—用的少就不考虑了；在{{ }}的时候用了方法 不加括号；会有误解 ，要加括号；获取的就是其返回值；
-
watch—监听器
https://www.cnblogs.com/yesu/p/9546458.html
如果 watch内部是一个方法的时候； 和一个对象是不一样的
高阶属性介绍
+++ privode/inject
+++ mixin
-
privode/inject----父子组件传值
https://segmentfault.com/a/1190000021216039
vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。这种方式传值的优势：
provide只需要将传递的值抛出，不需要知道使用哪一个子组件，子组件通过inject注入获取数据，也不需要知道父组件是谁，因此再封装组件库的时候很便利。并且，爷辈可以传值，父辈也可以传值，相同的值是会覆盖，不相同的话，孙子辈都是可以接收的
-
mixin: 将自定义的方法，数据信息合并到当前vue实例对象中
https://www.jianshu.com/p/f34863f2eb6d
注意，多个组件公用的属性，之间没有影响
let mixin={ data(){ return{ msg:1 } }, methods:{ foo(){ console.log('hello from mixin!----'+this.msg++) } } } var child=Vue.component('child',{ template:`<h1 @click="foo">child component</h1>`, mixins:[mixin] ----data，methods等合并到当前这个组件中 })
组件的问题总结
-
父组件定义事件----一般不这样做
<div id="vue-app-one"> <h1>Vue App One{{name}}</h1> <greeting v-on:click="handleClick"></greeting> </div>---------注意：在父组件中写这些是没用的，因为greeting标签是定义出来的 没有任何事件；
解决办法 ：加入 v-on:click.native=“handleClick” 并且在（父组件中定义这个事件
或者 **只在子组件中写这些事件：**Vue.component('greeting', { template: '<p v-on:click="handleClick">{{name}}组件应用</p>',} 在子组件的方法中定义这个事件处理函数；
-
组件间定义的样式
在父子组件中定义一个类的样式 ，在父或子组件中 添加这个 类名，，，都是有效的–所以要用scoped。
-
父组件可以直接 调用子组件中methods
父组件： <template> <create-config ref="createConfig"></create-config> </template> <script> 可以使用： 子组件中定义了这个方法 this.$refs.createConfig.edit(data) </script> -
vue一般在用别人的组件的时候 要用vue.user() ----组件中会有install 方法
第一步：创建组件 第二步：同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件 import component from './Cmponent.vue' const component = { install:function(Vue){ Vue.component('component-name',component) } //'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法 } // 导出该组件 export default component’ 第三步使用： // 只要在index.js里规定了install方法，就可以向其他ui组件库那样，使用Vue.use()来全局使用 import loading from './index.js' Vue.use(loading) <template> <div> <component-name></component-name> </div> </template>
插槽
https://www.jianshu.com/p/7024d34a144a
插槽分类有，具名插槽；默认插槽，作用域插槽
使用：在子组件中留一个坑位，然后在父组件中使用的时候加上对应的HTML代码即可。
-
具名插槽：
<solt name="head"></slot> --------子组件child <child><p slot="head">父组件在子组件中插入的内容</p><child/>----父组件中书写这个时候父组件书写的时候 可以不用管对应的顺序。
-
默认插槽：就是没有名字的插槽
<solt> </solt> 子组件child 父组件中child标签中没有指定插槽的内容所有的**都会**放到这里面。 -
作用域插槽：
https://segmentfault.com/a/1190000012996217?utm_source=tag-newest
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
不过，我们可以在父组件中使用 slot-scope 特性从子组件获取数据
前提是需要在子组件中使用 :data=data 先传递 data 的数据slot-scope从子组件中获取值 ，而且样式是由我们的父组件决定的。子组件中内容： <slot :data="msg"></slot> ---绑定了一个对象 {'data':msg的值} 父组件中内容： <template> <p slot-scope="data1">{{data1.data}}</p> </template> slot-scope="data1" 是去接受上述的这个对象data1可以接到子组件所有 ：定义的数值 ui组件中一般使用scope**父组件中的data1可以随便起名，保持在父组件中一致就可以了 **
-
应用
-
父子组件传值
slot-scope--可以实现子组件向父组件间传值。 插槽本身就是父组件向子组件传值
-
概念间区别
-
计算属性compute和数据data
在vue中，都是和视图层双向绑定的，一个变化都变化；但是它们变化的原因不一样： 计算属性它依赖的参数变化，它就是变化，data变化一般是直接被修改变化。 -
计算属性compute和监听器watch
监听器，是监听的成员发生变化，对应执行语句。 -
计算属性compute和方法method
修改其中一个属性时，其他属性的值都没改变，对于计算属性而言（只要不修改计算的元素 计算了一次就不会再计算）注意： 若依赖的值发生变化了 就会去重新计算。但会发现methods里的**所有方法**都被执行； 另外 计算属性在用的时候不要加括号；
双向绑定
https://www.cnblogs.com/wangjiachen666/p/9883916.html
https://www.cnblogs.com/fundebug/p/responsive-vue.html
-
双向绑定带来的bug
-
数组
-
vue中通过下标形式修改数组，数据是变化了(实际运行后发现控制台打印的数据显示已经修改成功了)，但是view视图没有变化，要用数组方法 pop push shift等。
-
**直接改变引用的时候，**数据变化，页面也随着变化。—正常双向绑定
-
当修改数组的长度时； 也是不随之变化—这点找不到具体的场景。？？？？
解决办法：
- 使用数组的方法（pop push shift unshift splice sort reverser）
- set方法
-
-
对象
-
直接对对象进行改变的时候 vm.userInfo.name=“Dell lee” ，页面会随之修改
-
但是添加一个新的属性 时候 页面就不会修改 （由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。）
-
修改引用可以同步修改。
解决办法：
- set方法：
使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式 property。
例如，对于：
Vue.set(vm.someObject, ‘b’, 2)
-
-
-
data: 值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的；新添加的不算
vue全局api, v-x指令, 事件修饰符
v-x指令
+++ v-bind
+++ v-once
-
v-bind
重点分析内容： （通过v-bind绑定的属性在实际生成的dom中属性是否显示）
一、v-bind后面跟 js表达式 所以才能完成取到vue实例中data的值； 二、v-bind并不是只能接data属性中的元素； 三、v-bind----： （**当后面绑定的内容是 data中有的 变量这个 属性在dom中就显示**） <h1 v-bind:value="lll">{{ greet("noon") }}</h1> dom中不显示这个属性 <h2 v-bind:kk="website">{{ name }}</h2> dom中显示这个自定义属性 <a v-bind:href="website">baidu</a> dom中显示这个自带属性； 但是： 在**父组件** **子组件**中写的属性（不管是自定义还是本身标签就带的）和属性值 都是会显示在dom中的-----相当于自定义属性； -
v-once
全局api
+++ Vue.set
+++ Vue.directive
+++ Vue.filter
+++ Vue.nextTick
+++ this.$createElement
+++ this.$listeners和this.$attrs:
-
Vue.set方法----实现修改数组中的值 页面也随之变化
vm.set(vm.list,1,“fasdf”)
-
Vue.directive()-----创建自定义指令
第一个参数----决定用的指令名 v-… 第二个参数----对象
- 不传参数的指令（v-if和v-for都是传参数的）
Vue.directive("rainbow",{ bind(el,binding,vnode){ el.style.color="#"+Math.random().toString(16).slice(2,8); } }) 使用的时候 v-rainbow
- 传参数的指令：** binding.value 是获取 ""内的参数；binding.argument 获取的是冒号后面的 **
Vue.directive("theme",{ bind(el,binding,vnode){ if(binding.value =="wide"){ el.style.maxWidth="560px" } if(binding.arg=="column"){ el.style.background="#6677cc"; el.style.padding="20px"; } } })使用的时候： v-theme:column="‘wide’"
-
局部自定义指令：
在局部组件中 ：
Vue.components("greeting",{ ... directives:{ "rainbow":{ bind(el,binding,vnode){ el.style.color="#"+Math.random().toString(16).slice(2,8); } } })
-
Vue.filter(id,[definition])-----滤波器–在博客案例中使用；
- 自定义过滤器：
Vue.filter("to-uppercase",function(value){ return value.toUpperCase(); }) Vue.filter("snippet",function(value){ return value.slice(0,100)+"..."; })- 使用—配合管道符 |
<h1>{{blog.title| to-uppercase}}</h1> -
Vue.nextTick----是和生命周期钩子有联系的
https://www.jianshu.com/p/46c9d777cab1
在下次
DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。通常使用nextTick 是要去得到 dom更新后的值, 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值
什么时候使用nextTick() ???
-
vue中的 this.$createElement ----这可以用类似react中jsx的语法书写我们的dom
const h = this.$createElement; this.$info({ title: 'This is a notification message', content: h('div', {}, [ h('p', 'some messages...some messages...'), h('p', 'some messages...some messages...'), ]), onOk() {}, });
-
this. a t t r 和 t h i s . attr和this. attr和this.listener
https://blog.csdn.net/m0_38005587/article/details/88573667?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
举例：
父组件： <div id="app"> {{value}} <wrapper v-on:focus="onFocus" v-bind:value="value" v-on:input="onFocus" placeholder="请输入"> </wrapper> </div> <script> props:[value] </script> 子组件: Vue.component("Wrapper",{ template:` <div> <son v-bind="$attrs" v-on="$listeners"></son> </div> ` }); <script> props:[value] </script> 子组件可以用 $attrs可以接收到 非props 传递的 属性这里就是 placeholder 这里 $attrs={placeholder："请输入"} $listeners可以接收到 除 设置 v-on.native 的 所有父组件的事件 这里 $listeners={focus: ƒ, input: ƒ}
事件修饰符
-
once ----这个事件只会触发一次；往后点击（事件触发）就没用了；
-
prevent ----阻止默认默认事件（例如：a标签跳转）
-
stop–阻止单击事件继续传播 —（为点击事件设计的？）
小经验
-
v-for + template标签
template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
<template v-for="(ninja,index) in ninjas"> <h3>{{index}} . {{ninja.name}}</h3> <p> {{ninja.age}}</p> </template> -
动态组件（—组件交替显示）的实现方式
让多个组件使用同一个挂载点，并动态切换，这就是动态组件
简单的说，动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示，如:
-
v-if
<child-one v-if="type==='child-one'"></child-one> <child-two v-if="type==='child-two'"></child-two> -
is+ component标签
<template> <div class="home"> <component :is="currentComponent"></component> </div> </template>
注：加入v-once 设置以后 放在内存中 提高渲染效率
-
-
vue动画
Vue提供了`transition`的封装组件，在下列情况中，可以给任何元素和组件添加”进入”和”离开”过渡动画。 条件渲染 （使用 v-if） -----就像之前写的 时候 transition 跟在 a：hover里面才有效 条件展示 （使用 v-show） 动态组件 组件根节点 -
路由拦截
router.beforeEach（）一般用来做一些进入页面的限制。
-
vue设置代理
module.exports = { proxy: { '/apis': { //将www.exaple.com印射为/apis target: 'https://www.exaple.com', // 接口域名 secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, //是否跨域 pathRewrite: { '^/apis': '' //需要rewrite的, } } } }这边设置的都是跨域的路由设置
-
路由
router-view中的路由和 axios中的路由
router-view一般通过vue-router设置的，请求的一般是一个组件，可以当作是html的一部分，一个是本地的路由-----和传统的后端路由直接请求一个页面的资源又不太一样
axios一般是请求后端接口的数据
补充
再对比一下node中路由是怎么回事 ----这边 也是请求中的路由
- 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
- 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
未来可期
-
网关 + 微服务
-
Ngnix 单页面应用（SPA）怎么配置以及docker（k8s），还有jenkin(------------就是涉及到npm build以后怎么做)
-
Nginx 是一个和apache一样的存在，https://www.cnblogs.com/moyand/p/8520111.html
- 轻量级，同样的web服务，比apache占用更少的内存及资源。处理请求是异步非阻塞，高并发处理能力强。
1819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
