vue啊哈哈哈哈哈哈哈哈

通往曙光的路上2025-10-11 16:04

day6_vue

1js发展过程

原生js ---->js扩展库 jQuery ------> js框架 (减少程序中的dom操作)

前端常见框架

React angularJs Vue.js

2VUE

https://cn.vuejs.org/ 官网

VUE3 版本 使用组合式API

3vue基本效果

减少dom操作

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="app">
        <h1>我的变量的值:{{myMsg}}</h1>
​
    </div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
​
    /*
        1. 创建一个Vue实例
        2. 创建使用的变量
        3. 变量与页面元素 通过vue的标记 关联
        4. 自动渲染页面
    
        */ 
​
    const { createApp, ref } = Vue
​
    createApp({
        setup(){
            let myMsg = "jack";
            return{
                myMsg
            }
        }
    }).mount('#app')
​
​
</script>
</html>

4vue原理

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <h1 id="myTitle"></h1>
    <input id="myText" type="text"/>
</body>
<script>
    //document.getElementById('myTitle').innerHTML = 'hello world';
​
    /*
       1.vue响应式数据的原理
       改页面页面自动渲染 
       数据劫持 vue2核心原理(框架加载时如果对象复杂 比较慢) (扩展vue对象属性 改get/set方法 隐藏dom操作)
       (数字 字符串 bol值)
       代理对象 vue3核心原理(对象属性代理+数据劫持)
       (数组 自定义对象) 
​
       2.虚拟dom
         生成虚拟dom模板 根据根标签生成
         减少页面渲染次数 提高显示效率 减少卡顿
​
    */
​
    let myJson = {name:"jack",address:"北京"};
    //myJson.address = "beijing";
    //
    // Object.defineProperty(myJson,'address',{
    //     get(){
    //         console.log("尝试读取address属性的值");
            
    //     },
    //     set(val){
    //         console.log("尝试设置address属性的值"+val);
    //         document.getElementById('myTitle').innerHTML = val;
    //     }
    // })
​
    // myJson.address = "北京"
​
    let newJson = new Proxy(myJson,{
        get(target,prop){
            console.log(`读取属性${prop}:`+target[prop]);
        },
        set(target,prop,value){
            console.log(`尝试设置属性${prop}:`+value);
            if(prop=="address"){
                document.getElementById('myTitle').innerHTML = value;
            }
            if(prop=="name"){
                document.getElementById('myText').value = value;
            }
        }
    })
    //newJson.address = "北京"
    // console.log(myJson);
    // console.log(newJson);
    newJson.address = "北京2"
    newJson.name = "张三"
​
     document.getElementById('myTitle').innerHTML = 1;
      document.getElementById('myTitle').innerHTML = 2;
       document.getElementById('myTitle').innerHTML = 3;
​
</script>
</html>

5js模块化语法

复制代码 
/*
export 导出
import 导入
​
两种导入导出方式
默认导入导出
export default myName;
import name from './js/myjs.js'
​
命名导入导出
export {myName,myJson,myFun}
import { myName,myFun } from './js/myjs.js' 数量可以不对应 名称必须对应
​
*/

6vue中创建变量和函数的语法

变量和函数 需要属于vue对象 变量和函数 都要写在setup函数中 才能与vue有关系

复制代码 
            //ref      简单类型数据(使用数据劫持)
            //js中 需要添加.value
            //页面中 直接使用变量名
            const msg2 = ref("hello world2")
            const msg3 = ref({name:"张三",age:18})//ref 可以兼容复杂数据类型
            
​
            //reactive 复杂类型数据(使用代理对象)
            //js中 不需要添加.value
            //页面中 直接使用变量名
            const msg4 = reactive({name:"张三",age:18})
            
            //普通变量
            let msg = "hello world"
复制代码 
函数
            const myFun = ()=>{
                console.log("myFun");
                
            }
​
            myFun()
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        {{msg2}}
        名字:{{msg3.name}}<br>
        年龄:{{msg3.age}}<br>
​
        名字:{{msg4.name}}<br>
        年龄:{{msg4.age}}<br>
    </div>
</body>
<script type="module">
    import { createApp,ref,reactive} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
