一介书生.
一介书生.

VUE3笔记

 前端系列
一、HTML5
二、CSS3
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3

第一章、基础

一、vue简介

1、学习阶段

  1. vue2基础

  2. vue-cli（vue的手脚架，专门做工程化开发）

  3. vue-router（实现前端路由的）

  4. vuex（vue存储数据的）

  5. element-ui（ui组件库）

  6. vue3

2、 vue的特点

采用组件化模式，提高代码复用率、切让代码更好维护。

声明编码，让编码人员无需直接操作DOM，提高开发效率。

3、安装

将vue添加到项目中主要有四种方式：

1.在页面上以CDN包的形式导入 
    
2.下载JavaScript文件并自行托管
    https://unpkg.com/[email protected]/dist/vue.global.js
3.使用npm安装它
4.使用官方的CLI来构建一个项目

4、vue的简单应用

html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单的vue应用title>
        
        <script src="./vue3.js">script>
    head>
    <body>
        
        <div id="counter">
            
            <p>{{num}}p>
            <p>{{uname}}p>
        div>
​
​
        
        <script>
            //配置对象
            const Counter={
                //data里面定义对象，methods里面定义函数
                data:function(){
                    return{
                        num:0,
                        uname:"张三"
                    }
                }
            }
            
            //Vue.createApp()创建应用，将配置对象传入
            //mount()：挂载，通过id属性，将document元素挂载到应用上 
            Vue.createApp(Counter).mount('#counter')      
        script>
    body>
html>

总结：通过Vue.createApp()创建vue应用，再通过mount()将document元素挂载到应用上。

一、Vite

1、vite介绍

vite是一个web开发构建工具，由于其原生的ES模块导入方式，可以实现快速的冷服务器启动。

通过终端中运行以下命令，可以使用vite快速构建vue项目。

> npm init vite@latest  -- --template vue
> cd project-name
> npm install
> npm run dev

2、Vite的项目结构

node_modules（项目的依赖）
public（存放静态资源文件夹）
src（源代码）
    components
        HelloWorld.vue
    App.vue（根组件，渲染的起点）
    main.js（项目入口）
    style.css（项目的CSS样式文件）
​
​

三、应用&组件实例

1、创建一个应用实例

每个vue都是通过createAPP函数创建应用实例开始的

const app = Vue.createAPP({})

该应用实例是用来在应用中注册全局组件的

const app = Vue.createAPP({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

2、根组件与挂载应用

//1.配置对象
const RootComponent = {/*选项*/}
//2.createAPP(): 将配置对象传入，创建应用
const app = Vue.createAPP(RootComponent)
//3.moint(): 挂载，通过id属性，将document元素挂载到应用上 
const vm = app.moint('#app')
​

3、组件实例 property

data属性：在data中定义的属性通过组件实例暴露出去，就可以在DOM元素中使用。

组件实例的所有property都可以在组件的模板中访问到。

还可以将用户自定义的property添加组件实例中，例如：methods，props，computed,inject和setup。

Vue还通过组件暴露了一些内置的property，例如：$attrs 和 $emit。

//配置对象
const Counter={
    data:function(){
        return{
            num:0,
            uname:"张三"
        }
    }
}
​
//createApp()创建应用，将配置对象传入
const app = Vue.createApp(Counter)
//mount()：挂载，通过id属性，将document元素挂载到应用上 
const vm = app.mount('#counter')
console.log(vm.count)

四、模板语法

1、插值 {{ }}

{{ }}：可以在花括号中引用变量

<body>

<h1>插值：h1>
<div>
    {{info}}
div>

<script src="./static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"小牛马"
        }
    })
script>
body>

2、指令

vue指令：

  • v-text：文本内容绑定，让元素的文本内容和变量进行绑定

  • v-once：一次性渲染，当变量数据改变时，元素文本内容不会在更新

  • v-html：标签内容绑定，让元素的html标签内容和变量进行绑定

  • v-model：双向绑定，让控件和变量进行双向绑定，获取控件的值都是用双向绑定

  • v-bind 和 : ：属性绑定，让元素的某个属性的值和变量进行绑定

  • v-on 和 @：事件绑定，将事件与方法绑定，调用的方法必须写在methods中

