您现在的位置是：首页 >技术杂谈 >VUE3的使用网站首页技术杂谈

VUE3的使用

帅得真的是无敌了 2023-05-22 00:00:03
简介VUE3的使用

文章目录

一、Vue3基础语法

1、Vue开发准备

Vue CLI Vue.js 开发的标准工具，Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

  1. 安装vue工具Vue CLI：npm install -g @vue/cli
  2. 验证Vue CLI是否安装成功：vue --version
  3. 通过vue命令创建一个vue项目：vue create vue-demo
    1）此时选择第三个选项，即手动选择特性。
    2）然后只选择1和3，即Babel转换器（如ES6语法转ES5语法）和Web项目。
    3）选择3.x版本（即vue3）
    4）选择存放配置的文件
    In dedicated config files 专用配置文件
    In package.json在package.json文件
    此时选择In dedicated config files，然后输入n，不保存当前配置。
    如果输入y的话需要输入文件名字，下次可以直接使用该配置文件，不用手动选择特性。
  4. 项目创建完成后，运行项目
    1）第一步：进入项目根目录：cd vue-demo
    2）第二步：启动项目：npm run serve
  5. 安装Vue高亮插件
    VSCode中安装插件vetur或者volar都可，前者针对Vue2版本，后者针对Vue3版本。
    此时使用vue3，安装Vue Language Features（volar）即可。
    还可以安装vscode-icons图标插件。

2、Vue的模板语法

  1. 项目src根目录下的assets，相当于java的static，都是存放公共资源的，存放类似于js等。
    项目src根目录下的components使用来存放组件的，也就是其他的.vue文件。而App.vue是主入口的组件，即所有组件都从该文件开始。
    main.js相当java的main方法，即程序的入口文件。

  2. 文本数据，文本数据绑定最常见的形式就是使用“Mustache” (双大括号{{}}) 语法的文本插值，将components目录下的HelloWorld.vue修改如下

    <template>
  <div class="hello">
    <h1>vvvvv</h1>
    <span>{{message}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message:"阿里嘎多美羊羊桑"
    }
  }
}
</script>

    即通过data(){return }的方式设置message，并将message文本的值传递到双大括号{{}}中。

  3. 原始HTML数据，需要使用v-html指令

    <template>
  <div class="hello">
    <h1>vvvvv</h1>
    <span>{{message}}</span>
    <div v-html="rawHTML"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message:"阿里嘎多美羊羊桑",
      rawHTML:"<a href='https://www.baidu.com'>百度</a>"
    }
  }
}
</script>

  4. HTML属性（Attribute）数据，Mustache语法不能在HTML属性中使用，需要使用v-bind指令，

    <template>
  <div class="hello">
    <h1>vvvvv</h1>
    <span>{{message}}</span>
    <div v-html="rawHTML"></div>
    <div v-bind:id="dynamicId"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message: "阿里嘎多美羊羊桑",
      rawHTML: "<a href='https://www.baidu.com'>百度</a>",
      dynamicId: 111
    }
  }
}
</script>

    此时v-bind:可以简写成:
    并且此时需要按f12进入到开发工具中，进入html中的body标签，查看是否赋值成功。

  5. 在{{}}Mustache语法中，可以使用JavaScript表达式

    <template>
  <div class="hello">
    <h1>vvvvv</h1>
    <span>{{message}}</span>
    <div v-html="rawHTML"></div>
    <div v-bind:id="dynamicId"></div>
    <div>{{ num/2 }}</div>
    <div>{{ flag?"1":"0" }}</div>
    <span>{{message.split("").reverse().join("")}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message: "阿里嘎多美羊羊桑",
      rawHTML: "<a href='https://www.baidu.com'>百度</a>",
      dynamicId: 111,
      num: 10,
      flag: true
    }
  }
}
</script>

    但是不能使用流程控制等。

3、条件渲染

  1. v-if和v-else指令，当指令的表达式为true时被渲染。

    <template>
  <div class="hello">
      <p v-if="flag">true</p>
      <p v-else>false</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      flag : true,
    }
  }
}
</script>

    即跟java中的if和else一样的流程控制。

  2. v-show指令，当指令的表达式为true时展示元素。

    <template>
  <div class="hello">
      <p v-if="flag">true</p>
      <p v-else>false</p>
      <p v-show="flag">true</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      flag : true,
    }
  }
}
</script>

  3. v-if和v-show的区别
    1）v-if是真正的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
    2）v-if是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
    3）相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
    4）一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
    即v-if是条件为真时，才渲染，即可能会进行多次渲染；而v-show是在页面初始化时就渲染，即只渲染一次。

