小葵坤_易安的博客

<template> <div class="line-item"> <span class="item-label label-teach">Content</span> <a-select class="item-select" v-model="form.teach" showSearch all

一、什么是 VuexstateVuex 中的公共的状态, 我是将 state 看作是所有组件的 data, 用于保存所有组件的公共数据mutationsstore 中的 methods, 用于修改 state第一个参数是 state, 第二参数是 payload, 即自定义参数只包含同步操作actions通过 commit 提交 mutations，mutations 修改 state 中的数据可以包含异步操作二、实战目录main.jsimpor

1、解决第一次监听不到数据的方法this.$nextTick()this.$nextTick(function () { this.$bus.$emit("yulan", row); })setTimeoutsetTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100);2、子组件传值给父组件子组件中使用$emit触发事件的值传出去，父组件通过事件监听，获

插槽显不显示，怎样显示由父组件控制插槽在哪里显示由子组件控制组件模板种类：非插槽模板指html模板，如‘div、span、ul、table’；其显示与隐藏以及怎样显示由组件自身控制。插槽模板指slot；其显示与隐藏以及怎样显示由父组件控制；slot显示的位置由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板就显示在什么位置。父组件：<template> <div> <div&..

场景：在父组件的data中定义一个变量，希望在子组件中改变这个变量，并传递给父组件父组件：<template> <div> <select-dialog v-if="showChoiceDialog" :show.sync="showChoiceDialog" :select.sync="selectResult" ></select-dialog&g

安装插件：cnpm install vue-lazyload --save-devmain.jsimport Vue from 'vue'import VueLazyLoad from 'vue-lazyload'import router from './router'Vue.use(VueLazyLoad,{ loading:'/imgs/loading-svg/loading-bars.svg'});Vue.config.productionTip = falsen..

transition动画文档：https://cn.vuejs.org/v2/guide/transitions.htmltransition不需要引入，因其本身是Vue内置的组件（只展示了相关代码）index.vue（父组件）<template> <div class="index"> <div class="product-box"> <div class="container"> &lt..

插件使用教程：https://github.com/surmon-china/vue-awesome-swiper安装：cnpm install vue-awesome-swiper --save-dev

