Vue技术教程（2023-1-8）

最新推荐文章于 2024-10-05 01:22:45 发布

~风淡~

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量61

点赞数

分类专栏： HTML 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_66274152/article/details/128606058

版权

HTML 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

本文介绍了Vue3的基本概念和使用方法，包括创建HelloWorld、数据绑定、事件处理、模板和组件化开发。通过实例展示了如何在HTML中直接使用Vue，以及如何通过构建工具进行更高效地开发。此外，还讨论了Vue的响应式原理和数据深度响应的实现。

摘要由CSDN通过智能技术生成

第一章：Vue概述

1.hello World

Vue：易学易用 性能出色 适用场景丰富的web前端框架

vue是一款构建用户界面的JavaScript框架 它基于标准的html css JavaScript构建  并提供了一种声明式 组件化的编程模型 帮助你高效的开发 用户界面 无论是简单还是复杂的页面 vue都可以胜任

vue特点：组件化开发  声明式的编程（命令行的方式）

2.hello  Vue的书写
		方式一：在网页中直接使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入Vue-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root"></div>

<script>

<!--2.编写vue代码-->


//在写vue的时候一切皆组件
/*1.：创建一个根组件  在vue3中组件就是一个普通的js对象
* */

//1.创建一个vue组件
const Root={

    template:"<h1>你好  Vue！</h1>"//这个就是模板样式在  希望在页面中呈现的样子

};//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)

//2.创建一个App实例（应用实例）

const app=Vue.createApp(Root)


//3.将实例在页面中挂载
app.mount("#root")



</script>
</body>
</html>

2.data函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--1.引入Vue-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root"></div>

<script>

  <!--2.编写vue代码-->


  //在写vue的时候一切皆组件
  /*1.：创建一个根组件  在vue3中组件就是一个普通的js对象
  * */

  //1.创建一个vue组件
  const Root={
    data(){
    //在这里书写一个data  注意：data是一个函数 需要一个对象作为返回值
      return{
        message:"Vue 计算机科学与技术学院",  //data方法返回的对象 其中的属性会自动添加到组件的实例中
        button:"我是计算机科学与技术学院按钮"
      }
    },
    //在模板中科院直接访问组件实例中的属性
    //在模板中使用插值语法  {{属性名}} 来访问组件实例中属性
    template:"<h1>你好  Vue！{{message}} , {{button}}</h1>"//这个就是模板样式在  希望在页面中呈现的样子
  };//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)

  //2.创建一个App实例（应用实例）

  const app=Vue.createApp(Root)

  //3.将实例在页面中挂载
  app.mount("#root")
</script>
</body>
</html>

3.按钮练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--1.引入Vue-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root"></div>

<script>
<!--组件是用来创建组件实例-->


  //练习：创建按钮  点击按钮时 显示按钮点击的时间
  const Root={
    data(){
      return{

        //定义一个变量 记录点击次数
        //data中的数据湖自动和使用它的视图绑定 数据发生变化视图会自动刷新
        count:0,

        message:"Vue 计算机科学与技术学院",

      }

    },

    template:" <button @click='count++'>点我一下</button> --点了{{count}}次"


  };



  const app=Vue.createApp(Root)
  //3.将实例在页面中挂载
  app.mount("#root")



</script>
</body>
</html>

4.模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--1.引入Vue-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>


<div id="root">

<!--  方式二：如果追定义在网页中 此时模板必须符合html的规范

如果我们在组件中定义template 则会优先使用template作为模板 同时根元素中的所有内容都会被替换
如果在组件中没有定义template 则会使用根元素innerHtml作为模板使用
-->
  <button @click='count++'>点我一下</button> --点了{{count}}次
<p>我是{{count}}</p>
</div>

<script>
  const Root={
    data(){
      return{
        count:0,
        message:"Vue 计算机科学与技术学院",
      }
    },
    //template是模板  它决定了组件最终的样子
    //定义模板的方式有三种 1.在组件中通过template属性去指定  2.直接在网页的根元素中指定
    // 方式一： template:" <button @click='count++'>点我一下</button> --点了{{count}}次"

  //方式三：使用render()函数直接渲染
  };



  const app=Vue.createApp(Root)
  //3.将实例在页面中挂载
  app.mount("#root")



