24.11.15 Vue3

2401_879103682024-11-16 17:59
    let newJson = new Proxy(myJson,{
        get(target,prop){
            console.log(`在读取${prop}属性`);
            
            return target[prop];
        },
        set(target,prop,val){
            console.log(`在设置${prop}属性值为${val}`);
            if(prop=="name"){
                document.getElementById("myTitle").innerHTML = val;
            }
            if(prop=="age"){
                document.getElementById("myText").value = val;
            }
            target[prop] = val;
        }
    })
虚拟dom

vue中合理利用了js中的虚拟dom思想

优化原生js多次渲染页面造成的卡顿情况

//指令式js 渲染 浏览器 html解析器 css解析器 js解析器

// document.getElementById("myTitle").innerHTML = 1;

// document.getElementById("myTitle").innerHTML = 2;

// document.getElementById("myTitle").innerHTML = 3;

// 虚拟的dom结构 统一赋值 做一次显示

原理示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    
    <h1 id="myTitle"></h1>

    <input id="myText" type="text"/>

</body>

<script>
    /* 框架负责dom操作 */
    let myVal = 10;
   


    let myJson = {name:"jack",age:15};
    console.log(myJson);
    // myJson.addr="第五大街"
    // console.log(myJson);
    //vue原理 响应式数据原理(数据赋值 页面自动渲染)
    // vue2原理 数据劫持(把dom操作 藏在getset方法中) vue2加载过程慢
    // vue3原理 数据劫持(简单数据 数字 bol值 字符串) 大对象(代理对象 重写get/set)


    // Object.defineProperty(myJson,"newAddr",{
    //     get(){
    //         console.log("get方法触发了");
            
    //     },
    //     set(val){
    //         console.log("set方法触发了"); 
    //         document.getElementById("myTitle").innerHTML = val;
    //     }
    // })
    // //console.log(myJson);
    // myJson.newAddr="aaa";

    let newJson = new Proxy(myJson,{
        get(target,prop){
            console.log(`在读取${prop}属性`);
            
            return target[prop];
        },
        set(target,prop,val){
            console.log(`在设置${prop}属性值为${val}`);
            if(prop=="name"){
                document.getElementById("myTitle").innerHTML = val;
            }
            if(prop=="age"){
                document.getElementById("myText").value = val;
            }
            target[prop] = val;
        }
    })
    console.log(newJson);
    newJson.age=22;
    newJson.name="rose";
    console.log(newJson);
    // newJson.addr = "new street";
    // console.log(myJson);
    // console.log(newJson);

    //vue原理 虚拟dom 做统一渲染
    //指令式js 渲染 浏览器 html解析器 css解析器 js解析器
    // document.getElementById("myTitle").innerHTML = 1;
    // document.getElementById("myTitle").innerHTML = 2;
    // document.getElementById("myTitle").innerHTML = 3;
    // 虚拟的dom结构  统一赋值 做一次显示
    //             


</script>


</html>

3常用新语法

3.1es模块化语法(通过模块化做导入导出 替换通过script标签导入js文件)
其他js文件 需要有导出
export  导出

<script type="module">
    import  导入
</script>
1默认导出 和导入

js文件中

let myData = "xxxx"
export default myData

注意:只能导出一个对象

导入

<script type="module">
    import  myData from '文件地址'
    
   注意 只能导入一个对象 名字可以自定义
</script>
2指定导出 和导入

js文件中

let myData1 = "xxxx1"
let myData2 = "xxxx2"
export {myData1,myData2}

注意:可以导出多个对象 函数

导入

<script type="module">
    import { myData1,myData2} from '文件地址'
    
   注意 需要使用哪些 就导入哪些
</script>
3.2 函数定义

通过箭头函数 替代匿名函数

function(){}
替换为
()=>{}
如果形参只有一个 ()可以不写
d=>{}

示例:

定义函数    
    let newFun = (a,b)=>{
        return a+b;
    }

遍历时使用
    let myArr = [1,2,3,4];
    myArr.forEach(d=>{
         console.log(d);
     })

定时函数使用
    setInterval(()=>{
         console.log(111);
    },100)
