vue笔记

1. created mounted区别：

created运行时，还未挂载到DOM，不能访问到$el属性，可用于初始化一些数据，但和DOM操作相关的不能在created中执行；monuted运行时，实例已经挂在到DOM，此时可以通过DOM API获取到DOM节点

2. vue-cli项目引入axios

安装axios：

npm install axios --save

只需要在需要的vue文件中引入axios就可以。

import axios from 'axios'
比如：

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    axios
      .get("http://localhost:50501" + "/getSign")
      .then(function(response) {
        alert(JSON.stringify(response.data.result));
      })
      .catch(function(err) {
        alert(err);
      });
  }
};
</script>

也可以在webpack.provideplugin里面配置全局引用

plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
axios: 'axios'
})
],

这样就可以不用在用到axios的vue文件里import axios

3. vue-cli工程支持less:
   需要安装相关插件，但不需要配置loader，已经默认配置好

npm install less less-loader --save-dev

4. webpack项目里，如果在css中引用图片，直接用地址，在js中引用图片，需要用require

5. v-html标签可以让字符串里的html内容得到解析

   
   

6. Vue组件懒加载

• 默认情况下，组件是在router/index.js头部这样加载的：
  import index from '@/components/index'
  @代表"src"，在配置文件中默认配置了别名:

resolve: {
   .......
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

这种写法会在加载首页时，加载所有组件，导致首页加载过慢，出现白屏

• 组件懒加载是在组件需要使用的时候才加载，不是在router/index.js头部就import，而是在路由表中import

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

• 用push进行路由跳转时，query里的字段会转为字符串
  比如下面的isHtmlTask boolean会转为"ture/false"

let isHtmlTask = (taskType == 2?true:false);
            
            vueapp.$router.push({
              name: "taskdetail",
              query: {
                taskid: taskid,
                isHtmlTask:isHtmlTask
              }
            });