4、列表渲染

  1. 使用v-for指令进行列表渲染

    <template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      list:[
        {
          id:1001,
          name:"zzx"
        },
        {
          id:1002,
          name:"zxl"
        },
        {
          id:1003,
          name:"zhs"
        }

      ]
    }
  }
}
</script>

    此时v-for后面的item in list即将list遍历，赋值给item，:key即将唯一的item的id属性赋值给key，然后item的name属性展示。
    (item,index)，index即遍历的下标，如果真的没有唯一key，可以使用Index给:key赋值。

  2. 维护状态
    当 Vue 正在使用 v-for 更新渲染的元素列表时，它默认使用“就地更新”的策略。
    如果数据项的顺序被改变（即根据id判断），Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素（即列表重新渲染），并且确保它们在每个索引位置正确渲染。
    为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：

5、事件处理

使用v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件时，执行一些JavaScript。

  1. 通过按钮监听点击事件后，以data传参以及表达式的方式来显示，或者使用事件处理方法，即在事件触发时，调用该方法。

    <template>
  <div class="hello">
    <button @click="counter+=1">点击counter={{ counter }}</button>
    <button @click="clickHandle">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      counter:0
    }
  },
  methods:{
    clickHandle(event){
      console.log("点击！");
      console.log(event);
      event.target.innerHTML="被点击过了";
    }
  }
}
</script>

    方法可以添加event事件对象参数，对该event对象进行操作。

  2. 内联处理器中的方法（事件传递参数）

    <template>
  <div class="hello">
    <button @click="counter+=1">点击counter={{ counter }}</button>
    <button @click="clickHandle">按钮</button>
    <button @click="say('mother')">say mother</button>
    <button @click="say('fuck')">say fuck</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      counter:0
    }
  },
  methods:{
    clickHandle(event){
      console.log("点击！");
      console.log(event);
      event.target.innerHTML="被点击过了";
    },
    say(data){
      console.log(data);
    }
  }
}
</script>

    即在点击事件中绑定say方法并设置参数，然后通过say方法传递参数。

  3. 最后即在给表单遍历添加数据时，绑定一个点击参数clickItemHandle(item)，将item或id传入，点击后进行一个处理操作

    <template>
  <div class="hello">
    <button @click="counter+=1">点击counter={{ counter }}</button>
    <button @click="clickHandle">按钮</button>
    <button @click="say('mother')">say mother</button>
    <button @click="say('fuck')">say fuck</button>
    <ul>
      <li @click="clickItemHandle(item)" v-for="(item,index) in names" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      counter:0,
      names:["zzx","zxl"]
    }
  },
  methods:{
    clickHandle(event){
      console.log("点击！");
      console.log(event);
      event.target.innerHTML="被点击过了";
    },
    say(data){
      console.log(data);
    },
    clickItemHandle(data){
      console.log(data);
    }
  }
}
</script>

6、表单输入绑定

  1. 表单输入绑定，使用v-model指令来进行双向绑定。

    <template>
  <div class="hello">
    <input type="text" v-model="username" />
    <input type="text" v-model="password" />
    <p>{{ username }}:{{ password }}</p>
    <button @click="clickGetUserName">获取用户名</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      username:'',
      password:''
    }
  },
  methods:{
    clickGetUserName(){
      console.log(this.username);
    }
  }
}
</script>

    双向绑定，即通过将数据源变量与表单输入框进行绑定，使得输入框内改变时，数据源变量也会改变。

  2. v-model的修饰符lazy和trim

    <template>
  <div class="hello">
    <input type="text" v-model.trim="username" />
    <input type="text" v-model.lazy="password" />
    <p>{{ username }}:{{ password }}</p>
    <button @click="clickGetUserName">获取用户名</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      username:'',
      password:''
    }
  },
  methods:{
    clickGetUserName(){
      console.log(this.username);
    }
  }
}
</script>

    即在v-model后加.lazy或.trim，使用lazy，会转换成change事件触发之后才同步数据，即当光标不在该输入框内时（即失去焦点），才会同步数据。
    而trim则是输入框内前后两端存在空格时，空格不会同步到数据源变量，并且在失去焦点后，输入框内自动去除前后两端的空格。

二、Components组件

1、组件基础

  1. 在components目录下，创建一个vue组件MyComponent.vue

    <template>
    <h3>单文件组件</h3>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<!-- scoped 只在当前组件生效 -->
<style scoped>
h3 {
  color: red;
}

</style>

    此时通过export default命令暴露MyComponent组件

  2. 在App.vue中修改代码如下

    <template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MyComponent />
  <my-component />
</template>

<script>
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</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>

    即通过import命令引入组件MyComponent.vue；然后在template标签中，通过标签的形式将MyComponent组件进行显示；最后在export default中的components中挂载该组件。