3.3json中函数的简化定义

注意对比

    let myJson = {name:"jack",readBook:function(){
                                console.log("读书");
                 			 }
    }
    可以简化为:
    let myJson = {name:"jack",readBook(){
                                console.log("读书");
                 			}
                 }
3.4修饰符

const 用来修饰常量 (实际上 不能通过=赋值) 语法特点

在js中 json对象 经常用const修饰符

示例:

定义json 
const myObj = {name:"jack",age:15};
   myObj.name="rose";
   console.log(myObj);
定义函数
 const myFun3 = ()=>{
        console.log(1111);
 }

4vue中变量定义

vue中存在三种变量

普通变量(跟页面显示无关)

用来记录程序执行过程中的变化数据 类似之前的公共变量

let imgIdx= 1;

响应式变量(改变量 页面自动渲染)
1 引用对象 ref          object.definedProperty  简单数据类型(数字 bol 字符串) 全都能用 但是复杂对象慢
//定义
const messageRef = ref(123)
//赋值
messageRef.value = "你好 Vue!"

2 代理对象 reactive   不建议用在简单类型数据 代理对象 proxy           json对象
//定义
const myJson = reactive({name:"jack",age:15});
//赋值
myJson.name = "rose";
myJson.age = 77;
函数定义:

使用箭头函数 简化函数定义

        const changeName = ()=>{
            console.log(myJson);
            messageRef.value = "'你好 Vue!'"
            //message = '你好 Vue!'
            myJson.name = "rose";
            myJson.age = 77;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        {{ messageRef }}
        <input type="button" value="改内容" @click="changeName()">
        <hr>
        <h1>{{myJson.name}}</h1>

        <h2>{{myJson.age}}</h2>

    </div>

</body>

<script type="module">
    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
    createApp({
      // vue中使用变量 函数 定义在setup函数中 
      setup() {
        //普通变量  初次显示有效果 后续无效果
        //一般用来做公共变量 记录过程变化数据
        let message = 'Hello Vue!';
        //响应式变量修饰符  
        //1 引用对象 ref          object.definedProperty  简单数据类型 全都能用 但是复杂对象慢
        //定义
        //const messageRef = ref(123)
        //赋值
        //messageRef.value = "'你好 Vue!'"

        //2 代理对象 reactive    代理对象 proxy           json对象
         //定义
        //const myJson = reactive({name:"jack",age:15});
        //赋值
        //myJson.name = "rose";
        //myJson.age = 77;

        //函数定义:
        /*
              函数名       参数
        const changeName = ()=>{
            console.log(myJson);
            执行的代码
            需要返回值加return  
        }
        
        */

        const messageRef = ref(123)

        const myJson = reactive({name:"jack",age:15});

        const changeName = ()=>{
            console.log(myJson);
            messageRef.value = "'你好 Vue!'"
            //message = '你好 Vue!'
            myJson.name = "rose";
            myJson.age = 77;
            
            
        }
        return {
            //对外暴漏 div要使用的数据
          message,messageRef,myJson,changeName
        }
      }
    }).mount('#app')
  </script>

</html>

vue指令 用于绑定变量与DOM的对应关系

5显示文本

常用指令 {{}} 插值表达式
v-hmtl 解析html标签

​ 插值表达式: 显示纯文本 不能解析html标签相当于 innerText属性

v-html指令 可以解析html标签 相当于innerHTML属性

vue中页面元素通常直接在页面中编辑 不需要解析html标签 v-html使用较少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <h1>欢迎{{ myName }}登录</h1>

        欢迎<span><b>{{ myName }}</b> </span>

        <hr>
        欢迎<span v-html="tempVal"></span>

    </div>

    
</body>

<script type="module">


    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
    createApp({
      setup() {
         const myName = ref('jack')
         const tempVal = ref('<b>jack</b>')
        return {
            myName,tempVal
        }
      }
    }).mount('#app')

/*
显示文本
    1.插值表达式
       显示文本 可以与其他文本一起编辑 方便使用
       相当于 innerText 不能解析html标签
    2.v-html指令
       相当于 innerHTML 能解析html标签 (用的少)

*/ 

  </script>

</html>

6属性绑定

v-bind 作用时让变量与页面元素的属性建立关联

元素属性
v-bind:type="textType"
变量
const textType = ref('button');

v-bind:type 可以简写 :type

注意:

属性绑定值的部分 可以使用js代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .cls1{
            color: lightcoral;
        }
        .cls2{
            background-color: lightseagreen;
        }

    </style>

</head>

<body>
    <div id="app">
        <input :class="{'cls1':clsStatus1,'cls2':clsStatus2}" 
        :type="textType"  
        :value="textVal+'d'"  
        :disabled="btnStatus">
        
    </div>

</body>

<script type="module">


    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
    createApp({
      setup() {

        const textVal = ref("abc");
        const textType = ref('button');

        const btnStatus = ref(false);


        const currentCls = ref('cls1')

        const clsStatus1 = ref(true)
        const clsStatus2 = ref(false)
        //返回的值少了的不显示，多了的报错
        return {
            textVal,textType,btnStatus,currentCls,clsStatus1,clsStatus2
        }
      }
    }).mount('#app')


    /*
属性操作指令 v-bind

在原生的属性前 加v-bind指令 值的部分对应变量值

元素属性
v-bind:type="textType"
变量
const textType = ref('button');

v-bind:type 可以简写 :type


要与原生的属性适配
普通属性   使用字符串
disabled   使用bol值
class     使用字符串  也可以使用json配置每个样式对应一个bol值
          :class="{'cls1':clsStatus1,'cls2':clsStatus2}"

v-bind:type="textType"
             js代码段 支持js代码表达式
             

*/
  </script>

</html>

7分支指令

页面生成多分支 根据不同情况 显示页面的不同元素

    根据分支生成页面元素
    单分支
    v-if
    
    双分支
    v-if
    v-else

    多分支
    v-if
    v-else-if
    v-else

注意与v-show的区别

    //v-if 分支指令    为false时 代码不存在
    //v-show 显示指令  为false时 控制样式 display:none 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        这是一个正常页面
        <!-- <div v-if="isVip">
            这是登录之后可以看的内容
        </div>

        <div v-else>
            登录之后就可以看见精彩内容了.....
        </div> -->

        <!-- <div v-if="vipGrade == 1" >
            这是普通VIP看的
        </div>

        <div v-else-if="vipGrade == 2">
            这是大VIP看的
        </div>

        <div v-else-if="vipGrade == 3">
            这是至尊VIP看的
        </div>

        <div v-else-if="vipGrade == 4">
            这是VIP中P看的
        </div>

        <div v-else>
            熊B 赶紧重置 精彩内容等着你
        </div> -->

        <div v-if="isVip">
            这是登录之后可以看的内容 v-if
        </div>

        <div v-show="isVip">
            这是登录之后可以看的内容 v-show
        </div>


    </div>

</body>

<script type="module">

    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      setup() {
        const isVip = ref(false)
        const vipGrade = ref(7)
        return {
            isVip,vipGrade
        }
      }
    }).mount('#app')

    //v-if 分支指令    为false时 代码不存在
    //v-show 显示指令  为false时 控制样式 display:none 
    /*
   
    根据分支生成页面元素
    单分支
    v-if
    
    双分支
    v-if
    v-else

    多分支
    v-if
    v-else-if
    v-else

    注意:多分支时 通过表达式返回bol值
    <div v-if="vipGrade == 1" >
            这是普通VIP看的
    </div>

    
    
    */
  </script>

