vue.js
退役前端工程师
这个作者很懒,什么都没留下…
展开
-
Vue keep-alive 缓存组件的三种方式
<keep-alive> <component> // .... </component></keep-alive>所有路由匹配到的组件都会被缓存<keep-alive include="a"> <component> // .... </component></keep-alive>仅匹配到的组件(如:组件 a)会被缓存(仅想要缓存的组件得到缓存)可以通过配置 exclude 匹原创 2020-07-20 17:19:24 · 782 阅读 · 0 评论 -
Vue $listener 和 .native 修饰符 示例详解
vm.$listener 包含了父组件中(除了 .native 修饰器以外的)事件监听器。当内部组件不具备外部绑定的一些 DOM 事件,而外部组件具备相应的 DOM 事件时,在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。示例如下: // 父组件作用域中 // js import TodoTextInput from '@/components/TodoTextInput.vue' // html <TodoTextInput原创 2020-07-20 15:54:53 · 490 阅读 · 0 评论 -
vue 实例数据初始化为 null
vue 文档中 vue 实例:数据与方法 就提到,只有当实例被创建时就已经存在于 data 中的属性才是响应式的。项目中我们通常把需要响应式的 数据对象 或者 数据数组 初始化赋值为 null这么做有什么好处呢?或者说为什么初始化要为 null,对象为 {},数组为 [],不行吗?首先,需要肯定的是,我们需要用到的数据属性,建议是应该先定义为 data 对象属性,这就为我们省去了后面手动添加...原创 2020-03-08 21:24:08 · 7003 阅读 · 0 评论 -
新手 vue build 没改根路径配置的坑
2019.11.25没有修改配置文件等直接 build 项目之后,打开 dist 中的 index.html 或者将 dist 文件夹上传至 GitHub 打开页面空白。这里是因为没有修改项目资源路径,解决方法是:打开项目根目录下的 config 下的 index.js 文件,在 build 部分将 assetsPublicPath: '/' 改为 assetsPublicPath: '...原创 2020-02-12 20:56:19 · 650 阅读 · 0 评论 -
Vue render 函数
render 函数的初步了解我们通过下面的 demo 对 render 函数进行初步了解,其需求是传递不同的参数渲染不同的标签组件实现<div id="app"> <my-component :level="level">我是 demo</my-component></div><template id="demo"> ...原创 2019-12-01 20:06:07 · 283 阅读 · 0 评论 -
Vue 自定义指令
和组件类似,有全局注册和局部注册,区别就是把 component 换成 derective。钩子函数指令定义函数提供了几个可选的钩子函数bind:只调用一次,在指令第一次绑定到元素的时候调用,使用此钩子函数可以定义一个在绑定时执行一次的初始化操作;inserted:被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中);update:被绑定元素所在模板更新时...原创 2019-12-01 20:05:34 · 203 阅读 · 0 评论 -
Vue slot 插槽
为了让组件可以组合,需要一种方式来 混合父组件的内容与子组件自己的模板。—> 内容分发Vue 实现了一个内容分发 API,用特殊的 slot 元素作为原始内容的插槽。编译的作用域在深入内容分发 API 之前,需要先明确各个内容在哪个作用域内编译<div id="app"> <child-component v-show="childshow"></c...原创 2019-12-01 20:01:07 · 262 阅读 · 0 评论 -
Vue 组件通信
组件关系分为父子组件通信、兄弟组件通信和跨级组件通信自定义事件–子组件给父组件传递数据使用 v-on 除了监听 DOM 事件外,还可以用于组件之间的自定义事件JS 的设计模式–观察者模式,有dispatchEvent 和 addEventListener 两个方法,Vue 组件也有与之类似的一套模式,子组件用 $emit 来触发事件,父组件用 $on() 来监听子组件事件。步骤:自定义...原创 2019-12-01 19:49:28 · 138 阅读 · 0 评论 -
Vue 组件命名 & 数据验证
单向数据流通过 props 传递数据是单向的,父组件数据变化会传递给子组件,而反过来不行。目的:尽可能将父子组件解稿,避免子组件无意中修改了父组件的状态。应用场景:① 父组件传递初始值,子组件将初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件的 data 种声明一个数据,引用父组件传递过来的 props。步骤:注册组件将父组件的数据传递进来给子组件 props...原创 2019-12-01 19:48:34 · 214 阅读 · 0 评论 -
Vue 组件的单向数据流
单向数据流通过 props 传递数据是单向的,父组件数据变化会传递给子组件,而反过来不行。目的:尽可能将父子组件解稿,避免子组件无意中修改了父组件的状态。应用场景:① 父组件传递初始值,子组件将初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件的 data 种声明一个数据,引用父组件传递过来的 props。步骤:注册组件将父组件的数据传递进来给子组件 props...原创 2019-12-01 19:45:45 · 318 阅读 · 0 评论 -
Vue 组件注册 & 小技巧 & props
产生原因提高代码复用性使用方法全局注册(用的少)Vue.component(tag, { template: '<div>我是全局注册的组件</div>'})优点:所有的 Vue 实例都能使用;缺点:权限太大,容错率降低。局部注册<div id="app"> <componentName></componentNam...原创 2019-12-01 19:44:11 · 291 阅读 · 0 评论 -
v-model 和表单
v-model指令用于表单类元素双向绑定数据<div id="app"> input 和 textarea 用法:<input type="text" v-model="value">下面实时显示 value 的值input 输入什么右边就显示什么 ---> {{value}}<textarea cols="30" rows="10" v-m...原创 2019-11-29 21:37:30 · 296 阅读 · 0 评论 -
Vue 方法与事件
<div id='app'> // 方法没有参数可以省略括号 <div v-on:click="handle"></div> // 有参数要加括号 <div v-on:click="handle()"></div> // 或者传入参数 <div @click="handle(8)"></div&...原创 2019-11-29 21:36:25 · 228 阅读 · 0 评论 -
Vue 内置指令
基本指令v-cloak在 vue 实例编译结束之后再渲染,一般与 display: none 结合使用。<div id="app"> <div v-cloak>{{msg}}</div></div>// css[v-cloak]: { display: none;}解决初始化慢导致的页面闪动,比如:页面加载出来了但是没有解...原创 2019-11-29 21:35:42 · 219 阅读 · 0 评论 -
v-bind 以及 class 与 style 的绑定
绑定 class 的几种方式对象语法对象的键是类名,值是布尔值(定义在 data 中)当 class 的表达式过长或者逻辑复杂时,可以绑定一个计算属性<div id="app"> <div :class="{ className: isActive }"></div> <div :class={className}></div...原创 2019-11-29 21:35:08 · 120 阅读 · 0 评论 -
Vue 计算属性
在双向绑定数据和表达式时,由于表达式过长或者逻辑过于复杂,使数据表达式臃肿难以阅读和维护。所有的计算属性以函数的形式定义在 computed 中,依赖于本实例或者多个实例 data 中的数据,一个计算属性里可以完成各种复杂的逻辑(运算和函数调用等),并返回最终的计算结果。只要其中任一数据变化,计算属性就会重新执行,视图也会更新计算属性用法computed: { computed1:...原创 2019-11-29 21:29:51 · 128 阅读 · 0 评论 -
Vue 入门基础
Vue 实例和数据绑定通过 Vue 构造函数创建 Vue 实例,并启动 Vue 应用入口;el 用于指定页面中已经存在的DOM元素来挂载 Vue 实例,可以是标签也可以是 CSS 语法;data 声明应用中需要双向绑定的数据,建议需要用到的所有数据都预先在 data 中声明,不至于将数据散落到业务逻辑中难以维护,也可以指向一个已经存在的变量;挂载成功之后,可以通过 实例.$属性名 来访问...原创 2019-11-29 21:28:45 · 98 阅读 · 0 评论 -
页面拆分公共模板与组件化
App.vue首先我们要明白的是,页面是在 App.vue 开始启动的<template> <div id="app"> <router-view/> </div></template>上面的代码是 App.vue 的初始状态,需要注意的是 <template> 下还必须有一个父元素 <di...原创 2019-10-21 22:46:15 · 563 阅读 · 0 评论 -
Vue-cli ElementUI 的使用
ElementUI 官网链接安装:推荐使用 npmnpm i element-ui -sElementUI 为新版的 vue-cli 准备了相应的 Element插件,可以快速搭建一个基于 Element 的项目。引入 Element可以引入整个 Element,或者根据需要引入部分组件。完整引入在 vue-blog main.js 中写入import ElementUI...原创 2019-10-19 09:00:34 · 226 阅读 · 0 评论 -
vue-cli 脚手架一键搭建工程
创建项目模板 template打开终端安装 vue-clinpm install -g vue-cli创建 blog-client 项目vue init webpack blog-client下面会出现 项目名称 描述 作者等可以直接回车下面推荐 运行 + 编译? Vue build (Use arrow keys)> Runtime + Compiler: rec...原创 2019-10-17 23:06:43 · 175 阅读 · 0 评论