实例：

v-text：文本内容绑定，让元素的文本内容和变量进行绑定

<body>
<div>
    <p v-text="info">p>
div>
    
<script src="./static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"小牛马"
        }
    })
script>
body>

v-once：一次性渲染，当变量数据改变时，元素文本内容不会在更新

<body>
<div>
    <p v-once="info">p>
div>
    
<script src="./static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"大沙币"
        }
    })
script>
body>

v-html：标签内容绑定，让元素的html标签内容和变量进行绑定

<body>
<div>
    <p v-html="info">p>
div>
<script src="./static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"小可爱"
        }
    })
script>
body>

v-model：双向绑定，让控件和变量进行双向绑定，获取控件的值。

<body>

<div>
    <input type="text" v-model="url" placeholder="请输入访问地址">
    <a :href="url">超链接a>
div>
​

<script src="static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            url: "www.baidu.com",
        }
    })
script>
body>

v-bind 和 : ：属性绑定，让元素的某个属性的值和变量进行绑定

<body>
<div>
    <a :href="url">百度一下a>
    <a v-bind:href="url">百度一下a>
div>
<script src="./static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            url:"http://www.baidu.com",
        }
    })
script>
body>

v-on 和 @：事件绑定，将事件与方法绑定，调用的方法必须写在methods中

<body>

<div>
    
    <input type="button" value="按钮1" @click="f()">
    <input type="button" value="按钮2" v-on:click="f()">
div>
​

<script src="static/js/vue.global.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {},
        methods: {
            f() {
                alert("按钮被点击了");
            },
    })
script>
body>

插入html标签

双花括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令

v-html 属性是一个指令，指令以 v- 为前缀。span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。

属性绑定（Attributes ）

变量的值影响标签属性的值

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个属性，应该使用 v-bind 指令：

v-bind 指令指示 Vue 将标签的属性与组件的属性保持一致。

简写

2、指令

指令是带有 v- 前缀的特殊属性。

v-on: 用于监听DOM事件，简写@

动态参数

指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内，attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。

 ... 
​

 ...

函数绑定到动态的事件名称上：

 ... 
​

在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。

动态参数值的限制

动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

指令

v-once: 一次性渲染，当数据改变时，插值处的内容不会更新
    
{{uname}}

​
v-bind: 动态绑定属性的内容
    
​
v-on: 用于监听DOM事件，简写：@

五、data 的属性和方法

组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后Vue 会通过响应性系统将其包裹起来，并以$data的形式存储在组件实例中。

export default {
    data() {
        name: "张三",
        age: 18,
    }
}

methods方法

方法methods通过this获取data属性的数据。

export default {
  data() {},
​
  methods:{
    changeColor:function(){
      this.id='d2';
    }
  }
}

这些methods和组件实例的其它所有属性一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用:

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。

只有依赖值不变，那么就不会重新计算。

//计算属性的简写
computed:{
  //字符串翻转属性
  reverseMsg:function(){
    return this.message.split("").reverse().join("")
  }
},
​
//每一个计算属性都有一个getter和setter方法
//完整写法
computed:{
    reverseMsg:{
        //当调用reverseMsg的时候就会自动执行getter方法
        get: function(){
            return this.message.split("").reverse().join("")
        }
        
        //计算属性一般没有set方法，计算属性是只读属性
        //在设置或者更改计算属性的时候调用
        set: function(newValue){
          console.log(newValue);
        }
    }
}
​
//计算属性的调用
<p>{{ reverseMsg }}p>

六、侦听器

1、侦听器 'watch'的使用

就是侦听数据的变化，当需要在数据变化是执行异步或其他操作时，可以使用侦听器来响应数据的变化。使用 watch 选项在每次响应式属性发生变化时触发一个函数。

    //侦听器：监听数据的变化，一个数据影响多个数据
    watch:{
        //监听message属性的变化，当message发生变化时，就会调用这个函数
        message:function(newValue, oldValue){
            console.log(newValue);
            console.log(oldValue);
        }
    }

2、侦听器'watch'对对象进行深度监听

v-model：对数据进行双向绑定


  
  

当页面初始化的时候监听页面数据