</html>

8.事件指令

onclick 原生事件

v-on:click vue中的事件

@click 简写

原生事件 on 换成@ 就可以了

注意:vue中配置的函数 如果没有传参 不用写()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>{{divVal}}</div>

        <input type="text" :value="textVal"/>
        <input type="button" value="测试" @click="myTest('aaa')"/>

    </div>

</body>

<script type="module">


    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
    createApp({
      setup() {
        const divVal = ref('')
        const textVal = ref('')

        const myTest = (val)=>{
            console.log(val);
            divVal.value = val;
            textVal.value = val;
        }
        return {
            myTest,divVal,textVal
        }
      }
    }).mount('#app')

        /*
    vue中 事件  
    onxxx  onclick  onchange
    变成
    @xxx   @click   @change
    
    页面中使用的函数 也需要对外暴漏
    页面中函数调用 如果不传参 可以不写()

    
    */
  </script>

</html>

9双向绑定v-model

    普通属性绑定 单向的
    model  --- >   view
    变量          页面元素
    当model发生改变事 view会自动变化

    v-model表单元素 
    双向绑定
    model  < --- >   view
    变量             页面元素
    双方一起变化
    不管是vue的属性还是js原生属性v-model都可使其一起发生变化
输入类(输入框 密码框):
    输入类(输入框 密码框)
    v-model 替代value属性
    <input type="text" :value="textVal">    单向
    <input type="text" v-model="textVal">   双向
