创建脚手架

  • vue-cli 第二代已经停止维护
  • @vue-cli 第三代脚手架、支持 vue3.x 及 typescript 等
1
2
npm i -g vue-cli
npm i -g @vue/cli

vue 不同版本文件介绍

1
2
3
4
vue.runtime.js ：生产的运行时，需要预编译，比完整版小30%左右，前端性能最优
vue.runtime.esm.js：生产运行时，esm标准。
vue.esm.js：开发运行时，esm标准。
vue.runtime.common.js:生产运行时，commonJS标准。
  • vue.min.js
  • vue.esm.browser..js
  • vue.esm.js
  • vue.runtime.esm.js

开始

render 渲染组件

1
2
3
4
5
6
7
8
9
import Vue from "vue";
import App from "./App.vue";
import router from "@/router";

new Vue({
  el: "#app",
  router,
  render: (h) => h(App),
});

component 渲染组件 ( template 解析需要通过 vue.esm.js 支持)

1
2
3
4
5
6
7
module.exports = {
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
import Vue from "vue";
import App from "./App.vue";
import router from "@/router";

new Vue({
  el: "#app",
  router,
  template: `<App/>`,
  components: {
    App,
  },
});

Vue 实例属性

  • el 挂载元素
  • render 接受一个 vue 组件，将其替换到 el 挂载元素
  • computed 计算属性

-1. 不能用异步
-2. 不能改变 data 的值

  • data 组件的内部状态
  • methods 事件属性
  • components 注册组件
  • watch 数据监听
  • 生命周期钩子函数

Vue 实例对象

1
2
3
4
5
6
7
8
9
const vm = new Vue();
// 相当于el挂载元素, $mount为手动挂载
vm.$mount;
// 手动设置对象的双向绑定
console.log(vm.set);
// 获得vue实例的挂载元素
console.log(vm.el);
//
console.log(vm.data);

Vue 组件内部获得实例的属性、方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
      this is home page
  </div>
</template>

<script>
export default {
    name:"home",
    mounted(){
      this.$set();
      this.$el();
      this.$data
      this.$forceUpdate()
    }
}
</script>

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
data(){
	return {
  	num1:1,
    num2:2
  }
},
computed:{
  // 监听实例中属性的值的变化，动态实时去计算（看起来是方法，用起来像data属性，必须有返回值）
  // 相当 watch的变形
	summary(){
  	return this.num1+this.num2;
  },
  // 计算属性是只读属性，如果想修改，可以通过get、set访问器来实现
  total:{
  	get(){
      // 必须返回一些值
    	return somevalue
    },
    set(newVal){
      // 接受新值
    	someValue = newVal;
    }
  }
}

有些时候计算属性的依赖参数，不能通过组件内部来获取时，我们可以通过 methods 的传参，替代 computed

watch 监听

1
2
3
4
5
6
7
8
9
10
//监视是否是404页面然后将不需要的取消展示
watch:{
  n:{
    $route(newVal,oldVal){

    }，
    deep：true ，深度监控
    immediate:true //立即监控
  }
}