</script>
</body>
</html>

6.使用构建工具去书写Vue

1.打开终端 初始化项目 npm init -y

2.安装vite依赖：npm add -D vite
2.安装vue依赖 ：npm add vue


第一步创建html页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue 计算机科学与技术学院！</title>
    <script type="module" src="./src/index.js"></script>

</head>
<body>

<div id="app"></div>
</body>
</html>


//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";


//创建一个根组件
const App={

    data(){

        return{
            message:"计算机科学与技术学院欢迎你！"

        }
    },
    template:"<h1>{{message}}</h1>"

}

//创建应用挂载组件到页面
createApp(App).mount("#app")



1.直接在网页中使用：//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";

2.使用vite npm add vite -D
3.代码：
		//组件：就是一个普通的js对象

const App={}


//创建应用
const app=createApp(App)

//挂载到页面
app.mount("#root")

第二章：组件化编程

1.Vue组件化

html页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机科学与技术学院</title>
    <script type="module" src="./src/index.js"></script>

</head>
<body>
<div id="root"></div>
</body>
</html>

index程序入口代码：
import {createApp} from "vue/dist/vue.esm-bundler.js";
import App from "../../1.helloVue/src/App";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")

子组件App代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";


//2.在组件中注册子组件
export default
//创建与根组件
{
    data(){
        return{
            msg:"计算机科学与技术学院",
            count:0
        }

    },

    //2.在这里使用  就在这里注册组件  注册组件使用components注册

    components:{
        MyButton:MyButton//属性名：属性值

    },

    template:'<h1>{{msg}}</h1>' +
        '<button @click="count++">点我一下{{count}}</button>' +
        '<h1>{{count}}</h1>' +
        '<h2>{{count}}</h2>' +
        '<MyButton></MyButton>' +
        '<MyButton></MyButton>'
//组件与组件之间是互不影响的
}

子组件MyButton代码：
/*封装一个自定义的按钮组件
*
* */

export default {

    data(){

        return{

            count:0
        }
    },
    template:'<button @click="count++">{{count}}</button>'
}

2.单文件组件

当前template是用字符串的形式去编写模板  1.这些字符串会在项目运行时 在浏览器中会被编译为js的函数(性能不太好)
				2.在字符串中编写代码 体验感差
				
	为了我解决这种问题  vue为我们提供了一种单文件组件  单文件组件的格式就是vue  后缀名为vue
	在Vscode中要装 Vue language Features插件
	vue文件用来编写单文件组件 vue本省不能被浏览器识别  所以要用构建工具打包才可以使用
		同时vue文件在打包时 构建工具会直接将template替换为函数 无需再浏览器中中去编译 
		
		要想使用 需要安装插件：终端输入：npm add -D @vitejs/plugin-vue
		开始配置 vite.config.js文件
		
		
		vue.vue组件代码：
			<template>



<!--  在这里书写模板-->
  <h1>{{msg}}</h1>

</template>

<script>

/*在script标签里面可以编写组件的代码
*
* */
export default {
  data(){

    return{
      msg:"计算机科学与技术欢迎你！"

    }

  }
}
</script>

<style scoped>

</style>


App.js代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";
import vue from "../../2.helloVue/src/vue";

//2.在组件中注册子组件
export default
//创建与根组件
{
    data(){
        return{
            msg:"计算机科学与技术学院",
            count:0
        }

    },

    //2.在这里使用  就在这里注册组件  注册组件使用components注册

    components:{
        MyButton:MyButton,//属性名：属性值
        Vue:vue

    },

    template:'<h1>{{msg}}</h1>' +
        '<button @click="count++">点我一下{{count}}</button>' +
        '<h1>{{count}}</h1>' +
        '<h2>{{count}}</h2>' +
        '<MyButton></MyButton>' +
        '<MyButton></MyButton>' +
        '<Vue></Vue>'
//组件与组件之间是互不影响的
}


index.js组件代码：
	import {createApp} from "vue/dist/vue.esm-bundler.js";