选择类(单选按钮 多选按钮):
    v-model 分组 表示被选中的值  checked用不到
    <input type="radio" v-model="gender" value="1"/>男 
    <input type="radio" v-model="gender" value="2"/>女
    radio 使用单值变量 const gender = ref('1')

    <input type="checkbox" v-model="hobby" value="java"/>java
    <input type="checkbox" v-model="hobby" value="js"/>js
    <input type="checkbox" v-model="hobby" value="python"/>python
    checkbox 使用数组变量  const hobby = ref([])
下拉列表
      <select v-model="area">
            <option disabled value="">---------请选择------------</option>

            <option value="1">北京1</option>

            <option value="2">北京2</option>

            <option value="3">北京3</option>

        </select>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <input type="text" v-model="textVal">
        <button @click="testBtn">测试按钮</button>

        <hr>
        <input type="radio" v-model="gender" value="1"/>男 
        <input type="radio" v-model="gender" value="2"/>女
        {{gender}}
        <hr>
        <input type="checkbox" v-model="hobby" :value="1"/>java
        <input type="checkbox" v-model="hobby" :value="2"/>js
        <input type="checkbox" v-model="hobby" :value="'3'"/>python
        {{hobby}}
        <hr>
        <select v-model="area">
            <option disabled value="">---------请选择------------</option>

            <option value="1">北京1</option>

            <option value="2">北京2</option>

            <option value="3">北京3</option>

        </select>

        {{area}}

    </div>    
</body>

<script type="module">


    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      setup() {
        const textVal = ref('jack');
        const gender = ref('1')
        const hobby = ref([2])
        const area = ref('')

        const testBtn = ()=>{
            //textVal.value = "rose"
            console.log(textVal.value);
            
        }
        return {
            textVal,testBtn,gender,hobby,area
        }
      }
    }).mount('#app')

    /*
    vue中 通过双向绑定 让变量获取表单元素的数据

    普通属性绑定 单向的
    model  --- >   view
    变量          页面元素
    当model发生改变事 view会自动变化

    v-model
    表单元素 
    双向绑定
    model  < --- >   view
    变量             页面元素
    双方一起变化


    输入类(输入框 密码框)
    v-model 替代value属性
    <input type="text" :value="textVal">    单向
    <input type="text" v-model="textVal">   双向

    选择类(单选  多选按钮)
    v-model 分组 表示被选中的值  checked用不到
    <input type="radio" v-model="gender" value="1"/>男 
    <input type="radio" v-model="gender" value="2"/>女
    radio 使用单值变量 const gender = ref('1')

    <input type="checkbox" v-model="hobby" value="java"/>java
    <input type="checkbox" v-model="hobby" value="js"/>js
    <input type="checkbox" v-model="hobby" value="python"/>python
    checkbox 使用数组变量  const hobby = ref([])
    加上属性绑定 可以控制数据类型
    value="3"      字符串
    :value="'3'"   字符串
    :value="3"     数字

    下拉列表
      <select v-model="area">
            <option disabled value="">---------请选择------------</option>

            <option value="1">北京1</option>

            <option value="2">北京2</option>

            <option value="3">北京3</option>

        </select>

      配置单值变量 对应被选中的option的值
      const area = ref('')


    */

  </script>

</html>

10遍历指令