2、组件交互

  1. 在components中创建一个MyComponent.vue

    <template>
    <h3>prop组件交互</h3>
    <p>{{ title }}</p>
    <p>{{ age }}</p>
    <ul>
        <li v-for="(name,index) in names" :key="{index}">{{name}}</li>
    </ul>
</template>

<script>
export default {
    name : "MyComponent",
    props:{
        title:{
            type:String,
            default:""
        },age:{
            type:Number,
            default:0
        },names:{
            type:Array,
            //传递数组和对象时，需要使用函数进行返回
            default:function(){
                return [];
            }
        }
    }
    
}
</script>

<style scoped>

</style>

    即在props中声明属性名及属性类型type和默认值default；然后在template中通过{{属性名}}的形式进行显示。也可以通过v-for的形式打印数组或对象。

  2. 在App.vue中修改代码如下

    <template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MyComponent :title="title" :age="age" :names="names"/>
</template>

<script>
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  data(){
    return{
      title:"标题数据",
      age:18,
      names:["lufei","ace","sabo"]
    } 
  },
  components: {
    MyComponent
  }
  
}
</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>

    即引入、挂载并显示该MyComponent组件；然后通过data命令初始化指定属性；再通过:属性名="属性值"的形式进行数据的传递。

3、自定义事件的组件交互

  1. 在components中创建一个MyComponent.vue

    <template>
    <h3>自定义事件的组件交互</h3>
    <button @click="sendClickHandle">点击传递</button>
</template>

<script>
export default {
    name : "MyComponent",
    data(){
        return {
            message:"MyComponent组件的数据"
        }
    },
    methods:{
        sendClickHandle(){
            //子组件可以使用 $emit,让父组件监听到自定义事件 。
            //参数1是自定义事件名
            //参数2是传递的数据
            this.$emit("onEvent",this.message);
        }
    }
    
}
</script>

<style scoped>

</style>

    即先创建一个按钮点击事件sendClickHandle，在methods命令中定义该sendClickHandle方法。在方法中使用$emit函数，让父组件监听到自定义事件onEvent，并传入该子组件的数据。

  2. 在App.vue中修改代码如下

    <template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MyComponent @onEvent="getDataHandle"/>
  <p>{{ message }}</p>
</template>

<script>
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  components: {
    MyComponent
  },
  data(){
    return{
      message:""
    }
  },
  methods:{
    getDataHandle(data){
      this.message = data;
    }
  }
}
</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>

    即在父组件中通过@事件名的形式使用自定义事件onEvent，指定触发该事件时调用的方法getDataHandle。在methods命令中定义该getDataHandle方法，通过参数data接收数据，将参数data赋值给message属性，并且需要通过data初始化message属性。

4、组件生命周期

  1. 在components中创建一个MyComponent.vue

    <template>
    <h3>生命周期</h3>
    {{ message }}
    <button @click="message='更新数据'">更新</button>
</template>

<script>
export default {
    name:"MyComponent",
    data(){
        return {
            message:"111112234"
        }
    },
    beforeCreate(){
        console.log("组件创建前");
    },
    created(){
        console.log("组件创建完成");
    },
    beforeMount(){
        console.log("组件渲染前");
    },
    mounted(){
        console.log("组件渲染完成");
    },
    beforeUpdate(){
        console.log("组件更新前");
    },
    updated(){
        console.log("组件更新完成");
    },
    beforeUnmount(){
        console.log("组件卸载前");
    },
    unmounted(){
        console.log("组件卸载完成");
    }
}
</script>

<style>

</style>

    即生命周期一共有8个，分别有8个对应的周期函数用来操作。

  2. 在App.vue中修改代码如下

    <template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MyComponent/>
</template>

<script>
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</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>

    即将子组件MyComponent进行引入、挂载、显示。

5、引入第三方组件

  1. 在项目终端安装第三方组件Swiper：npm install --save swiper@8.1.6

  2. 修改HelloWorld.vue的代码如下

    <template>
  <div class="hello">
   <swiper class="mySwiper">
    <swiper-slide><img src="../assets/1.png" alt="" /></swiper-slide>
    <swiper-slide><img src="../assets/2.png" alt="" /></swiper-slide>
    <swiper-slide><img src="../assets/3.png" alt="" /></swiper-slide>
   </swiper>
  </div>
 </template>
 
<script>
import {SwiperSlide,Swiper} from 'swiper/vue'
import 'swiper/css'
export default {
  name: 'HelloWorld',
  components:{
    Swiper,
    SwiperSlide
  }
}
</script>