​
    createApp({
        setup(){
            //使用 变量 函数
            //初次渲染生效 后续监听到变化时 不生效
            let msg = "hello world"
            //使用vue响应式数据函数
            //ref      简单类型数据(使用数据劫持)
            //js中 需要添加.value
            //页面中 直接使用变量名
​
            //reactive 复杂类型数据(使用代理对象)
            //js中 不需要添加.value
            //页面中 直接使用变量名
            //如果是 数字 bol值 字符串
​
            //vue响应式变量 修饰符使用const
            //记录程序执行过程的变量 使用let
            const msg2 = ref("hello world2")
            const msg3 = ref({name:"张三",age:18})
            const msg4 = reactive({name:"张三",age:18})
​
            console.log(msg3);
            msg2.value = "hello world3"
            msg3.value.name = "李四"
            msg4.name = "王五"
​
            //函数方式与之前相同
            const myFun = ()=>{
                console.log("myFun");
                
            }
​
            myFun()
​
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                msg,msg2,msg3,msg4
            }
        }
    }).mount('#myapp')
​
</script>
</html>

7vue指令(页面如何与变量和函数关联)

注意:各种模板语法 要在页面中使用 必须对外暴漏变量和函数
7.1插值表达式
复制代码 
    1.插值表达式   {{变量}}  显示文本
    2.v-html  可以解析html标签   不建议用 (在js中 不要涉及dom操作)
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        欢迎<b>{{name}}</b>登录{{num1+num2}}<br>
        <span v-html="name2"></span>
​
    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
​
    /*
    各种模板语法 要在页面中使用 必须对外暴漏变量和函数
    1.插值表达式   {{变量}}  显示文本
    2.v-html  可以解析html标签   不建议用 (在js中 不要涉及dom操作)
    
​
    */
​
    createApp({
        setup(){
            //使用 变量 函数
​
            const name = ref('rose')
            const name2 = ref('<b>rose</b>')
            const num1 = ref(1)
            const num2 = ref(2)
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                name,num1,num2,name2
            }
        }
    }).mount('#myapp')
​
</script>
</html>
7.2属性绑定
复制代码 
v-bind 属性绑定
    给html的属性 绑定变量
    v-bind:value="变量"  :value="变量"
    常用属性值  字符串 数字  (禁用 只读)布尔值
    
    class属性(知道即可) 可以配置json对象 每个样式单独配置bol决定是否显示
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
    <style>
        .mydiv{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .mydiv2{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="myapp">
        <input :type="inputType" :value="msg" :disabled="inputStatus">
        <div :class="{'mydiv':div1status,'mydiv2':div2status}"></div>
    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    /*
    v-bind 属性绑定
    给html的属性 绑定变量
    v-bind:value="变量"  :value="变量"
    常用属性值  字符串 数字  (禁用 只读)布尔值
    
    class属性 可以配置json对象 每个样式单独配置bol决定是否显示

    */
    createApp({
        setup(){

            const div1status = ref(false)
            const div2status = ref(false)

            //使用 变量 函数
            //bol 数字 字符串
            const msg = ref(1)
            const inputType = ref("button")
            const inputStatus = ref(false)
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                msg,inputType,inputStatus,div1status,div2status
            }
        }
    }).mount('#myapp')

</script>
</html>
7.3分支指令
复制代码 
    v-if 分支指令
    单分支 v-if="条件"
    双分支 v-if="条件" v-else
    多分支 v-if="表达式返回bol值" v-else-if="表达式返回bol值" v-else

    v-show 显示/隐藏指令
    控制样式的显示/隐藏
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        普通页面

        <div v-if="isVip">
            <img src="./imgs/a.png"><br>
            微信:xxxxx
        </div>
        <div v-show="isVip">
            <img src="./imgs/a.png"><br>
            微信:xxxxx
        </div>

        <!-- <div v-if="isVip">
            <img src="./imgs/a.png"><br>
            微信:xxxxx
        </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的奖励
        </div>
        <div v-else>
            穷b充值去...
        </div> -->
    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    /*
    v-if 分支指令
    单分支 v-if="条件"
    双分支 v-if="条件" v-else
    多分支 v-if="表达式返回bol值" v-else-if="表达式返回bol值" v-else

    v-show 显示/隐藏指令
    控制样式的显示/隐藏
    

    
    */


    createApp({
        setup(){
            //使用 变量 函数
            let isVip = ref(false)
            let vipGrade = ref(0)//
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                isVip,
                vipGrade
            }
        }
    }).mount('#myapp')

</script>
</html>
7.4事件指令
复制代码 
//全局函数不能正常触发 
    //1.函数需要写在setup函数中 才能正常触发
    //2.onclick 变成 v-on:click
    //3. v-on:click="myTest" myText函数的()可以省略
    //4. 通过函数 改变数据时 数据必须是相应式数据 ref reactive
    //   ref对象.value   reactive对象.属性名
    //5. 如果封装的公共函数 再div中没有调用 不需要对外暴漏
    //6. v-on:事件  简写为 @事件
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        <h1>{{title}}</h1>
        <input type="text" :value="msg.name" />
        <button @click="myTest">点我</button>
    </div>
