vue3.0入门结构语法关键字生命周期

vue3.0入门

渐进式:

vue3.0

推荐：

node安装16版本，安装步骤百度

taobao镜像失效了，设置如下仓库，国内镜像，下载依赖速度变快

npm config set registry https://registry.npmmirror.com

检查设置：

npm config get registry

安装vue/cli

npm install -g @vue/cli@5.0.8

vue/cli安装失败让你升级到npm商店到10.2.3其实执行了update升级指令也是不行的. 直接安装与node -V 16版本匹配的vue/cli版本 5.0.8

创建项目：

初学者，可以不适用语法检测和ts等

了解：

找个终端: vue ui 可视化 项目管理器

访问: http://localhost:8000

课上选择的手动,为了教你们预设了哪些依赖

点击创建项目

创建项目-仪表盘

启动停止

安装依赖

项目配置

打包的目录dist

打包指令: npm run build

打包出来后记得项目右键

这样可以看到dist目录

CSS文件的设置

你尽管写内联样式

, 最终他会抽取出来如上图形成单独的css文件

项目任务:

然后可以停止这个vue ui了 . 使用ctrl+c 结束

切换到这个界面 ctrl+C

开始开发

idea 打开该项目文件夹:

项目目录介绍

package.json

如果要修改端口号:

注意:

vue3.0鼓励大家不要用单个单词命名vue文件, 所以语法检查页面是一个单词的会报错, 需要改成多个单词, 并且ctrl+c结束 再启动

使用vue-router:

https://router.vuejs.org/installation.html

安装

npm install vue-router@4

项目新建两个文件夹:

一个用来放页面,一个用来放路由

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'