Q：为什么进行模拟数据？A：在做开发时，后端程序没有配齐，前端人员在做vue开发时，需要自己先模拟接口，模拟数据，等到后端数据配齐，提供好接口后，将项目中的接口换一下即可一、本地加载请求静态json文件的形式在 Public 文件夹下新建一个 mock 文件夹，新建一个json文件，如login.jsonlogin.json{ "status": 0, "data": { "id": 22, "username": "yian", "em

一、基于cros与jsonp跨域main.jsimport Vue from 'vue'import router from './router'import axios from 'axios'import VueAxios from 'vue-axios'import App from './App.vue'import env from './env'axios.defaults.baseURL='/api';axios.defaults.timeout=8000;axios

接口错误拦截：统一报错未登录时的统一拦截请求、返回值的统一处理安装插件：axios 请求数据vue-axios 将作用域对象挂载到vue实例中，方便我们用this调用main.js：import Vue from 'vue'import router from './router'import axios from 'axios'import VueAxios from 'vue-axios'import App from './App.vue' // 设置基础值 //

在src下新建一个storage文件夹，在文件夹下新建一个index.js文件，作为数据存储工具箱index.js：const STORAGE_KEY = 'mall';export default { // key: mall value: {"user":{"userName":"yian","age":22,"sex":1}} // 存储值 module_name为模块对象，即user setItem(key, value, module_name) {.

下载地址：https://github.com/vuejs/vue-devtools.git克隆项目到本地通过Gitgit clone https://github.com/vuejs/vue-devtools.git通过下载包的方式选择master形式，并下载项目压缩包：下载好后将其解压至项目中通过终端的方式进行操作运行 npm install 安装项目依赖运行 npm run build 进行编译生成将扩展程序添加到chrome浏览器..

一、Vue CLI4.0的安装与使用安装命令npm install -g @vue/cliyarn global add @vue/clivue --version安装文档https://cli.vuejs.org/guide/installation.html过程演示// 打开终端，安装脚手架npm i -g @vue/cli// 查看版本号vue --version// 创建项目vue create storecd storenpm run serve//

在vscode的搜索框中输入 useEslint: true；找到后将其改为 useEslint: false；重启项目

一、功能需求点击如下图所示的 “转账到账时间”，进入新界面选择到账类型。选择完成之后跳转到上一个路由，并在界面中进行相应展示。如下图所示，在选择界面选择了 “实时到账”，在该界面进行展示。二、代码展示其中使用了 Mint-UI 中的 Checklist：https://mint-ui.github.io/docs/#/en2/checklistTransferTime.vue<template> <div id="transfertime"> &

功能需求根据索引选择跟不同的人进行聊天代码展示mock.js：import Mock from 'mockjs'Mock.mock("/chatchild",{ 'result':[ { id:"001", imgurl:"/static/image/10.jpg", name:"XKDK", date:"09:23", words:"哈哈，好.

功能需求（1）点击导航栏中的相应文字，其所属栏目就高亮显示，，那这个页面所属的栏目；（2）点击文字之后，进入相应的页面，即实现路由跳转。实现代码Bottom.vue：<template> <div id="bottom"> <ul> <li :class="{checkColor:item.ischeck}" @click="changeColor(index)" v-for="(item,index) in nav" :.

Error: Avoided redundant navigation to current location: "/X".解决：在router文件夹下的index.js中加入代码：import Vue from 'vue'import Router from 'vue-router'import Chat from '../components/Chat.vue'import User from '../components/User.vue'import Find from '../com

安装 sass-loader 依赖包cnpm install sass-loader --save-dev安装node-sass依赖包cnpm intall node-sass --save-dev在build文件夹下的webpack.base.conf.js中的rules里添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass']}在使用的组件中修改 style 标签<style lang="scss">.

在 iconfont 官网中选择并下载需要使用的图标在 static 文件夹中添加iconfont.js文件在index.html文件中引入iconfont.js文件，需注意JS文件的引入路径，如<script type="text/javascript" src="static/iconfont.js"></script>创建 icon-components 组件<template> <svg class="svg-icon" aria-hidde.

一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效的D...

每个钩子函数都在什么时间触发：1.beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。2.created实例已经创建完成之后被调用；在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。...

步骤：（1）生成组件（2）导入组件，注册组件（3）使用组件1.组件的声明：可在scr目录下新建一个文件名为Components，在文件中新建一个文件夹，可命名为Home.vue<template> <div id="Home"> <p>{{msg}}</p> </div></templa...

To Do List完成代办事项：<template> <div id="app"> <div class="text-left title"> <span>To Do List</span> <input @keydown="addList" class="userin" type="text...

条件渲染v-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染

在vue项目里使用vue-router，需先安装：cnpm install vue-router --save在main.js里面，主入口去配置路由：main.js：import Vue from 'vue'import App from './App.vue'//引入组件import Home from './Components/Home.vue';import C...

1.父组件给子组件传值在父组件上绑定属性，在子组件里面接受传值（props）传值、传对象、传方法可在接受传值的时候，规定传值的类型例1：父组件为APP.vue,子组件为Home.vueAPP.vue：<template> <div id="app"> <div class="par_b"> <p>{{msg}}&...

一、vue数据绑定、绑定属性、循环渲染数据1.数据绑定（1）变量的绑定：表达式{{ }}（2）对象的绑定（3）其他的绑定指令v-html指令：绑定当前元素的html标签，可自动解析值里面的html标签v-text指令：将值放进去，不会解析里面的html标签，也可进行变量的绑值<template> <!-- 里面只能有一个根标签 --> <div ...

1.使用vue-resource安装vue-resource：cnpm install vue-resource --save去main.js文件配置vueResource（先导入，再使用）：//导入vue-resoueceimport vueResource from 'vue-resource';//使用 与整个Vue实例进行关联，关联之后才能用vueResource进...

在Router.js路由中配置并引入、挂载组件：//引入组件import Home from '../Components/Home.vue';import List from '../Components/List.vue';import News from '../Components/News.vue';//导入vueimport Vue from 'vue';//先导入...

一、vue的实现原理vue的双向绑定是由数据劫持结合发布者－订阅者模式实现的，那么什么是数据劫持？vue是如何进行数据劫持的？即就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情。var vm = new Vue({ data: { test : { a: 1...

一、基本用法v-model 指令对数据的双向绑定v-model 指令：用于在表单类元素上的双向绑定数据<input type="text" v-model="message"><p>输入的内容是：{{message}}</p>data(){ return{ message:"" }}说明：在输入框输入的...

阿里巴巴矢量图标库：https://www.iconfont.cn/1.在图标库中找到所需图标后，将其添加至购物车，再添加至项目中：2.将项目下载到本地，解压后可得到如图文件：3.在vue项目下的src可新建一个名为assets的文件夹；在该文件夹下新建一个名为css的文件夹，在其中可放入css、js、html文件，再新建一个名为font的文件夹，在该文件夹下放入eot、svg、woff...

错误原因：一个template中有两个一样的v-for<p class="h6 un_thing">我的未完成：</p><ul v-for="(item,index) in lists" :key="index"> <li v-if="!item.isck"> <input type="checkbox" :checked="...

用cnpm run dev 运行vue项目时，出现以下错误：解决方法：cnpm install sass sass-loader --savecnpm install node-sass --save最后运行cnpm run start即可注：解决方案需视情况而定，看使用的CSS语言是什么（常规或less 或sass）若是常规，执行 cnpm install stylus-loade...

vue-cli手脚架构建的项目经常报eslint检查错误，cmd运行命令npm run dev之后出现报错。关闭Eslint验证方法：找到build文件夹下webpack.base.conf.js打开：注释掉下面代码：关闭了Eslint验证，重新开启则去掉代码注释。...

1.以简单的方式获取JSONPfetchJsonp('/users.jsonp') .then(function(res) { return res.json(); }).then(function(json) { console.log('parsed json', json); }).catch(function(ex) { console.log('pars...

官网：https://mint-ui.github.io/#!/zh-cn一、安装// 安装# Vue 1.xcnpm install mint-ui@1 --save# Vue 2.0cnpm install mint-ui --save二、引入组件// 引入全部组件import Vue from 'vue';import Mint from 'mint-ui';Vue....

配置环境命令1.Node安装检查node –v与npm –v2.cnpm -v可能报错不是内部命令3.安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org4.cnpm –v5.检查vue不存在安装则搭建vue开发环境，安装vue的脚手架工具(先使用cnpm 安装 )cnpm install ...