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>
相关推荐
恋猫de小郭11 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅17 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606118 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了18 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅18 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅19 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅19 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment19 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅19 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊19 小时前
jwt介绍
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决08Claude Code Skills 实用使用手册09在Trae中使用Pencil MCP10Vue-skills的中文文档