当前位置： 首页 > news >正文

vue啊哈哈哈哈哈哈哈哈

news 2025/10/12 15:21:57

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//记录程序执行过程的变量 使用letconst 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-elsev-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-elsev-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>
http://www.dtcms.com/a/462830.html

相关文章：

  • 广州网站设计实力乐云seo国外做美食的网站
  • Git安装与配置：操作步骤+Gitee绑定
  • 深圳网站建设补助网站非法篡改
  • C语言字符串安全查找 ：strchr_s、strrchr_s、strstr_s
  • 微观世界的“尺子”，数码显微测量仪的原理与多元应用
  • jsp网站开发实例视频网站自助建设平台百度
  • 海思 / ASR / 展锐芯片实测：2025 随身 WiFi 选购核心参数与场景适配方案
  • 条件语句练习题
  • JLINKKeil调试 软硬件版本驱动对齐
  • wordpress 模板层次结构信息图百度网站关键词优化在哪里做
  • 天津做网站外包公司有哪些网站打开的速度特别慢的原因
  • ElasticSearch与Kibana 入门指南（7.x版本）
  • LLM 与强化学习的新范式：Agentic RL 研究综述
  • wordpress 标签打不开外贸网站推广seo
  • 深圳租赁住房和建设局网站网站设计定位
  • 公司网站建设会议纪要全球速卖通企业类型
  • 一、十天速通Java面试（第三天）
  • 网站怎么seo关键词排名优化推广石家庄专业信息门户网站定制
  • 十堰为企业做网站的单位wordpress建m域名网站
  • anaconda安装及使用
  • 惠来做网站专门做门的网站
  • 合肥专业网站排名推广wordpress显示近几篇微博
  • 智能推送定义怎么写
  • 认识Emitter：进程内的事件处理专家
  • RDK X5 镜像备份（详细）
  • 郑州建网站企业seo核心技术排名
  • 动易网站地图五款wordpress常用加速插件
  • 网站建设和运行费用中国国家城乡建设部网站
  • 5G与6G：从“万物互联“到“智能无界“的跨越
  • ISAC 4D Imaging System Based on 5G Downlink Millimeter Wave Signal