</body>
<script type="module">
    //全局函数不能正常触发 
    //1.函数需要写在setup函数中 才能正常触发
    //2.onclick 变成 v-on:click
    //3. v-on:click="myTest" myText函数的()可以省略
    //4. 通过函数 改变数据时 数据必须是相应式数据 ref reactive
    //   ref对象.value   reactive对象.属性名
    //5. 如果封装的公共函数 再div中没有调用 不需要对外暴漏
    //6. v-on:事件  简写为 @事件

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

    createApp({
        setup(){
            //使用 变量 函数
            const title = ref('hello world!!!!')
            const msg = reactive({name:'张三'})
            const myTest = () => {
                console.log('点击了')
                title.value = "你好世界!!!"
                msg.name = "李四"

                getRes(1,3)
            }
            const getRes=(a,b)=>{
                console.log(a+b);
                
            }

            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                myTest,title,msg
            }
        }
    }).mount('#myapp')

</script>
</html>
7.5双向绑定
复制代码 
    //属性绑定 单向绑定
    //model(数据)   ------>   view(视图 dom元素)
    //表单元素 双向绑定 v-model
    //model(数据)  <------>   view(视图 dom元素)
    //双向绑定之后 需要操作和读取数据时 直接使用变量即可

注意:表单元素不同 双向绑定用法稍有不同

复制代码 
1输入框类  
        v-model 替代 value属性
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        <input type="text" v-model="textVal">
        <button @click="setTextVal">改文本框的值</button>
        <button @click="getTextVal">读文本框的值</button>

    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


    createApp({
        setup(){
            //使用 变量 函数
            const textVal = ref('jack')


            const setTextVal = ()=>{
                textVal.value = 'rose'

            }
             const getTextVal = ()=>{
               console.log(textVal.value);

            }
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                textVal
            }
        }
    }).mount('#myapp')

</script>
</html>
复制代码 
2选择类
        单选框 
        v-model用来分组 绑定选中的值
        <input type="radio" v-model="gender" value="1">男

        //变量可以控制默认值 如果空值 谁都不选
        const gender = ref('2')
        
        多选框
         v-model用来分组 绑定选中的值
         <input type="checkbox" v-model="hobby"  :value="1">吃饭

         //数组变量可以控制默认值 如果空集合 谁都不选
         const hobby = ref([2])
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">

        <hr>
        性别:<input type="radio" v-model="gender" value="1">男
             <input type="radio" v-model="gender" value="2">女<br>
             {{gender}}
        <hr>
        爱好:   <input type="checkbox" v-model="hobby"  :value="1">吃饭
                <input type="checkbox" v-model="hobby"  :value="2">睡觉
                <input type="checkbox" v-model="hobby"  :value="3">打豆豆
                <!-- :value 用来控制表单元素的属性类型
                     value = "1"   类型字符串
                     :value = "1"   类型数字
                     :value = "'1'" 类型字符串
                   -->
        {{hobby}}
        <hr>

    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


    createApp({
        setup(){
            //使用 变量 函数
            const gender = ref('2')

            const hobby = ref([2])
            
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                gender,hobby
            }
        }
    }).mount('#myapp')

</script>
</html>

注意:小技巧

复制代码 
	<input type="checkbox" v-model="hobby"  :value="1">                
				<!-- 表单元素上:value 用来控制表单元素的属性类型
                     value = "1"   类型字符串
                     :value = "1"   类型数字
                     :value = "'1'" 类型字符串
                   -->
复制代码 
3下拉列表
        v-model绑定在select标签上
        <select v-model="city">
        值可以控制 option被默认选中
        当option改变时 绑定的值city也会改变
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">

        <!-- select 选项 option上 都需要配置value值 -->
        <select v-model="city">
            <option value="">-------请选择--------</option>
            <option value="1">北京</option>
             <option value="2">上海</option>
              <option value="3">深圳</option>


        </select>
        {{city}}
    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            //使用 变量 函数

            const city = ref("")

            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                city
            }
        }
    }).mount('#myapp')

</script>
</html>
7.6v-for遍历标签

需要遍历生成元素时

