Vue笔记1

问：为什么要用虚拟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元素