const routes = [
    // {
    //     path: '/',
    //     name: 'home',
    //     component: HomeView
    // },
    {
        path: '/item',
        name: 'item',
        component: () => import('../views/item/index'),
        // children:[
        //     { path: 'add', component: add}
        // ]
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

修改app.vue代码:

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

新增一个item页面

<template>
  <div><h1>hello</h1></div>
</template>`
<script>
export default {
  name: "itemIndex"
}
</script>

<style scoped>

</style>

测试访问: http://localhost:8080/item

使用elementplus:

效果如下

关于vue的model部分

准备了一个非常简单的案例,主要为了复习script里面的几个知识点

<template>
  <div>
    <p>计数器的值: {{ count }}</p>
    <button @click="increment(1)">增加 1</button>
    <button @click="increment(5)">增加 5</button>
    <button @click="decrement(1)">减少 1</button>
  </div>
</template>
<script setup>
import {ref} from 'vue';

const count = ref(0);  // 创建一个响应式变量 count，并初始化为 0

const increment = (value) => {
  count.value += value;  // 定义增加 count 的方法，接受一个参数 value
};

const decrement = (value) => {
  count.value -= value;  // 定义减少 count 的方法，接受一个参数 value
};

</script>

<style scoped>

</style>

解释其关键的几个关键字:

setup:

组合式API setup

1. 一个新的配置项，值为一个函数；组件中所用到的所有数据、方法等，均要配置在setup中

原来是这样写的

组合API : data，method，computed，所有数据方法全写在setup里 ,跟咱们的java类就很类似了. 一个类里面又可以写属性又可以写方法

复杂点的写法:

<script>
import { ref } from 'vue';
export default {
  name: "itemIndex",
  setup() {
    const count = ref(0);

    const increment = (value) => {
      count.value += value;
    };

    const decrement = (value) => {
      count.value -= value;
    };
	// 要有
    return {
      count,
      increment,
      decrement
    };
  }
}
</script>

简单写法,跟课上一样:

<script setup>
import {ref} from 'vue';

const count = ref(0);  // 创建一个响应式变量 count，并初始化为 0

const increment = (value) => {
  count.value += value;  // 定义增加 count 的方法，接受一个参数 value
};

const decrement = (value) => {
  count.value -= value;  // 定义减少 count 的方法，接受一个参数 value
};
</script>

ref:

(1)函数参数可以是基本数据类型，也可以接受对象类型

(2)如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成

接受一个内部值并返回一个响应式且可变的 ref 对象

节约this.调用

数组:

const bannerArr = ref(["/imgs/b1.jpg", "/imgs/b2.jpg", "/imgs/b3.jpg", "/imgs/b4.jpg"])
console.log(bannerArr.value)

变量:

const activeIndex = ref('1')
console.log(activeIndex.value)

对象:

const person = ref({
  name: "jx",
  age: 18,
  role: ["教师","父亲","儿子"]
});
console.log(person.value)

reactive

不接受基本类型 String number …

(1)它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy。

(2)参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs

他可以当作一个java的对象可以调用属性还可以调用方法

完整案例:

<template>
  <div>
    <p>计数器的值: {{ state.count }}</p>
    <button @click="state.increment(1)">增加 1</button>
    <button @click="state.increment(5)">增加 5</button>
    <button @click="state.decrement(1)">减少 1</button>
  </div>
</template>
<script setup>
import {reactive,ref} from 'vue';

 // 注意这里
let state = reactive({
  count: 0 ,
  decrement: (value) => {
    state.count -= value;  // 定义减少 count 的方法，接受一个参数 value
  },
  increment: (value) => {
    state.count += value;  // 定义增加 count 的方法，接受一个参数 value
  }
})


const person = ref({
  name: "jx",
  age: 18,
  role: ["教师","父亲","儿子"],

});
console.log(person.value)


</script>

<style scoped>

</style>

响应式变量:

响应式的变量，可以在变量发生变化的同时，让依赖于这个变量进行渲染的视图也同步发生变化，简单的说，就是以数据驱动视图。

同时，在响应式变量中有一种特殊的使用方式v-model，可以在视图发生变化时，也同步的修改变量的值，我们把这种特殊的方式称为：双向绑定

定义方法:

const decrement = (value) => {
  count.value -= value;  // 定义减少 count 的方法，接受一个参数 value
};

lang=“ts”

<script  setup>

删除lang=“ts”

elementPlus报错:

elementPlus报错:

或者新建项目勾选

vue ui方式手动

compute函数

computed函数与Vue2.x中computed配置功能一致

以下自己看

vue3.0和vue2.0区别 ?

https://zhuanlan.zhihu.com/p/630633027

vue2.0写法:

<script>
export default {
  name: "EmpListView",
  data() {
    return {
      emp: {name:"",salary:"",job:""},
      arr:[{name:"张三",salary:3000,job:"销售"},{name:"李四",salary:4000,job:"人事"}]
    }
  },
  methods: {
    add() {
      this.arr.push({name:this.emp.name,salary:this.emp.salary,job:this.emp.job});
    },
    del(i){
      this.arr.splice(i,1);
    }
  },
}
</script>

vue3.0TypeScript和Vite

vue 3.0 生命周期

vue2.0 生命周期图和代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列</title>
</head>
<body>
<div id="app">
    <h1 id="h1">{{msg}}</h1>
    <input type="text" v-model="msg">
    <button @click="demo">改变数据</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>var app = new Vue({
        el: "#app",
        data: {
            msg: "vue生命周期"
        },
        methods: {
            demo() {
                this.msg = "变化之后数据";
            }
        },
        computed: {},
        beforeCreate() {//这是第一个生命周期函数 这个函数执行时候 vue完成自身内部事件 生命周期函数注册
            console.log("beforeCreate:", this.msg);
        },

        created() {   //这是第二个生命周期函数 这个函数执行时候 vue完成自身内部事件 生命周期函数注册 自定义 data methods,computed 注册
            console.log("created:", this.msg);
        },
        beforeMount() { //这是第三个生命周期函数 这个函数执行的时候vue将el指向html编译为template,还没有template中数据渲染
            var innerText = document.getElementById("h1").innerText;
            console.log("beforeMount:", innerText);
        },
        mounted() {  //这是第四个生命周期函数 这个函数执行的时候vue根据template进行复制并创建虚拟dom替换el指向html 此时页面渲染完成之后数据
            var innerText = document.getElementById("h1").innerText;
            console.log("mounted:", innerText);
        },
        beforeUpdate() {//这是运行阶段第一个函数,当这个函数执行时候此时data中数据已经发生变化,但是页面中数据还没有变化
            console.log("beforeUpdate:", this.msg);
            var innerText = document.getElementById("h1").innerText;
            console.log("beforeUpdate:", innerText);
        },
        updated() {//这是运行阶段第二个函数,当这个函数执行时候此时data中数据和view中数据一致
            console.log("updated:", this.msg);
            var innerText = document.getElementById("h1").innerText;
            console.log("updated:", innerText);
        },
        beforeDestroy() {//销毁阶段 第一个生命周期函数 这个函数执行时候 刚开始销毁 此时存在事件监听 双向绑定机制...
            console.log("beforeDestroy:", "==========");
        },
        destroyed() {//销毁阶段 第二个生命周期函数 这个函数执行时候 此时存在事件监听 双向绑定机制全部销毁
            console.log("destroyed:", "==========");
        }

    })</script>

vue3代码示例:

setup 方法里面定义的不会执行. 外面定义的会执行 和created同理 .且在之前

<template>
  <div>
    生命周期
  </div>
</template>
<script>import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from "vue";
export default {
  name: "App",
  setup() {
    console.log("类似于created")

   //  挂载的生命周期
   onBeforeMount(()=>{
      console.log("Vue3.0类似于beforeMount ");
   })

  onMounted(()=>{
      console.log("Vue3.0类似于mounted ");
  })

  //   跟新阶段的生命周期
  onBeforeUpdate(()=>{
      console.log("Vue3.0类似于beforeUpdate ");
   })

    onUpdated(()=>{
      console.log("Vue3.0类似于 updated  ");
   })


  // 销毁阶段生命周期
  onBeforeUnmount(()=>{
      console.log("Vue3.0类似beforeDestory ");
   })

    onUnmounted(()=>{
      console.log("Vue3.0类似于destoryed ");
   })

  },


  beforeCreate(){
    console.log( 'vue2.0 beforeCreate' )
  },
  created(){
    console.log( 'vue2.0 created' )
  },
  beforeMount(){
    console.log( 'vue2.0 beforeMount' )
  },
  mounted(){
    console.log( 'vue2.0 mounted' )
  },
  beforeUpdate(){
    console.log( 'vue2.0 beforeUpdate' )
  },
  updated(){
    console.log( 'vue2.0 updated' )
  },

  // vue3中你仍然可以去使用vue2的生命周期。
  // 只是需要注意的是:beforeDestroy==>变成了 beforeUnmount
  //                destroyed==> unmounted
  // 我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
  // setUp这个生命周期发生在beforeCreate和created之前的哈。
  beforeUnmount() {
    console.log( 'vue2.0 beforeDestroy' )
  },
  //destroyed==> unmounted
  unmounted(){
    console.log( 'vue2.0 destroyed' )
  }
};</script>

总结:

beforeCreate -> 请使用 setup()
created -> 请使用 setup()

我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
setUp这个生命周期发生在beforeCreate和created之前的哈。
两种形式的生命周期函数是可以共存，它们都会被执行。

所有的ui框架都记得选择支持3.0