问：为什么要用虚拟DOM？
答：虚拟DOM其实就是对象，操作对象的成本比操作DOM的成本更低，所以要用虚拟DOM
问：为什么vue环境的项目里不会出现原始的大括号？
答：在vue实例化之前 app里面的都是普通文本，而.vue文件里面的都是组件，当mounted之前，组件里的 {{}} 早就在编译过程中被替换了，所以你不会看到{{}}，
vue导出excel：
<template>
<div id="app">
<button type="button" @click="export2">export</button>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default{
methods:{
export2() {
let table = document.getElementById('table');
let worksheet = XLSX.utils.table_to_sheet(table);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
// 以上四行也可以直接一行搞定，如果不需要对表格数据进行修改的话
// let workbook = XLSX.utils.table_to_book(document.getElementById('table'))
try {
XLSX.writeFile(workbook, 'text.xlsx');
} catch(e) {
console.log(e, workbook);
}
}
}
}
</script>
Props的验证功能，在普通的html引入vue的写法里，就算从外面引入的prop不合法，仍然不会报错；在用了vue-cli环境的项目里，从外面引入的prop不合法，会报错，但是注意，虽然会报错，但是浏览器仍然会尽量去渲染
问：怎么优化下面的代码，让代码更简洁？
<input type="text" v-on:input="onInput" v-on:focus="onFocus" v-on:blur="onBlur">
答：
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
如果一个vue文件的id是a，另一个vue文件的id也是a，两个vue文件都写document.getElementById('a')时，就会出现问题
如果想让vue文件的style标签里的某些内容在全局生效，这样写：
/deep/.abc{}
或者这样：
::v-deep .abc{}
这样，.abc{}的代码，就会在全局生效
问：我移动了一下上次那个项目的目录，在项目外面多套了一层文件夹，运行时就产生了截图里的报错，怎么解决？
答：最简单的解决办法就是：删除node_modules文件夹，再cnpm i，就能运行了，更高级的解决方案和思路就是：可能有很多依赖在安装时带上了项目的路径配置在里面，所以会这样，你去modules目录搜索就能看到路径的内容
当运行npm run serve时，其实是去运行node_modules下的.bin文件夹下的vue-cli-service.cmd
打包以后的路径，要写相对路径，不能写'/static/xxx'，要写static/xxx，写相对路径时，包放在哪里都能用，也能在浏览器里双击打开，但是如果是写绝对路径，就只能放在服务器里才能运行，并且只能放在固定的某个服务器目录下
问：为什么点击‘给a加1’按钮时，为什么addToB这个方法也被调用了？我的理解是：a被修改了，但是b和age没有被修改，为什么会调用addToB这个方法呢？
答：
发现每次调用一个methods，页面似乎是会完全重新渲染一遍，加上我是直接在div里的methods后面加上括号了，所以里面的methods会再执行1遍
参考链接：https://www.cnblogs.com/dangdanghepingping/p/10160975.html
问：keep-alive有什么问题吗？
答：嵌套路由可能无法正确显示
修改了webpack配置以后，要重启服务，新代码才能生效
vue文件里不要写css文件，要在webpack.base.conf.js里的app入口文件里加入index.css文件地址就行了，在index.css引入各个组件所需要的css文件
问：https://cn.vuejs.org/v2/guide/list.html：vue给data的对象同时添加多个属性时，我认为Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })和vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })的区别是：第1种写法没有改变vm.userProfile的地址，第2种写法改变了vm.userProfile的地址，为什么要改变地址才能给data的对象添加响应式属性呢？
答：js无法直接检测数组和对象的变化，诸多方法里面给一个新的对象和数组成本最低了
问：需求：判断是否登录，如果没有登录，跳到登录页，代码：
结果页面陷入了死循环：
如何解决上面这个问题？
答：判断id是否存在前加入这段代码：
参考下面这个链接：
https://segmentfault.com/a/1190000011042794
代码：
问：按理说，this.$nextTick是在dom发生变化时调用的，怎么alert('已经隐藏了');的时候，div1还没隐藏？
答：在alert('已经隐藏了');之前获取#div1，发现是null，我的理解是：其实这时#div1已经没有了，只是chrome让#div1消失的时间延后了，在firefox浏览器里测试是没有这个问题的
今天复习vue生命周期的beforeUpdate时，遇到一个疑惑，在beforeUpdate里打印age这个div的时候，里面的值是1，打印age.innerHTML是真正的更新前的值，谁知道这其中的原因吗？
因为age是一个引用类型，console.log打印引用类型就有这样的特性，显示的是最新的值。和vue的生命周期无关
代码如下：
<button-counter2></button-counter2>
<button-counter2></button-counter2>
var buttonCounter2Data = {
count: 0
}
Vue.component('button-counter2', {
data: function () {
return buttonCounter2Data
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
点击第1个<button-counter2>，第2个<button-counter2>的count值会被影响到吗？
不能调用计算属性，因为计算属性不是函数
问：因为我访问codesandbox.io太慢了，找了另一个插件，http://js.jirengu.com/copolofuka/1/edit?html,js,output
同样的判断条件，而且判断条件都是false，v-show能显示里面的东西，v-if却不能，你们能帮我看下吗？
答：原因是v-show 不支持 <template> 元素
export default {
data(){
return {
true_bool : true,
class_obj : {
class3 : this.true_bool, //问：class3的值是多少？
}
}
},
}
问：问你们一个问题，vue文档上写‘相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。’，但是我每次鼠标瞄到div时，title显示的时间一直不变，这是怎么回事呢？
答：官网有说明为啥时间不会变，只有触发render的时候methods才会重新调用啊，计算属性是里面依赖的有变化才会重新调用
vue的命令如果执行速度慢，就先运行npm config set registry https://registry.npm.taobao.org
问：vue如何实现按需加载配合webpack设置？
答：把import Home from './components/Home.vue';改成const Home = r => require.ensure([], () => r(require('./components/Home.vue')));
我今天看了下vue-router的一篇博客（https://blog.csdn.net/qq_31968791/article/details/79099879），里面有这么一句话：客户端中的路由，实际上就是dom 元素的显示和隐藏。
那是不是vue-router的跳转，其实就是#app的内容的更改？我在chrome浏览器里切换路由，发现<div id='app'>这个元素变色了，变色了就表示重新渲染的意思
问：判断浏览器url里有没有'id'，如果没有id就alert(‘你还没有登录’)，这个功能怎么实现？
答：
引入router
router.beforeEach((to, from, next) => {
let id = to.query.id;
if(id){
console.log('成功');
}
else{
console.log('失败');
}
});
问：上面的报错怎么解决？
答：把attributeName改成attributename也就是改成小写的，就不会报错了，可能v-bind的属性名不允许有大写的
路由标签写法1：<router-link :to="/content?id=123">{{key}} -- {{item}}</router-link>
<!--这种写法，配置路由的时候写path: '/content'就行了，不需要后面加上/id,也就是不需要写path: '/content/id'-->
路由标签写法2：<router-link :to="/content/123">{{key}} -- {{item}}</router-link>
<!--这种写法，配置路由的时候写path: '/content'不行，需要后面加上/id,也就是需要写path: '/content/id'，因为这里是有2层路由，上面这种写法只有1层路由，这里是用路由传值，上面第1种写法是用浏览器的url传值-->
当props和data里的属性名一致时，浏览器是渲染props里的值的
安装npm模块的时候，最后要加上' --save'，这样可以把包的名字写入到项目的配置文件里，以后把代码放到其他电脑、发给别人时也能用
事件中的$event的作用：1.获取自定义属性 2.获取当前DOM元素
网友评论