<style scoped>
img{
  width: 100%;
  height: 720px;
}
</style>

    即先从swiper/vue目录中引入SwiperSlide,Swiper以及swiper的css文件，并在components命令中挂载。最后在template标签中显示，用swiper中内嵌多个swiperslide。

  3. 添加指示器
    1）在script标签中引入pagination

    import {Pagination} from 'swiper'
import 'swiper/css/pagination'

    2）在export default命令下添加如下

    data(){
    return{
      modules: [Pagination]
    }
}

    3）在swiper标签中添加如下

    <swiper class="mySwiper" :modules="modules" :pagination="{clickable: true}">

    此时指示器即可生效。

三、网络请求及路由配置

1、Axios网络请求

  1. 安装Axios：npm install --save axios

  2. 在vue.config.js配置文件中设置允许跨域：

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域
      '/api': {
        target: 'https://www.baidu.com', //填写请求的目标地址
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api即可
        }
      }
    }
  }
}

    配置完配置文件需要重新运行项目，否则不生效，即执行npm run serve

  3. Axios的get请求

    <template>
  <div class="hello">
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'HelloWorld',
  mounted(){
    axios.get("/api").then(res=>{
      console.log(res.data);
    })
  }
}
</script>

    即先将axios组件引入，然后在钩子函数mounted中（即在网页渲染后）调用axios的get请求。因为配置跨域时将百度的url配置为api，所以在请求路径url那里直接使用/api即可。

  4. Axios的post请求
    1）post请求需要安装依赖，请求参数需要转换格式：npm install --save querystring
    2）引入依赖querystring：import qs from "querystring"
    3）配置另一个跨域请求url

    '/ap2i': {
        target: 'https://tieba.baidu.com/f/search/res', //填写请求的目标地址
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/ap2i': '' //请求的时候使用这个api就可以
        }
      }

    4）实现Axios的post请求

    axios.post("/ap2i",qs.stringify({
      ie:"utf-8",
      qw:"海贼王"
    })).then(res=>{
      console.log(res.data);
    })

    因为前面配置了跨域的别名叫api，另一个前缀不能相同，比如api2的话就会出错。

  5. 将axios进行全局挂载配置
    即在main.js中进行配置

    import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import axios from "axios"
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

    在配置全局后用this.$axios调用axios

2、Axios网络请求封装

  1. 在src根目录下创建一个utils文件夹，在该文件夹下创建request.js来封装网络请求

    import axios from "axios";
import qs from "querystring";
//创建网络请求实例
const instance = axios.create({
    timeout:5000
})
//网络请求拦截器拦截网络请求并且对其处理
instance.interceptors.request.use(
    config =>{
        if(config.method === "post"){
            config.data = qs.stringify(config.data);
        }
        return config;
    },
    error=>Promise.reject(error)

)
//网络请求拦截器拦截网络响应并且对其处理
instance.interceptors.response.use(
    response => response.status === 200?Promise.resolve(response):Promise.reject(response),
    error=>{
        const response = error;
        errorHandle(response.status,response.info);
    }

)
const errorHandle = (status,info) => {
    switch(status){
      case 400:
        console.log("语义有误");
        break;
      case 401:
        console.log("服务器认证失败");
        break;
      case 403:
        console.log("服务器拒绝访问");
        break;
      case 404:
        console.log("地址错误");
        break;
      case 500:
        console.log("服务器遇到意外");
        break;
      case 502:
        console.log("服务器无响应");
        break;
      default:
        console.log(info);
        break;
     }
  }
export default instance;

  2. 在vue.config.js文件中配置允许跨域

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域
      '/api': {
        target: 'https://www.baidu.com', //填写请求的目标地址
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
}

  3. 在src根目录下创建一个api文件夹，在该文件夹下创建path.js来存储网络请求的url

    const path = {
    url:"/api",
    suffix:""
}
export default path;

    即在path内编写一个项目的根url，以及项目的各种接口url

  4. 在src根目录下创建一个api文件夹，在该文件夹下创建index.js来存储网络请求的方法

    import path from "../api/path"
import request from "../utils/request"
export default{
    getData(){
        return request.get(path.url+path.suffix)
    }
}

  5. 最后在HelloWorld.vue中进行调用

    <template>
  <div class="hello">
    
  </div>
</template>

<script>
import api from "../api/index"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    api.getData().then(res=>{
      console.log(res.data)
    })
  }
}
</script>

    即将index.js引入，然后调用并且操作响应信息即可。

3、Vue引入路由配置

  1. 安装Vue的路由：npm install --save vue-router

  2. 在src目录下创建view文件夹，然后在该文件夹下创建HomeView.vue

    <template>
    <h3>Home</h3>