复制代码 
            1.有列表数据
            2.在需要遍历生成的元素上添加 v-for 指令 会带着子标签一起遍历
            3. v-for="临时变量 in 集合"
                通过模板语法 使用临时变量 显示集合中的内容
            4.配合使用的模板语法 {{city.name}}文本     :value="city.code" 属性
复制代码 
            简化的v-for语法
            v-for="临时变量 in 集合"

            完整语法
            v-for="(临时变量,索引) in 集合"


            为了防止数据重复渲染异常 建议搭配:key属性
            <option v-for="(city,index) in cityList" :key="index" :value="city.code">{{index}} {{city.name}}</option>
复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        <ul>
            <li v-for="msg in msgList">{{msg.content}}</li>
        </ul>
        <hr>
        <table border="1">
            <thead>
                 <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>年龄</th>
                </tr>
            </thead>
           
            <tbody>
                <tr v-for="student in stuList">
                    <td>{{student.id}}</td>
                    <td>{{student.name}}</td>
                    <td>{{student.age}}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        <select v-model="cityCode">
            <option v-for="(city,index) in cityList" :key="index" :value="city.code">{{index}} {{city.name}}</option>
        </select>
        {{cityCode}}
    </div>
</body>
<script type="module">
    import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            /*
            1.有列表数据
            2.在需要遍历生成的元素上添加 v-for 指令 会带着子标签一起遍历
            3. v-for="临时变量 in 集合"
                通过模板语法 使用临时变量 显示集合中的内容
            4.配合使用的模板语法 {{city.name}}文本     :value="city.code" 属性
            
            
            简化的v-for语法
            v-for="临时变量 in 集合"

            完整语法
            v-for="(临时变量,索引) in 集合"


            为了防止数据重复渲染异常 建议搭配:key属性
            <option v-for="(city,index) in cityList" :key="index" :value="city.code">{{index}} {{city.name}}</option>

            */

            //使用 变量 函数
            const msgList = [{content:'中国航天 生日快乐'},
                            {content:'蜜雪冰城小票藏连载小说热'},
                            {content:'用风神L8打开书本里的世界商'}]
            const stuList = [{id:1,name:"lisi",age:18},{id:2,name:"wangwu",age:20}]
            
            const cityList = [{code:"001",name:"北京"},{code:"002",name:"上海"},{code:"003",name:"广州"}]
            
            const cityCode = ref('')
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                msgList,stuList,cityList,cityCode
            }
        }
    }).mount('#myapp')

</script>
</html>

8vue生命周期

生命周期钩子

当执行到指定时机时 可以运行自定义代码

其中最常使用的钩子 onMounted

表示页面加载结束 通常用这个时机 加载后端数据

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div id="myapp">
        {{msg}}
    </div>
</body>
<script type="module">
    import { createApp,onBeforeMount,onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            //使用 变量 函数
            let msg = "hello world"
            

            /*
            onMounted 这个时机页面加载完成
                      通常用这个时机获取后端数据 在页面使用
            */

            // onMounted(()=>{ 
            //     console.log("Mountd周期执行了");
            // })
            // onBeforeMount(()=>{
            //     console.log("onBeforeMount周期执行了");

            // })

           

           // console.log("setup周期执行了");

            
            return {
                //如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
                msg
            }
        }
    }).mount('#myapp')

</script>
</html>
相关推荐
fouryears_234173 小时前
如何将Vue 项目转换为 Android App（使用Capacitor）
android·前端·vue.js
葡萄城技术团队3 小时前
在线Excel新突破：SpreadJS如何完美驾驭中国式复杂报表
前端
muchan923 小时前
这会不会引起编程范式的变革？
前端·后端·编程语言
进阶的鱼4 小时前
React+ts+vite脚手架搭建（四）【mock篇】
前端·javascript·react.js
Jagger_4 小时前
Scrum敏捷开发流程规范
前端·后端
Value_Think_Power4 小时前
变量->约束->目标
前端
开源框架4 小时前
招商银行模拟器app，网银模拟生成器，jar+c++组合模板
前端
日月之行_4 小时前
React 19.2正式发布啦！
前端
奔赴_向往4 小时前
抛弃虚拟DOM：Vue Vapor如何实现性能飞跃？
前端
热门推荐
01BongoCat - 跨平台键盘猫动画工具02两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答03智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践04GitHub 镜像站点05UV安装并设置国内源06Cursor Plan Mode：AI 终于知道先想后做了0746个Nano-banana 精选提示词，持续更新中08Linux下V2Ray安装配置指南09GitLab 零基础入门指南：从安装到项目管理全流程10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示