vue
Tong XU
欣赏简洁的代码是一种赏心悦目的事情。
展开
-
Vue通过Render向子组件中传递作用域插槽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test_render</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></sc...原创 2020-04-01 12:22:17 · 1856 阅读 · 0 评论 -
vue-cli 3.0配置vue.config.js解决跨域问题
在遇到跨域请求外部数据遇到的问题得到一些总结。 在vue3.0中解决跨域需要配置vue.config.js(在根目录下创建vue.config.js);配置如下: module.exports = { runtimeCompiler: true, publicPath: '/', //设置打包路径 devServer: { port: 8080, ...原创 2020-03-01 18:48:37 · 1074 阅读 · 0 评论 -
Ant-Design-Vue $nitication与$message全局配置
使用ant里这两个组件需要进行全局配置: import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false; //注入全局属性$message import { message,notification } from 'ant-design-vue' Vue.prototype.$messa...转载 2020-01-06 16:13:54 · 3577 阅读 · 3 评论 -
Vue 混入mixin
基础 混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 例子: const myMixin = { created: function() { this.hello() }, methods: { he...原创 2020-01-02 10:29:21 · 226 阅读 · 1 评论 -
一个好用的分页插件 Ant Design Vue 中的List组件
<template> <div class="listv2-root"> <a-list :itemLayout="itemLayout" :size="encoding.size?encoding.size:size" :pagination="encoding.pagination !== false ?encod...原创 2019-12-27 17:12:23 · 5664 阅读 · 0 评论 -
Vue.js 计算属性缓存导致的Bug
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的...原创 2019-12-09 11:27:05 · 1301 阅读 · 0 评论 -
Vue.js $emit方法介绍
vm.$emit(eventName, [...args]) 参数: {string} eventName [...args] 第一种情况: Vue.component('welcome-button', { template: ` <button v-on:click="$emit('welcome')"> Click me to be welcome...原创 2019-12-06 19:57:16 · 1554 阅读 · 0 评论 -
Vue.js 选项/DOM
el 类型:string | Element 限制:只在用new创建实例时生效 详细:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器,也可以是一个HTMLElement实例。在实例挂载之后,元素可以用vm.$el访问。 如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显示调用vm.$mount()手动开启编译。 template 类型:s...原创 2019-11-29 09:56:11 · 186 阅读 · 0 评论 -
Vue 选项/数据
data 类型: Object | Function 限制: 组件的定义只接受function 详细: Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个key/value对):浏览器API创建的原生对象,原型上的属性将会被忽略。 一旦观察过,不需要再次在数据对象上添加响应式属性...原创 2019-11-28 20:35:53 · 302 阅读 · 0 评论 -
Vue使用watch监听一个对象中的属性
问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 现在我需要监听这个queryData,我可以这样做: watch: { quer...转载 2019-11-14 13:43:11 · 209 阅读 · 0 评论 -
【Vuex】State,Getter,Mutation和Action
// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) 接下来将围绕上面这个例子张开: 1. State...原创 2019-11-06 13:20:10 · 290 阅读 · 0 评论 -
vue-router 重定向
重定向也是通过routes配置来完成的,下面例子是从/a重定向到/b: const router = new VueRouter({ routes: [ {path: '/a', redirect: '/b'} ] }) 重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: [ ...原创 2019-11-02 16:27:35 · 231 阅读 · 0 评论 -
vue-router 命名视图
有时候想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航)和main(主内容)两个视图。这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view没有设置名字,那么默认为default。 <!DOCTYPE html> <html> <head> <meta...原创 2019-11-02 16:15:16 · 115 阅读 · 0 评论 -
vue-router 编程式的导航
除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。 router.push(location, onComplete?, onAbort?) 注意:在Vue实例内部,你可以通过$router访问路由实例。因此,你可以调用this.$router.push。 想要导航到不同的URL,则使用router.push方法...原创 2019-11-02 15:59:26 · 171 阅读 · 0 评论 -
vue.js 条件渲染
v-if v-if指令用于条件地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 也可以用v-else添加一个else块。 <h1 v-if='awesome'>Vue is awesome!</h1> <h1 v-if='awesome'>Vue is awesome!</h1> <h1 v-else>Oh...原创 2019-10-26 10:56:22 · 129 阅读 · 0 评论 -
Vue.js 样式绑定
Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定 我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: &...原创 2019-04-01 16:32:36 · 110 阅读 · 0 评论 -
Vue.js 计算属性
计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 computed vs methods 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 <!DOCTYPE html> ...原创 2019-04-01 15:31:52 · 91 阅读 · 0 评论