</template>

  3. 在src目录下创建view文件夹，然后在该文件夹下创建AboutView.vue

    <template>
  <h3>About</h3>
</template>

  4. 在src目录下创建router文件夹，然后在该文件夹下创建index.js

    import { createRouter,createWebHashHistory } from "vue-router";
import HomeView from "../view/HomeView"
import AboutView from "../view/AboutView"
const routes=[
    {
        path:"/",
        component:HomeView
    },
    {
        path:"/about",
        component:AboutView
    }
]
const router = createRouter({
    routes,
    history:createWebHashHistory()
    //使用a锚点连接 http://localhost:8080/#/about
	//createWebHistory http://localhost:8080/about 需要后台配合返回指定页面，否则出现404，即访问服务器的形式
})
export default router;

    即将vue-router的路由引入，将路由配置和createWebHashHistory作为参数传入到createRouter中。配置信息中指定两个path分别指向HomeView和AboutView中。将router暴露。

  5. 在main.js中将router进行全局挂载

    import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from "./router/index"
createApp(App).use(router).mount('#app')

    即将/router/index.js引入，最后使用use函数进行全局挂载。

  6. 修改App.vue代码如下

    <template>
  <router-link to="/">首页</router-link> | 
  <router-link to="/about">关于</router-link>
  <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>

    即用标签指定显示的位置，使用a锚点连接的形式进行跳转并在指定位置显示。

4、Vue路由传递参数

  1. 此时创建vue项目时，需要选择上router路由，即134选项。

  2. 在view文件夹下，创建NewsView.vue

    <template>
    <ul>
        <li><router-link to="/newsdetails/百度">百度新闻</router-link></li>
        <li><router-link to="/newsdetails/网易">网易新闻</router-link></li>
    </ul>
</template>

    此时创建新闻的子路由跳转，并且携带参数

  3. 在App.vue文件中添加新闻页的路由跳转

    <router-link to="/news">新闻</router-link>

  4. 在view文件夹下，创建NewsDetailsView.vue

    <template>
    <h3>{{ $route.params.name }}新闻详情</h3>
</template>

    此时将传递的参数进行调用，然后显示

  5. 在router文件夹下的index.js中添加如下代码

    {
    path: '/news',
    name: 'news',
    component: () => import('../views/NewsView.vue')
  },
  {
    path: '/newsdetails/:name',
    name: 'newsdetails',
    component: () => import('../views/NewsDetailsView.vue')
  }

    即添加新闻和新闻详情页的路由配置信息。

5、Vue路由嵌套

  1. 在view文件夹下创建文件夹aboutsub，创建AboutUsView.vue

    <template>
    <h3>关于信息</h3>
</template>

    即创建About页面的二级导航

  2. 创建AboutInfoView.vue

    <template>
    <h3>关于信息</h3>
</template>

    即创建About页面的二级导航

  3. 在About.vue中修改如下

    <template>
  <div class="about">
    <router-link to="/about/us">关于我们</router-link> | 
    <router-link to="/about/info">关于信息</router-link>
    <router-view></router-view>
  </div>
</template>

    即创建二级导航跳转，以及显示位置。

  4. 修改router文件夹下的index.js

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    redirect: '/about/us',
    children:[
      {
        path: 'us',//二级导航不加/
        name: 'us',
        component: () => import('../views/aboutsub/AboutUsView.vue'),
      },
      {
        path: 'info',
        name: 'info',
        component: () => import('../views/aboutsub/AboutInfoView.vue'),
      }
      
    ]

  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

    即在children数组中添加About的子路由。

四、Vue3状态管理及新特性

1、Vue状态管理（Vuex）

  1. 安装vuex：npm install --save vuex

  2. 在src根目录下创建store文件夹，在该文件夹下创建index.js文件

    import {createStore} from 'vuex'
//Vuex的核心作用是帮助我们管理组件之间的状态
export default createStore({
    //所有状态都放在这里
    state:{
        counter:0
    }
})

  3. 在main.js中进行全局挂载该store(vuex)，添加如下代码

    import store from './store/index'
