好好学习，天天向上！

把main.js文件删除在src文件夹下建两个文件main-prod.js、main-dev.jsmain-prod.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import '@/assets/reset.css'import TreeTable from 'vue-table-with-tree-grid'Vue.com

直接添加属性的问题<template><div><p v-for="(value,key) in item" :key="key">{{ value }}</p><button @click="addProperty">动态添加新属性</button></div></template><script>export default {data:()=>{ item:{

概念在下次 DOM 更新循环结束之后执行延迟回调```什么时候会用到$nextTick有时候我们想要在created中获取到dom元素，就可以使用$nextTick（）created(){let that=this;that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素});}如果想要在修改数据后立刻得到更新后的

概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，和 transition 相似，keep-alive 是一个抽象组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件中作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max

Prop1 . prop 大小写Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'})<!-- 父组件中 kebab-case 的 --><blog-post post-title="hello!"></blog-post>2 .单项数据流所有的 p

一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul><li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />那么这背后的逻辑是什么，key的作用又是什么？key是给每一个vnode的唯一id，也是di

一、Vue路由基础用法：1 .安装npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值.Vue.filter('global-filter',(val,...args)=>{console.log(`需要过滤的数据是:${val}`)return val + ' 过滤器追加的数据'})var app = new Vue({el:.

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时inserted: function (el) {// 聚焦元素el.focus()}})<input v-focus>2 下拉菜单点击

一、 什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx`// -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？…以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组.

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right修饰键：.ctrl.alt.shift.meta<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>与按键别名不同

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})

1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p></div><!-- 引入vue --><script src="/node_modules/vue/dist/vue.js"></script><script ty

一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）1. 父组件parent.vue代码如下：父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren

概念通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后.

简单粗暴的答案直接走起：答： 总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。载入前/后： 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.m

一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致数据刚开始没有值，此时我们页面也会进行渲染空数据就会报错。我们可以