vue
碵蝎
这个作者很懒,什么都没留下…
展开
-
基于vue-cli3的后台管理系统
github地址:https://gitee.com/tainiu123/vue-admin-js预览地址:http://39.108.183.7/vue-admin-js/#/ (账号和密码随便输)只写了最基本的功能,可快速用于二次开发原创 2021-02-24 20:50:20 · 315 阅读 · 0 评论 -
18.$nextTick
如上图,实现这个功能。当我们点击按钮的时候,让input框显示并且让它自动对焦。代码 :<template> <div class="hello"> <button v-if='isShowButton' @click="setButton">show input</button> <input ref="input" v-else type="text"> </div></temp..原创 2020-07-12 18:06:35 · 171 阅读 · 0 评论 -
vue打包问题
css、图片路径出错修改以下文件打包后生成.map的文件,太占内存这下面这句代码改成falsemap文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。...原创 2019-08-28 10:25:15 · 352 阅读 · 0 评论 -
17.vuex
store/user/index.js//公共数据const state = { number : localStorage.getItem('number') || 0};//在xx.vue中访问公共数据const getters = { getNumber : (state)=>{ return state.number; }};//在xx....原创 2020-03-17 00:44:33 · 281 阅读 · 0 评论 -
13.ref与refs
ref若绑定在dom元素,则是用来操作dom。若绑定在组件上,则可以访问改组件的data和methods等。例子 (绑定在dom元素)<template> <div> <input type="file" ref="input" @change="addImage"> <ul> <li v-...原创 2019-06-26 14:02:05 · 240 阅读 · 0 评论 -
14.插槽
默认插槽父组件<template> <div> <B> <div class='intoMessage'>插进组件里面的内容哈哈</div> </B> </div></template><script>import B from "@/t...原创 2019-07-02 12:29:04 · 193 阅读 · 0 评论 -
15.mixins
mixins作用分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时,所有混入对象的选项将混入该组件本身的选项。例子:base.js(把需要复用的功能写在一个文件里)const base = { data(){ return { message : { name : 'TOM', age ...原创 2019-07-03 13:20:19 · 186 阅读 · 0 评论 -
16.使用vue-i18n实现国际化
需求比如项目需要国际化,点击按钮切换中文/英文1、安装npm install vue-i18n --save2、注入 vue 实例中import Vue from 'vue'import router from './router/router.js'import i18n from './template/i18n'new Vue({ el: '#app',...原创 2019-07-09 12:54:40 · 200 阅读 · 0 评论 -
12.使用脚手架
解析.vue文件的配置步骤太复杂了,而且会出现各种各样的报错,实在令人头痛。现在使用脚手架你就不用自己配置了,它会帮助我们配置好上一章节的所有步骤。步骤 :1、安装vue-cli在你的项目运行命令窗口,输入npm install vue-cli -g2、模板介绍vue -cli的模板这里只介绍3个simple //好像没啥用webpack 使用在(大型项目)、Es...原创 2018-02-06 12:07:47 · 366 阅读 · 0 评论 -
11.解析.vue文件
还记得前9章我们说过,可以把template写在外面的那一部分知识么?回顾下 :但这样的做法实际上也不是很好的解决方法。如果组件太多,都写在同一个html文件上,似乎也挺乱的。解决的方法是,把组件模块都提取出来,写在一个xxx.vue的文件上。但解析这种.vue结尾的文件也不是一份轻松的工作,你需要安装以下这些插件到你的项目中,它们分别是 :(把es6语法转换成es5,原创 2018-02-06 01:09:01 · 16769 阅读 · 3 评论 -
05.计算属性
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<template> <div> {{ name.split('').reverse().join('') }} </div></template><script>export default {...原创 2017-03-03 10:41:46 · 657 阅读 · 0 评论 -
06.过滤器
过滤器用于格式化一些数据语法 :数据 | 过滤器名字例子:<template> <div> {{name | lowercase}} </div></template><script>import Vue from 'vue'Vue.filter('lowercase', (e)=>{ ...原创 2018-01-30 23:42:41 · 348 阅读 · 0 评论 -
07.监听数据
使用watc函数,可以监听某个数据的状态。当这个数据被修改时,则会去调用我们写好的回调函数。例子:<template> <div> {{name}} </div></template><script>export default { data(){ return{ name : 't...原创 2018-01-31 00:23:07 · 321 阅读 · 0 评论 -
08.防止页面闪烁
vue会把{{ xxx }} 编译成我们指定的数据,但是在编译的那一刹那间, {{ xxx }} 还是会显示出来的。如下图 :ps :这种情况只会在直接使用vue才会出现!!!解决方法<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title&...原创 2018-01-31 11:03:26 · 864 阅读 · 0 评论 -
01. vue是什么
vue是什么?在很久很久以前,我们用脚本修改某个html标签里的值的时候,是这样的:document.getElementById('#test').innerHTML = 'HELLO'现在使用了vue之后,你只需要修改一个值为HELLO,模块里的数据就会被更新。你在也不需要查找节点,然后更新数据vue具有如下特点 :简洁: HTML 模板 + JSON 数据,再原创 2017-02-23 16:37:30 · 844 阅读 · 0 评论 -
04.vue的生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如:<template> <div> <p>{{a}}</p> ...原创 2017-03-01 10:15:39 · 482 阅读 · 0 评论 -
02.vue常用指令
vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性。将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为。(比如html的em标签字体就会斜体,strong标签字体就会粗体)vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:v-modelv-if、v-else if 、 v-elsev-showv-forv-bindv...原创 2017-02-24 12:04:00 · 848 阅读 · 0 评论 -
10.路由
比如现在有a.vue和b.vue两个组件,在a.vue中点击某个按钮,跳转到b.vue,然后在b.vue中点击某个按钮,返回a.vue例子:a.vue<template> <div> <ul> <li>a</li> <li>a</li> <li&g...原创 2018-02-04 18:52:34 · 584 阅读 · 0 评论 -
09、组件
定义一个组件<template> <div> <span @click="clickMe">{{name}}</span> </div></template><script>export default { data(){ return{ name : 'tom'...原创 2018-02-04 01:17:18 · 592 阅读 · 0 评论 -
03.自定义指令
使用Vue的静态方法directive,我们可以定义属于自己的指令。语法 :Vue.directive(指令的名字, 回调函数)例子<template> <div> <input type="text" v-red> </div></template><script>import Vue f...原创 2017-02-27 18:06:41 · 546 阅读 · 0 评论