DaftJayee的博客

1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；• 基于上面一点，SPA 相对对服务器压力小；• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处

在乐元素的笔试中考了这题，因为没有经常接触ElementUI，所以不了解Shadow Dom，在此记录：相同点：创建Document Object Model，优化性能。不同点：virtual DOM创建整个Document Object 的拷贝。Shadow DOM创建一部分的Document Object 的拷贝，这部分有自己的独立的作用域。...

ebook/index.js:router/index.js: { path: '/ebook', component: () => import('../views/ebook/index'), children: [ { path: ':fileName', // 动态路由,动态路径参数以冒号开头 component: () => import('../components/ebook/EbookReader')

App.vue中：<template> <div id="app"> <span class="text">ABCDEFG</span> <router-view/> </div></template><script>export default {}// 当DOM加载完毕时，设置html元素的fontSizedocument.addEventListener('DOMCo

字体准备：去谷歌字体网下载想要的字体文件：（http://www.googlefonts.cn/）其实也可以不下载直接引入，但是最好是下载下来后期部署到自己的静态服务器，因为用户不一定能访问到googlefonts或者访问速度很慢方法一：1.将下载的字体文件存到：2.在index.html中引入：<link rel="stylesheet" href="<%= BASE_URL %>fonts/daysOne.css">3.在想要引入字体的vue文件中设置font-

1.当我们用import的时候会如下报错2.去package.json中添加：3.在根目录下新建.babelrc{ "presets": ["es2015"]}cnpm i babel-core babel-preset-es2015 babel-cli5.重启项目后就不会报错了

一、在package.json的"dependencies"中添加jsonp在Terminal中运行npm install二、jsonp的封装1.在src/common/js目录下新建一个js文件，命名为jsonp.js2.jsonp的API：jsonp(url, opts, fn)url (String) url to fetch（用于获取的url）opts (Object), optional （选项，有下面四个）param (String) name of the qu

webpack.base.config.js中：

在package.json手动写入后，npm install即可

key能提高diff效率其实是不准确的。见vue/patch.js，在不带key的情况下，判断sameVnode时因为a.key和b.key都是undefined，对于列表渲染来说已经可以判断为相同节点然后调用patchVnode了，实际根本不会进入到答主给的else代码，也就无从谈起“带key比不带key时diff算法更高效”了。然后，官网推荐推荐的使用key，应该理解为“使用唯一id作为key”。因为index作为key，和不带key的效果是一样的。index作为key时，每个列表项的index在变

一、修改json.package在serve或者dev这里加上 --host 0.0.0.0"serve": "vue-cli-service serve --host 0.0.0.0",二、启动项目npm run serve或者npm run dev三、用手机打开网址：电脑ip地址:8080如果不知道电脑ip地址，则可用ipconfig查看或者webstorm启动项目完成后会显示App running at:Local: http://localhost:8080Netwo

一、在根目录src下创建vue.config.js如果不进行这一步，运行npm run build将可能导致路径不对的问题module.exports = { baseUrl:'./',}//详细配置参考：https://www.jianshu.com/p/b358a91bdf2d//写上面这里后理论上就可以提交了，公司自然会有运行index.html的环境//但是这样本地还是看不到的，想要本地能看到index.html内容的话进行第二步二、在router/index.js中将

一、传值起始组件export default {methods: { toDetails(item){ this.$router.push({ path:"/details",//目标路径 query:{ item,//要传的值 } })

一、情景：在选择城市功能中已经选择了上海，再次选择上海，则不应该重复对上海数据的请求二、在App.vue中加一层keep-alive<template> <div> <keep-alive> <router-view></router-view> </keep-alive> </div></template>三、Home.vue中操作data和相关生命周期

一、前提已经做过：1.懒加载路由https://blog.youkuaiyun.com/qq_43540219/article/details/1076714462.store.js的传值和localStorage的本地存储https://blog.youkuaiyun.com/qq_43540219/article/details/107692393二、 Home.vue:import {mapState} from 'vuex'computed:{ ...mapState(["cityName

一、目录结构src|components| city| City.vue List.vue(City.vue的子组件) home| Home.vue Banner.vue(Home.vue的子组件) store | index.js //vuex二、实现目标从City.vue中的List.vue传递值到Home.vue的Banner.vue中显示（选择城市后返回Home.vue在图下方"北京"这里显示）正常情况下传值是这

一、目录结构：src| component| home| Home.vue city| City.vue router | index.js二、实现目标：上图是Home.vue,点击左上角的“北京”跳转到City.vue进行城市选择三、设置路由router/index.js const routes = [ { //打开网站直接显示Home.vue path: '/', name: 'Home', com

一、下载axiosnpm install axios -S二、引入axios在main.js中//引入axiosimport axios from 'axios'Vue.prototype.axios=axios三、在组件中连接接口（这里以一个父组件传到子组件的过程来示例）Home.vue（父组件）中：export default {data (){ return{ spikeList:[],//定义一个数组用于存放接口传递过来

<template> <div class="tabs"> <swiper :options="swiperOption"> <!-- slides --> <swiper-slide> <!--注意这里必须要有:key否则，报错--> <!--原因：https://blog.youkuaiyun.com/qq_43540219/articl

要渲染的图片应该放在public文件夹中，因为public能直接从浏览器被访问到

解决方式一：更改vetur配置Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。更改vetur配置 vscode->首选项->设置->搜索（vetur）“vetur.validation.template”: true,改成：false解决方式二：设置对应的key在学习vue过程中遇到Elements in iteration expect to have ‘v-bind:key’ directives.’ 这个错误，查阅资料得知V

可能是css和vue-swiper的版本不统一导致的，去package.json中改到正确的版本执行命令npm install添加正确的依赖即可

iconfont官网：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a下载的文件中iconfont.css放入src/assets/css文件夹这些放入src/assets/font文件夹，然后修改iconfont.css中的路径，在路径前面加上"../font"使用的时候class里一定要有iconfont类，否则会显示成方块...

一、stylus的文件是.styl二、style中的样式引入@import '~@/assets/var.styl'三、stylus语法 $bg=orange

style1》style模块化 （如果不做模块化，那么当在B组件中引入A组件时，A组件里的样式也会影响到B组件，所以要在styel标签加上scoped使其模块化） <style scoped>2》样式穿透scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。 格式：父元素 >>> 子元

一、安装输入命令：winpty vue.cmd create 项目名选择第二个按空格选上Router然后一路回车，等待安装安装完后src中多了router.js（也可能是带有一个index.js的router文件夹）以及views文件夹启动项目后可以发现多了一个 “|About” 可进行单页面切换二、路由完整流程一、template的设置部分<template> <div> <router-view></router

axios（不是基于Vue的，基于Promise）1》下载：npm install axios --save2》引入axios import axios from 'axios' Vue.prototype.axios = axios3》使用 this.axios.get("路径").then()

***组件的通信（传值）1》父组件 传 子组件 父组件： <子组件 :变量=数据></子组件> 子组件： props:['变量']2》子组件 传 父组件（自定义事件） 子组件： this.$emit("自定义事件名称",'值') //自定义事件名称也就是下面的changeStr 父组件： <Footer @changeStr='changeBtn'></Footer> methods:{

vue实现简易购物车功能<template> <div> <table v-if='list.length > 0'> <thead> <tr> <td>序号</td> <td>商品名称</td> <td>商品单价</td>

vue的一些简单指令1》什么是指令：在节点上带有v-xxx的内容2》v-bind v-bind:value、v-bind:img 简写 :value3》v-on v-on:click、v-on:mouseover 简写： @click4》v-text 、 v-html 5》数据双向绑定:v-model 双向绑定的原理：发布者--》订阅者6》v-once：也可以插入值，但是不更新数据7》条件渲染 : v-if、v-else8》列表渲染 : v-forv-for='i

一、数据 <script> export default { data () { return { } } } </script>二、模板语法{{ 数据 }}三、计算属性 computed:{ } DEMO：<template> <div> <h1>{{ changeStr }}</h1> </div></template>&

一、vue-cli3.x安装命令：npm install -g @vue/cli二、安装完以后的测试vue --version三、创建vue项目cmd窗口：vue create 项目名警告：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作(不能用键盘的上下键控制选项)。你必须通过 winpty vue.cmd create 项目名 启动这个命令。四、项目目录结构.git（隐藏文件） ===》git initnode_modules ===》