v-for 遍历生成元素

    v-for="每次遍历到的元素        in 遍历的集合"
    v-for="(每次遍历到的元素,索引) in 遍历的集合"
    v-for="obj in list"   obj作为遍历到元素的临时变量
    :key作用：给列表项添加的**唯一标识。便于Vue进行列表项的正确排序复用。
        1.  key 的值只能是字符串 或 数字类型
        2.  key 的值必须具有唯一性
        3.  推荐使用  id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

遍历时 生成元素要搭配的语法
生成文本  {{}}  
生成属性  :属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">


        <ul>
            <li v-for="newsData in myNews" :key="idx">{{idx}}--{{newsData.content}}</li>

        </ul>

        <table border="1">
            <tr>
                <th>编号</th>

                <th>姓名</th>

                <th>年龄</th>

            </tr>

            <tr v-for="stu in stuList">
                <td>{{stu.id}}</td>

                <td>{{stu.name}}</td>

                <td>{{stu.age}}</td>

            </tr>

        </table>

        <select v-model="selVal">
            <option disabled value="">---------请选择------------</option>

            <option v-for="opa in opaList" :value="opa.code">{{opa.name}}</option>

            <option value="004">河南</option>

        </select>

        {{selVal}}
    </div>

    
</body>

<script type="module">
    import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      setup() {
        const opaList = ref([
            {code:'001',name:'北京'},
            {code:'002',name:'上海'},
            {code:'003',name:'深圳'}
        ])
        const selVal = ref('')
        const myNews = ref([{content:""退钱哥"说不退钱了"},
                             {content:"神十九航天员要准备收快递了"},
                            {content:"沙特官员辟谣来珠海航展只为扫货"}
                            ])

        const stuList = ref([{id:1,name:"jack",age:15},
                            {id:2,name:"jack2",age:17},
                            {id:3,name:"jack3",age:12}
        ])   
        

        return {
            myNews,stuList,selVal,opaList
        }
      }
    }).mount('#app')

    /*
    v-for 遍历生成元素
    v-for="每次遍历到的元素        in 遍历的集合"
    v-for="(每次遍历到的元素,索引) in 遍历的集合"
    v-for="obj in list"

    遍历时 使用每次遍历的元素
    obj.key
    {{obj.key}}     生成文本数据
    :属性="obj.key" 生成元素的属性

    
    遍历时 如果加上:key属性 作为唯一标记 给每条数据加唯一标记 (可选)


    table遍历生成
            <tr v-for="stu in stuList">
                <td>{{stu.id}}</td>

                <td>{{stu.name}}</td>

                <td>{{stu.age}}</td>

            </tr>


    select遍历生成

        <select v-model="selVal">
            <option disabled value="">---------请选择------------</option>

            <option v-for="opa in opaList" :value="opa.code">{{opa.name}}</option>

            <option value="004">河南</option>

        </select>

    */

  </script>

</html>
相关推荐
m0_748256781 小时前
WebGIS实战开源项目：智慧机场三维可视化（学习笔记）
笔记·学习·开源
红色的山茶花1 小时前
YOLOv9-0.1部分代码阅读笔记-loss.py
笔记
胡西风_foxww3 小时前
【es6复习笔记】Promise对象详解（12）
javascript·笔记·es6·promise·异步·回调·地狱
吉大一菜鸡9 小时前
FPGA学习（基于小梅哥Xilinx FPGA）学习笔记
笔记·学习·fpga开发
CCSBRIDGE12 小时前
Magento2项目部署笔记
笔记
亦枫Leonlew12 小时前
微积分复习笔记 Calculus Volume 2 - 5.1 Sequences
笔记·数学·微积分
爱码小白13 小时前
网络编程(王铭东老师)笔记
服务器·网络·笔记
LuH112413 小时前
【论文阅读笔记】Learning to sample
论文阅读·笔记·图形渲染·点云
一棵开花的树，枝芽无限靠近你15 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器
犬余15 小时前
设计模式之桥接模式：抽象与实现之间的分离艺术
笔记·学习·设计模式·桥接模式
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10ARM学习（31）编译器对overlay方式的支持