// import App from "../../1.helloVue/src/App";
import vue from "./vue";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")

 
 
 vite.config.js配置文件：
             import vue from "@vitejs/plugin-vue";
            export default {

                plugin:[vue()]
            }

3.自动创建项目


每次手动创建项目会很麻烦：因此我们使用自动工具来创建：
		命令：npm create vue
				npm init vue@latest(推荐)
选择完成后  自动创建完成vue项目

4.代码分析

目录分析：

--public  静态资源目录  一般是图标 


	<script>

export default {
  //组件就是一个普通的js对象
  //组件：一个组件可以创建多个组件实例
  data(){
    //data是一个函数
    //在data中this this就是当前的组件实例化

    //如果使用箭头函数就无法通过this来访问组件实例

    //data会返回一个对象作为返回值 vue会对该对象进行代理 从而将其转换为响应式数据
    //响应式数据会直接通过组件实例化
    return{

      msg:"计算机科学与技术学院"
    }
  }
}


</script>

<template>
  <h1>{{msg}}</h1>


</template>

import App from "./App";
import {createApp} from 'vue'

createApp(App).mount('#app')

/*
* App.vue是根组件  createApp(App) 将组件关联到应用上
*           --会返回一个应用的实例化
*
*           app.mount("#app")将应用挂载到页面中 会返回一个根组件的实例  组件的实例的通常命名为vm
*
* */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">


    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/2.Vue教程/05.使用vite/3.Vuetest/src/main.js"></script>

  </body>
</html>

5.响应式原理


//创建一个对象
const obj={
    name:"孙悟空",
    age:19
}

/*
* 如果追修改对象的属性 那么就是仅仅修改了属性 没有去选择其他的事情 这种操作只会影响对象自身 不会导致元素的重新渲染
*
*   我们希望在修改一个属性的同时 可以运行一些其他的操作 比如重新触发元素重新渲染
* 要实现这个目的  必须呀对对象进行改造  Vue3中使用的是代理模式来完成对象的改造
*
* */

/*

console.log("之前的名字：",obj.name)
obj.name="无邪"
console.log(obj.name)
*/


//来为对象创建一个代理
const handler={

//    在里面可以传入一个方法  get方法用来指定读取数据的写 它的返回值就是最终读取到的值
    get(target,prop,receiver){
        
        
        /*在Vue中data()返回的对象会被vue代理  vue代理后 当我们通过代理去读取属性时 返回值之前 它会先做义工跟踪的操作
        //track()跟踪谁用了我这个属性
        * */
        
        
        /*三个参数：target 被代理的对象
                prop:读取的属性
        *           receiver;代理对象
        * */
        console.log(target,prop,receiver)
        //指定get后 在通过道理读取对象的属性时 就会调用get方法来获取值
        return '计算机科学与技术学院'
    },
    set(target,prop,value,receiver){

        
        
    //    set会在代理修改对象时 调用
        console.log(target,prop,value,receiver)
    }

};//用来处理代理的行为


//创建代理
const proxy=new Proxy(obj,handler)
console.log(proxy)

//修改代理的属性
console.log(proxy.name)
proxy.age=10;
console.log(proxy.age)
//因为proxy是对象的代理 所以它可以读取到对象里面的内容



注意：设置代理时 不会对原对象产生影响


vm.$data是设计的代理对象 通过vm可以直接访问到$data中的属性
vm.$data.msg等价于vm.msg
可以通过vm.$data多态的向组件中添加响应式数据


created(){
    
    //会在组件创建完成后调用
    this.$data.name='计算机'
}

6.data详细介绍

<script>
import MyButton from "./components/MyButton";
export default {


  data(){

    //data()返回的对象会被Vue所代理
    return{

      //Vue在构建响应式对象时 会同时将对象中的属性也做成响应式属性
      //深层响应式对象
      
      //有些情况下可以通过shallowReactive()来创建一个浅层的响应式属性
      msg:'计算机科学与技术学院欢迎你！',
      stu:{
        name:'吴邪',
        age:18,
        gender:"男"

      }
    }
  },

//  注册一下MyButton
  components:{
    MyButton

  }



}

</script>


<template>

  <h1>{{msg}}</h1>
  <MyButton></MyButton>
</template>