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 · 1859 阅读 · 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 · 1076 阅读 · 0 评论 -
Ant-Design-Vue $nitication与$message全局配置
使用ant里这两个组件需要进行全局配置:import Vue from 'vue'import App from './App.vue' Vue.config.productionTip = false;//注入全局属性$messageimport { message,notification } from 'ant-design-vue'Vue.prototype.$messa...转载 2020-01-06 16:13:54 · 3581 阅读 · 3 评论 -
Vue 混入mixin
基础混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。例子: const myMixin = { created: function() { this.hello() }, methods: { he...原创 2020-01-02 10:29:21 · 227 阅读 · 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 · 5669 阅读 · 0 评论 -
Vue.js 计算属性缓存导致的Bug
计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的...原创 2019-12-09 11:27:05 · 1303 阅读 · 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 · 1557 阅读 · 0 评论 -
Vue.js 选项/DOM
el类型:string | Element限制:只在用new创建实例时生效详细:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器,也可以是一个HTMLElement实例。在实例挂载之后,元素可以用vm.$el访问。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显示调用vm.$mount()手动开启编译。template类型:s...原创 2019-11-29 09:56:11 · 188 阅读 · 0 评论 -
Vue 选项/数据
data类型: Object | Function限制: 组件的定义只接受function详细:Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个key/value对):浏览器API创建的原生对象,原型上的属性将会被忽略。一旦观察过,不需要再次在数据对象上添加响应式属性...原创 2019-11-28 20:35:53 · 304 阅读 · 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 · 293 阅读 · 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 · 116 阅读 · 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 · 174 阅读 · 0 评论 -
vue.js 条件渲染
v-ifv-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 · 130 阅读 · 0 评论 -
Vue.js 样式绑定
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:&...原创 2019-04-01 16:32:36 · 111 阅读 · 0 评论 -
Vue.js 计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。<!DOCTYPE html>...原创 2019-04-01 15:31:52 · 92 阅读 · 0 评论