createApp(App).use(store).mount('#app')

  4. 在App.vue主组件下测试counter是否能读取到

    <template>
  <p>counter={{ $store.state.counter }}</p>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

    即使用{{ $store.state.counter }}的方式进行快速读取。

  5. 在HelloWord.vue子组件下测试counter是否能读取到

    <template>
  <div class="hello">
    <p>counter={{ $store.state.counter }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

    即使用{{ $store.state.counter }}的方式进行快速读取。

  6. 使用局部挂载的方式进行快速读取

    <template>
  <div class="hello">
    <p>counter={{ $store.state.counter }}</p>
    <p>{{ counter }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed:{
   ...mapState(["counter"])
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

    即在局部中进行引入，然后在computed中挂载…mapState([“counter”])，最后使用{{counter}}进行显示。

2、Vue状态管理的核心

  1. 创建vue3项目，手动创建时，选择1345
    在这里插入图片描述

  2. 修改store文件夹下的index.js

    import { createStore } from 'vuex'

export default createStore({
  state: {
    counter:10
  },
  getters: {
    getCounter(state){
      return state.counter>0?state.counter:"counter数据异常"
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

  3. 全局挂载后快速读取，在App.vue或在其他.vue文件中直接读取，即在template标签中添加如下代码

    <p>{{ $store.getters.getCounter }}</p>

  4. 局部挂载后，快速读取
    1）在HomeView.vue中引入vue

    import { mapGetters } from 'vuex';

    2）然后进行局部挂载

    computed:{
	  ...mapGetters(["getCounter"])
}

    3）然后在template标签中显示

    <p>{{ getCounter }}</p>

  5. mutations命令，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
    即只能在该命令中修改状态
    1）在store文件夹下的index.js中的mutations中添加一个方法

    setCounter(state,num){
      state.counter+=num;
    }

    2）在HomeView.vue文件中的template标签中添加一个增加按钮

    <button @click="addClickHandle">增加</button>

    3）在HomeView.vue文件中的methods命令中，实现上面这个方法

     methods:{
    addClickHandle(){
      this.$store.commit("setCounter",8);
    }
  }

    this.$store.commit(“setCounter”,8)，即提交调用mutations中的setCounter方法，以及它的参数。
    4）在About.vue文件中，再调用它的状态，测试增加后是否一致。

    <template>
  <div class="about">
    <h1>{{this.$store.getters.getCounter}}</h1>
  </div>
</template>

  6. mutations用局部挂载的方式实现
    1）引入vuex的mapMutations

    import { mapGetters,mapMutations } from 'vuex';

    2）局部挂载后，进行调用

     ...mapMutations(["setCounter"]),
    addClickHandle(){
      this.setCounter(8);
    }

  7. Actions命令
    Action 提交的是 mutation，而不是直接变更状态
    Action 可以包含任意异步操作
    1）安装axios组件：npm install --save axios
    2）在store文件夹下的index.js中，引入axios：import axios from "axios"
    3）在actions中添加一个方法asyncSetCounter，提交mutations中对应的方法即可。即在异步的情况下间接提交。

    actions: {
    asyncSetCounter({commit}){
      axios.get("url").then(res=>{
        commit("setCounter",res.data);
      })
    }
  },

    在axios.get方法指定url，然后将返回值作为参数，提交该方法。
    4）在HomeView.vue中的template标签中添加一个按钮，绑定一个异步方法

    <button @click="addAsyncClickHandle">异步增加</button>

    5）然后实现该异步方法

    addAsyncClickHandle(){
      this.$store.dispatch(asyncSetCounter);
    }

  8. Actions使用局部挂载的方法进行调用
    1）引入vuex的mapActions

    import { mapGetters,mapMutations,mapActions } from 'vuex';

    2）局部挂载

    ...mapActions(["asyncSetCounter"]),

    3）调用该方法

    addAsyncClickHandle(){
      this.asyncSetCounter();
    }

3、Vue3新特性

  1. 六大亮点
    1）Performance：性能比Vue2.0强。
    2）Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
    3）Composition API：组合API
    4）Fragment，Teleport，Suspense：“碎片”，Teleport即Protal传送门，“悬念”
    5）Better TypeScript support：更优秀的Ts支持。
    6）Custom Renderer API：暴露了自定义渲染API

  2. ref或reactive的使用
    1）修改HelloWord.vue文件

    <template>
  <div class="hello">
    <p>{{ message }}</p>
    <p>{{ msg }}</p>
    <ul>
      <li v-for="(item,index) in names.list" :key="index">{{ item }}</li>
    </ul>
    <button @click="clickHandle">更新</button>
  </div>
</template>

<script>
import { ref,reactive } from "vue"
export default {
  name: 'HelloWorld',
  props:{
    msg:String
  },
  setup(props,ctx){
    //setup没有this关键字
    console.log(ctx)
    //ref
    const message = ref("消息")
    //reactive
    const names = reactive({
      list:["luffy","ace"]
    })
    const msg = props.msg
    function clickHandle(){
      message.value = "新消息"
    }
    return {
      message,
      names,
      clickHandle,
      msg
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

    vue3有ref,reactive组件可以直接引入，简单的数据对象使用ref，复杂的数据对象使用reactive，例如数组对象。
    在按钮上绑定一个方法，并在setup内实现它，更新消息内容，以及从App.vue文件传递过来的数据，需要先在props命令中进行类型的声明，然后再setup中作为参数获取，最后再赋值给msg，以及将context对象作为参数获取。然后将这些变量或数据对象return，最后再进行显示。

  3. 在setup()中调用生命周期函数
    1）先引入生命周期函数

    import { onMounted } from 'vue';

    2）在setup中调用生命周期函数onMounted

    setup(){
    onMounted(()=>{
      console.log("mounted1");
    })
    onMounted(()=>{
      console.log("mounted2");
    })
  }

  4. provide和inject函数的使用
    1）在父组件App.vue中引入

    import { provide } from 'vue';

    2）在父组件的setup中通过provide函数给子组件传值

    setup(){
    provide("message","yoxi");
  }

    3）在子组件HelloWord.vue中引入

    import { inject, onMounted } from 'vue';

    4）在子组件的setup中通过inject接收值，并在setup中将该值返回

    const msg = inject("message");
return{
      msg
    }

    5）在template标签中进行显示

    <p>{{ msg }}</p>

  5. Fragment，不再限于模板中的单个根节点
    即可以在template里面的最外层声明多个标签

4、Vue3加载Element-plus

  1. 安装Element-plus：npm install --save element-plus

  2. 安装Element-plus的字体图标插件：npm install @element-plus/icons-vue

  3. 在main.js中添加如下

    import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

    即全局挂载Element-plus

  4. 打开Element-plus网站：https://element-plus.gitee.io/zh-CN/component/button.html#图标按钮
    在这里插入图片描述
    因为使用ts语法，所以需要改成js语法

  5. 使用Element-plus的组件

    <template>
 <div class="flex">
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>

<script>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    return {
      Delete, Edit, Search, Share, Upload
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

    就是将ts中的语法改成js语法，即引入这些图标后，最后还需要return。

  6. 使用按需加载
    1）安装插件：npm install -D unplugin-vue-components unplugin-auto-import
    2）修改vue.config.js配置文件

    const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')


module.exports = defineConfig({
 transpileDependencies: true,
 configureWebpack: {
  plugins: [
   AutoImport({
    resolvers: [ElementPlusResolver()]
    }),
   Components({
    resolvers: [ElementPlusResolver()]
    })
   ]
  }
})

    3）修改main.js

    import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
createApp(App).mount('#app')

    4）重新运行项目

  7. 使用Element-plus的字体图标
    1）安装Element-plus的字体图标插件：npm install @element-plus/icons-vue
    2）在项目根目录src下，创建plugins文件夹，在文件夹下创建icons.js文件

    import * as components from "@element-plus/icons-vue";
export default {
  install: (app) => {
    for (const key in components) {
      const componentConfig = components[key];
      app.component(componentConfig.name, componentConfig);
     }
   },
};

    3）将icons.js引入main.js进行全局挂载

    import elementIcon from "./plugins/icons";
createApp(App).use(elementIcon).mount('#app')

    4）在.vue文件中使用

    <el-icon class="is-loading" :size="100" color="green">
    <Loading />
  </el-icon>

总结

  1. 1）使用Vue开发前，需要安装Vue CLI，然后使用vue命令创建项目时，根据需求选择对应的配置；选择存放配置的文件时，1是专用配置，2是package.json文件，选择1的话需要输入y/n是否保存当前的配置，如果选择y则需要输入保存的文件名，在下次创建项目时，可直接应用该配置。
    启动项目时，cd项目名进入项目，然后使用npm run server运行服务。
    vue3的高亮插件为Language Features（volar）。
    2）vue的模板语法有{{}}Mustache、v-html、v-bind:属性等。
    {{}}Mustache语法，可以绑定文本数据，以及一些js表达式。
    v-html指令，绑定原始的html数据，将其输出成html。
    v-bind:属性名，即将属性值赋值给属性名。
    3）条件渲染，v-if和v-else指令，当指令的表达式为true时才被渲染。
    v-show指令，当指令的表达式为true时展示元素。
    即v-if是条件为真时，才渲染，即可能会进行多次渲染；而v-show是在页面初始化时就渲染，即只渲染一次。
    4）列表渲染，即通过v-for指令对列表进行渲染操作，也就是将集合遍历并渲染，:key就是绑定唯一key，用于给vue做比对，需要根据该唯一key进行判断，如果数据项的顺序被改变，则重新渲染。
    5）事件处理，使用v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件时，执行一些JavaScript。也就是说可以绑定某个方法到该事件中，当该事件触发时可以进行处理。在v-for遍历的列表渲染时，可以为每个元素进行事件绑定。
    6）表单输入双向绑定，通过v-model进行双向绑定，使得输入框内改变时，数据源变量也会改变。
    v-model的修饰符，即在v-model后加.lazy或.trim，使用lazy，会转换成change事件触发之后才同步数据，即当光标不在该输入框内时（即失去焦点），才会同步数据。
    而trim则是输入框内前后两端存在空格时，空格不会同步到数据源变量，并且在失去焦点后，输入框内自动去除前后两端的空格。
  2. 组件的组织：通常一个应用会以一棵嵌套的组件树的形式来组织。
    1）使用组件的流程：组件编写完成后，需要再App.vue中进行import引入；在export default中的components中挂载；在template标签中，通过标签的形式进行显示。
    2）组件交互的流程，即引入、挂载并显示该MyComponent组件；然后通过data命令初始化指定属性；再通过:属性名="属性值"的形式进行数据的传递到子组件。子组件通过在props中声明属性名及属性类型type和默认值default；然后在template中通过{{属性名}}的形式进行显示。
    但是数组和对象需要使用函数的方式设置默认值，并且通过v-for的形式打印数组或对象。
    3）自定义事件的组件交互，即在子组件中通过$emit函数让父组件监听自定义事件，并传入参数。然后父组件可以通过@事件名的形式监听并指定触发事件时调用的方法名。
    4）组件的8个生命周期，也叫生命周期钩子函数；项目运行时，会将组件进行创建，然后渲染，一共执行4个生命周期函数，分别是创建前，创建后，渲染前，渲染后。
    在触发事件更改数据信息时，会调用组件的更新，分别是更新前，更新后。
    最后是组件卸载，在卸载组件时，如果还需要重新加载新的组件，这时候会在新组件渲染完成的前面卸载完旧的组件。也就是在渲染之前和渲染之后的中间卸载完成。
    8个生命周期函数可以在组件的各个生命周期进行组件对应的操作。分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。
    5）引入第三方组件，首先通过npm命令安装第三方组件；其次通过import命令引入该组件以及css文件，并且在components命令中挂载，最后进行显示。
  3. 1）Axios网络请求流程，首先，需要安装第三方组件Axios，然后进行引入，最后使用该Axios的网络请求方法进行网络请求。如果需要跨域，则需要在vue.config.js文件中进行允许跨域的配置。因为一般组件都需要使用到网络请求，所以一般需要对Axios进行全局挂载配置。
    2）封装网络请求，即将axios对象的get和post等方法封装到utils目录下的request.js中，将网络请求路径url封装到api目录下的path.js中；最后由index.js将axios对象的方法（request.js）和网络请求路径（path.js）都引入到api目录下的index.js中，调用request.js封装的axios对象的方法，将path.js的路径作为它的参数传入。
  4. 1）Vue路由，首先需要安装官方路由，然后在router/index.js文件中对路由信息进行配置，并且创建路由，将createWebHashHistory函数和配置信息传入，暴露该路由对象。在main.js中进行引入，然后进行全局挂载。最后在App.vue中指定路由显示位置，以及使用a锚点连接的形式指定路由跳转。
    2）Vue路由传递参数，即在路由配置信息的path路径后面加:参数名，而在跳转时的参数，则是path/:加参数值。
    3）Vue路由嵌套，即在路由创建它的children路由。
  5. Vue状态管理Vuex，即该Vuex的状态可以全局使用。
    1）它有5个命令state，getters，mutations，actions，modules。
    2）其中state用来设置状态；getters用来获取状态；mutations用来更新状态；actions用来异步更新状态，并且actions最后是调用mutations中的方法。
    即在store文件夹的index.js中进行处理vue的状态信息，然后在.vue文件中进行调用对应的方法。
  6. Vue3新特性
    1）ref或reactive函数的使用，这两个函数需要写在setup()中。
    其中ref用来定义简单数据对象，而reactive用来定义复杂数据对象。
    2）在setup中可以声明多个相同的生命周期函数。
    3）provide和inject函数只能在setup()中使用，provide只能向下传值，inject只能向上接收值。
    4）Fragment可以在template标签里面的最外层声明多个根节点。
  7. Vue3加载Element-plus
    1）需要先安装Element-plus以及它的字体图标，然后再安装按需加载的插件，再修改vue.config.js配置文件信息；最后打开Element-plus的网站，选择需要的组件，然后复制粘贴，最后将script标签部分由ts语法改成js语法即可。
    2）如果需要使用Element-plus的字体图标时，才需要下载它的字体图标，然后在icons.js中进行配置，最后在main.js中进行引入，即全局挂载。最后就可以使用Element-plus的字体图标了。
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