![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
虚年
邮箱475218106@qq.com
展开
-
vue-cli 3、4 (vue-element-tmplate) 兼容ie11
1. SCRIPT438: 对象不支持“call”属性或方法错误1. 修改babel配置// bablel.config.jsmodule.exports = { presets: [ ['@vue/app', { useBuiltIns: 'entry', polyfills: [ 'es6.regexp' ] }] ]}2.安装@babel/polyfill// bashnpm i @babel/polyfill原创 2020-05-15 11:55:25 · 995 阅读 · 0 评论 -
实现element el-form表单验证
<c-form :model="ruleForm" :rules="rules" ref="CForm"> <c-form-item label="用户名" prop="name"> <c-input v-model="ruleForm.name"></c-input> </c-form-item>...原创 2019-11-11 14:21:48 · 4365 阅读 · 0 评论 -
vue组件 组件的继承extend
vue组件 组件的继承import Vue from 'vue'const component = { data () { return { text: 111 } }, props: { propOne: String }, mounted () { console.log('component1 mounted') },...原创 2018-04-05 16:25:52 · 11228 阅读 · 0 评论 -
v-mdoel 在组件上的运用
v-mdoel 在组件上的运用const component = { props: ['value'], template: ` <div> <input :value="value" @input="handleInput"> </div> `, methods: { handleInput (e) ...原创 2018-04-05 17:33:02 · 233 阅读 · 0 评论 -
vue 插槽slot与provide/inject跨组件传值
vue 插槽slot1. 默认插槽const component = { template: ` <div :style="style"> <slot></slot> </div> `, data () { return { style: { width: '...原创 2018-04-05 19:05:33 · 5661 阅读 · 0 评论 -
vue-router 导航守卫
1. 全局守卫router.beforeEach((to, from, next) => { console.log('before each') next()})router.beforeResolve((to, from, next) => { console.log('before resolve') next()})router.afterEac...原创 2018-04-07 09:38:22 · 1173 阅读 · 0 评论 -
vue中禁止ios浏览器页面滚动的橡皮筋效果
在iPhone浏览器上滚动页面时,页面出现了橡皮筋效果layout.vue<template> <div class="layout"> <header></header> <router-view/> <footer></footer&原创 2018-05-03 17:47:18 · 18744 阅读 · 2 评论 -
vue element 多套主题换肤
1. 生成element皮肤1.1 下载custom-element-themegit clone https://github.com/PanJiaChen/custom-element-theme.git1.2 安装npm i element-theme -g1.3 修改element-variables.scss主颜色$--color-primary: #f81c1c !de...原创 2018-12-24 10:29:08 · 6196 阅读 · 1 评论 -
Vue SSR Nuxt 初探
1. 准备Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。1.1 初始化项目npx create-nuxt-app nuxt-demo> Generating Nuxt.js project in xx/code/nuxt-demo? Project name nuxt-demo?...原创 2019-05-06 16:16:40 · 695 阅读 · 0 评论 -
vue 组件的声明
vue 组件的声明1. 注册组件的方式全局注册局部注册// 组件注册方式1. 全局注册// Vue.component('CompOne', component)new Vue({ // 组件注册方式2. 内部注册 components: { CompOne: component }, el: '#root', template: ` ...原创 2018-04-05 13:41:35 · 1942 阅读 · 0 评论 -
vue 原生指令
vue 原生指令1. v-bind v-bind:id缩写为:id2. v-text 数据绑定 与{{}}相似,但是没有{{}}灵活,比如实现 <div>Text: {{text}}</div> 使用v-text需要用字符串拼接 <div v-text="'Text:' + text"></d...原创 2018-04-04 09:55:53 · 390 阅读 · 0 评论 -
vue2.0 自定义日期时间过滤器
vue2.0 自定义时间日期过滤器filters:原创 2017-06-07 11:46:40 · 16295 阅读 · 1 评论 -
vue2.0 #$emit,$on的使用
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on原创 2017-06-07 11:42:48 · 29440 阅读 · 5 评论 -
vuex 状态管理state、getter、mutation和action
vuex 状态管理1. state的三种用法直接获取store的statecomputed: { count () { return this.$store.state.count } }从mapState中获取computed: { ...mapState(['count'])}在mapState中定义别名comp...原创 2018-04-09 08:13:16 · 2860 阅读 · 1 评论 -
vuex modules模块
1. modules中的stateexport default () => { return new Vuex.Store({ modules: { a: { state: { text: 1 } }, b: { state: { text: 2 ...原创 2018-04-10 08:14:28 · 1305 阅读 · 1 评论 -
vue 生命周期
vue 生命周期import Vue from 'vue'const app = new Vue({ el: '#root', template: '<div>{{text}}</div>', data () { return { text: 0 } }, beforeCreate () { console....原创 2018-04-02 22:13:42 · 123 阅读 · 0 评论 -
vue 数据绑定-动态样式
vue 数据绑定-动态样式动态class名绑定的几种方式 1. 对象方式new Vue({ el: '#root', template: `<div :class="{active: isActive"></div>`, data () { return { isActive: true } }})数组内对象...原创 2018-04-04 09:33:54 · 6607 阅读 · 1 评论 -
vue 计算属性computed
vue 计算属性下例中,getName方法调用可以起到与使用计算属性name相同的作用new Vue({ el: '#root', template: `<div> <div>Name: {{name}}</div> <div>Name: {{getName()}}</div> <div>Numbe...原创 2018-04-04 09:41:35 · 576 阅读 · 0 评论 -
vue 监听器watch
vue 监听器watchnew Vue({ el: '#root', template: `<div> <div>Name: {{name}}</div> <div>Name: {{getName()}}</div> <div>FullName: {{fullName}}</div> &原创 2018-04-04 09:50:55 · 2976 阅读 · 0 评论 -
Vue 百度搜索
使用Vue和JSONP获取百度的搜索结果任务: 1. 输入结果,立刻返回百度搜索结果,并展示 2. 键盘上下键可以选中结果列表,增加样式 3. 选中后按回车,跳转到百度搜索页面效果图: html:<div id="app"> <input class="search" type="text" value="按钮" v-model="search" @keyup="get($event原创 2017-05-07 22:33:52 · 823 阅读 · 0 评论