随笔分类 - Vue框架
小白学习vue框架
摘要：在路由中传值有两种传值方式： query查询参数传值 1.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由path字段负责, 传递的值由query字段负责 1.2 query方式传递的值会以键值对的形式拼接到网址的后面, 与get请求传递数据
阅读全文
摘要：跳转路由 方式一：path路径跳转。 传值可以使用params 传值和query传值 (缺点:不能传引用数据类型-数组，对象等) 方法一： <router-link to="/path">小说列表</router-link> 方法二： <router-link :to="path1">Box1</r
阅读全文
摘要：1.相关认识 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务 前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue 就像jQuery和d
阅读全文
摘要：1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载； 官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。 2、 组件缓存起
阅读全文
摘要：缓存组件 <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 <keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(
阅读全文
摘要：动态组件 所谓的动态组件就是在不同的组件之间进行动态切换。 Vue提供了一个特殊的元素<component>用来动态的挂载不同的组件 使用is 属性来选择要挂载的组件。 <component v-bind:is="mytemp"></component> mytemp可以是已经注册的组件的名字，也可
阅读全文
摘要：中央事件总线 中央事件总线就是一种设计思想，通过设计一种方法使得组件之间的传值不再需要通过其他的组件来进行传值的思路。 第一种：通过Vue提供的技术来实现 要想实现的话首先要学习三个功能： 1.触发x组件的a事件: x.$emit("a事件",参数...) 2.给x组件绑定a事件 x.$on("a事
阅读全文
摘要：祖孙之间的传值主要是靠祖组件的provide和孙组件的inject来进行传值，但是如果知识这两个的话就只能单向的由祖组件传给孙组件，而且值是无法通过控制台修改的，要是想弄成响应式的数据的话需要进行一系列的操作。 首先我们先实现无法修改的 到这里祖组件向孙组件的传值就完成了，但是这个传值是不能修改的，
阅读全文
摘要：在不用状态管理vuex的时候，如何让GrandFather与Son通信，我们可以用可以emit一层一层的传递:会显得冗余。 vue2.4之后，提出$attrs、$listeners ,可以实现跨级组件通信。 $listeners官网解说:事件传递 $attrs官网解说:属性传递 组件一:<two v
阅读全文
摘要：上一个随笔提到属性传值是单向的，意思就是只能父组件向子组件传值，那么想要子组件向父组件传值的话就要用到$emit来触发事件
阅读全文
摘要：属性传值 所谓的属性传值，就是父组件通过绑定属性的方法，然后子组件通过props来获取父组件的值，而属性传值的方法有两种形式： 第一种：具体的一个值（字符串，数值,布尔型） 传递的值，只会改变局部，不会改变全部的数据 第二种：传递一个引用（数组或对象）传递引用，改变一个地方的数据，所有跟引用相关的数
阅读全文
摘要：DIFF算法 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch
阅读全文
摘要：第一步： 每一个组件在加载时都会调用内部的render函数把这个组件的template选项的模板解析为一个Javascript对象，而这个对象跟DOM节点对象一摸一样，这个对象的作用就是为了后面的页面渲染。 第二步： 接下来就是数据劫持代理监听等 底层有一种设计: 发布/订阅设计 其实就是写了一个w
阅读全文
摘要：组件 组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用 1.全局组件: 组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个) 注
阅读全文
摘要：生命周期函数 相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数 beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次 beforeUpdate updated第一
阅读全文
摘要：自定义属性 除了默认设置的核心指令( v-model 和 v-show 等)，Vue 也允许注册自定义指令。 在Vue里，代码复用的主要形式和抽象是组件。 然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令 。 以一个input元素自动获得焦点为例，当页面加载时，使用
阅读全文
摘要：属性侦听器 watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性 当侦听器监听的属性发生变化时,就会调用watch中对应的方法 侦听器属性，比计算属性计算效率消耗大 new Vue({ el:"",//关联界面元素 data:{x:12},//vm的数据源 m
阅读全文
摘要：计算属性 把computed中的方法当做属性使用,会返回一个数据供使用 <div id="app"> <p>{{msg}}</p> <p>方法获取的年龄:{{getAge()}}</p> <p>计算属性获取的年龄:{{getAge_computed}}</p> <button @click="cha
阅读全文
摘要：过滤器 filter主要用于数据展示之前的处理 过滤器只能用在v-bind或者插值表达式中 <body> <div id="app"> <h2>{{data1}}</h2> <input v-model="data2"> <p>{{fn(data2)}}</p> <p>{{data2|fn2}}</
阅读全文
摘要：双向数据绑定的源代码 <body> <div id="app"> <p>{{data1}}</p> <input name="" id="" :value="data1" @input="fn"> </div> </body> <script> new Vue({ el:"#app", data:{
阅读全文
