Vue3基本使用

1.vue3特性

vue的引入方式

  1. cdn引入

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h2>哈哈哈</h2><p>我是内容，呵呵呵</p><div id="app"></div><!-- cdn引入 --><script src="https://unpkg.com/vue@next"></script><script>// 使用Vueconst app = Vue.createApp({template:`<h2>Hello World</h2><span>呵呵呵</span>`})// 挂载app.mount("#app");</script>
</body>
</html>
  1. 本地引入
    示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"></div><script src="./lib/vue.js"></script><script>var app = Vue.createApp({template:'<h1>哈哈哈</h1>'})app.mount("#app")</script>
</body>
</html>

数据展示

  1. 字符串
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({template:'<h2>{{message}}</h2>',data:function(){return {title:"hello world",message:'你好，vue3'}}})app.mount("#app")</script>
</body>
</html>
  1. 列表数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({template:`<h2>电影列表</h2><ul><li v-for="item in movies">{{item}}</li></ul>`,data:function(){return {message:"你好啊，李银河",movies:['大话西游','星际穿越']}}})app.mount("#app")</script>
</body>
</html>
  1. 计数器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({template:`<h2>当前计数器：{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button>`,data:function(){return {counter:0}},methods:{increment:function(){this.counter++},decrement:function(){this.counter--}}})app.mount("#app")</script>
</body>
</html>
  1. 计数器（重构）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>当前计数器：{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({data:function(){return {counter:0}},methods:{increment:function(){this.counter++},decrement:function(){this.counter--}}})app.mount("#app")</script>
</body>
</html>
  1. 原生dom计数器实现(命令式编程实现）
    vue是声明式编程思想，原生是命令式编程思想。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 命令式编程和声明式编程 --><h2>当前计数：<span class="counter"></span></h2><button class="add">+1</button><button class="sub">-1</button><script>// 获取domconst h2El = document.querySelector("h2")const counterEl = document.querySelector(".counter")const addBtnEl = document.querySelector(".add")const subBtnEl = document.querySelector('.sub')// 2.定义一个变量记录数据let counter = 10counterEl.textContent = counter// 2.监听按钮的点击addBtnEl.onclick = function(){counter++counterEl.textContent = counter}subBtnEl.onclick = function(){counter--counterEl.textContent = counter}</script>
</body>
</html>
  1. options选项-data属性选项的详解
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><button @click="changeMessage">改变message的值</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({data(){return {message:"hello"}},methods:{changeMessage:function(){this.message = "你好，世界";}}})app.mount("#app")</script>
</body>
</html>
  1. options_method属性选项
    注意method中方法不可以使用箭头函数
    示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>当前计数：{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({data:function(){return {counter:0}},methods:{increment:function(){this.counter++;},// es6写法increment(){},// es6的箭头函数increment:()=>{},decrement:function(){this.counter--;}}})app.mount("#app")</script>
</body>
</html>

VsCode生成代码片段

  1. 第一步，复制自己要生产的代码；
  2. 第二部，https://snippet-generator.app/在该网站中生成代码片段；
  3. 第三步，在VsCode中配置代码片段；设置-》首选项-》配置用户代码片段

Vue基础语法

  1. vue的Mustache语法
    示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><!-- 1.基本使用 --><h2>{{message}}</h2><h2>当前计数：{{counter}}</h2><!-- 2.表达式 --><h2>计数双倍：{{counter*2}}</h2><h2>展示的信息：{{info.split(" ")}}</h2><!-- 3.三元运算符 --><h2>{{age>=18 ? "成年人" : "未成年人"}}</h2><!-- 4.调用methods中函数 --><h2>{{getdate(date)}}</h2><!-- 注意不能定义语句 --><!-- <h2>{{const name="hello"}}</h2> --></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",counter:100,info:"my name is why",age:22,date:'17:03:01',}},methods:{getdate:function(date){return "2023-10-22 "+date}}})app.mount("#app")</script>
</body>
</html>
  1. v-once的使用
    示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><!-- 指令：v-once 只渲染一次 --><h2 v-once>{{message}}<h2>{{counter}}</h2></h2><h2>{{message}}</h2><button @click="changemessage">修改message</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",counter:100}},methods:{changemessage:function(){this.message = '你好，世界';this.counter = this.counter*2;console.log(this.message,this.counter);}}})app.mount("#app")</script>
</body>
</html>
  1. v-text的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>aa {{message}} bb</h2><h2 v-text="message">22222222222</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue"}}})app.mount("#app")</script>
</body>
</html>
  1. v-html的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{content}}</h2><h2 v-html="content"></h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",content:'<span style="color: red;font-size: 40px;">你好，世界</span>'}}})app.mount("#app")</script>
</body>
</html>
  1. v-pre的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2 v-pre>{{message}}</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue"}}})app.mount("#app")</script>
</body>
</html>
  1. v-cloak的使用
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>Document</title><style>[v-cloak]{display: none;}</style>
</head>
<body><div id="app"><h2 v-cloak>{{message}}</h2></div><script src="./lib/vue.js"></script><script>setTimeout(()=>{const app = Vue.createApp({// data:option apidata(){return {message:"hello vue"}}})app.mount("#app")},3000)</script>
</body>
</html>
  1. v-memo的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><div v-memo="[name]"><h2>姓名：{{name}}</h2><h2>性别：{{sex}}</h2><h2>年龄：{{age}}</h2></div><button @click="change_btn">改变信息</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",name:'张三',sex:'男',age:'18'}},methods:{change_btn:function(){this.age = 20;// this.name = '李四';}}})app.mount("#app")</script>
</body>
</html>
  1. v-bind的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><div><button @click="change_img">更换一下图片</button></div><img v-bind:src="showImg" alt=""><!-- v-bind语法糖是 : --><a :href="baidu">百度一下</a></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {baidu:'http://www.baidu.com',img1:'http://p1.music.126.net/PCT_tuIWRxEHZNtE5dpxOA==/109951168999152069.jpg?imageView&quality=89',img2:'https://p1.music.126.net/eQieDtxqnlHNSvrdiO4x_w==/109951168999193521.jpg?imageView&quality=89',message:"hello vue",showImg:'http://p1.music.126.net/PCT_tuIWRxEHZNtE5dpxOA==/109951168999152069.jpg?imageView&quality=89'}},methods:{change_img:function(){this.showImg = this.showImg === this.img1 ? this.img2 : this.img1}}})app.mount("#app")</script>
</body>
</html>
  1. v-bind绑定基本属性class(对象写法和数组写法)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.active{color: red;}</style>
</head>
<body><div id="app"><!-- 1.基本绑定class --><h2 :class="classes">{{message}}</h2><!-- 2.动态class可以写对象语法 --><button :class="isActive ? 'active' : '' " @click="btnClick">我是按钮</button><!-- 对象语法的基本使用 --><button :class="{active:isActive}" @click="btnClick">我是按钮</button><!-- 对象语法的多个键值对 --><button :class="{active:isActive,key}" @click="btnClick">我是按钮</button><!-- 动态绑定class是可以和普通的class同时使用 --><button class="abc cba" :class="{active:isActive,why:true,kobe:false}" @click="btnClick">我是按钮</button><!-- 动态class来可以写数组语法（了解） --><h2 :class="['abc','cba']">Hello Array</h2><h2 :class="['abc',className]">hello Array</h2><h2 :class="['abc',className,isActive ? 'active' : '']">hello Array</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",classes:"abc cba nba",isActive:false}},methods:{btnClick:function(){this.isActive = !this.isActive}}})app.mount("#app")</script>
</body>
</html>
  1. v-bind中style属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- style中的某些值，来自data中 --><!-- 动态绑定style，在后面跟上 对象类型 --><h2 v-bind:style="{color:fontColor,fontSize:fontSize+'px'}">哈哈哈</h2><!-- 动态的绑定属性，这个属性是一个对象 --><h2 :style="objStyle">呵呵呵呵</h2><!-- style的数组语法 --><h2 :style="[objStyle,{backgroundColor:'purple'}]">嘿嘿嘿</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",fontColor:"blue",objStyle:{fontSize:'50px',color:"green"}}}})app.mount("#app")</script>
</body>
</html>
  1. 绑定属性名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.aaa{color: red;}</style>
</head>
<body><div id="app"><h2 :[name_cls]="'aaa'">dddddddddddd</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {name_cls:"class",}}})app.mount("#app")</script>
</body>
</html>
  1. v-bind直接绑定对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2 :name="name" :age="age" :height="height">hello world</h2><h2 v-bind="info"></h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",info:{name:"why",age:18,height:1.88,address:'广州市'},name:"why",age:18,height:1.88}}})app.mount("#app")</script>
</body>
</html>

03.Vue的事件绑定

  1. 绑定事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box{width: 100px;height: 100px;background-color:red;}</style>
</head>
<body><div id="app"><!-- 1.基本使用 --><div class="box" v-on:click="divClick"></div><div style="height: 20px;"></div><!-- 2.语法糖写法 --><div class="box" @click="divClick"></div><div style="height: 20px;"></div><!-- 3.绑定的方法位置，也可以写成一个表达式 --><h2>{{counter}}</h2><button @click="increment">+1</button><button @click="counter++">+1</button><!-- 4.绑定其他方法 --><div class="box" @mousemove="divMousemove"></div><div style="height: 20px;"></div><!-- 5.元素绑定多个事件 --><div class="box" @click="divClick" @movsemove="divMousemove"></div><div style="height: 20px;"></div><div class="box" v-on="{click:divClick,mousemove:divMousemove}"></div><div style="height: 20px;"></div><div class="box" @="{click:divClick,mousemove:divMousemove}"></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",counter:10}},methods:{divClick:function(){console.log('divClick')},increment:function(){this.counter++;},divMousemove:function(){console.log('divMousemove')}}})app.mount("#app")</script>
</body>
</html>
  1. 绑定的参数传递
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><button @click="btn1Click">按钮1</button><button @click="btn2Click('why',age)">按钮2</button><button @click="btn3Click('why',age,$event)">按钮3</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",age:18}},methods:{btn1Click(event){console.log(event)},btn2Click(name,age){console.log("btn2Click",name,age)},btn3Click(name,age,event){console.log("btn3Click",name,age,event)}}})app.mount("#app")</script>
</body>
</html>
  1. 绑定事件的修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div id="app"><h2>{{message}}</h2><div class="box" @click="divClick"><button @click.stop="btnClick">按钮</button></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue"}},methods:{btnClick(event){console.log('btnClick')},divClick(){console.log('divClick')}}})app.mount("#app")</script>
</body>
</html>

Vue的条件渲染

  1. 完成需求Demo
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><template v-if="Object.keys(info).length"> <h2>个人信息</h2><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></template><template><h2>没有输入个人信息</h2><p>请输入个人信息后，展示内容</p></template></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",info:{name:"why",age:18}}}})app.mount("#app")</script>
</body>
</html>
  1. v-if的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div v-if="Object.keys(info).length"><h2>{{message}}</h2><!-- v-if="条件" --><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"个人信息",info:{name:"why",age:18}}}})app.mount("#app")</script>
</body>
</html>
  1. v-if-else的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div v-if="Object.keys(info).length"><h2>{{message}}</h2><!-- v-if="条件" --><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></div><!-- v-else --><div v-else><h2>没有个人信息</h2><p>请输入个人信息后，展示内容</p></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"个人信息",info:{}}}})app.mount("#app")</script>
</body>
</html>
  1. v-else-if使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h1 v-if="score > 90">优秀</h1><h2 v-else-if="score > 80">良好</h2><h3 v-else-if="score >= 60">及格</h3><h4 v-else>不及格</h4></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",score:70}}})app.mount("#app")</script>
</body>
</html>
  1. template元素的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><template v-if="Object.keys(info).length"> <h2>个人信息</h2><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></template><template><h2>没有输入个人信息</h2><p>请输入个人信息后，展示内容</p></template></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",info:{name:"why",age:18}}}})app.mount("#app")</script>
</body>
</html>
  1. 条件渲染-阶段案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div><button @click="toggle">切换</button></div><div v-if="isshowcode"><img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt=""></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",isshowcode:true}},methods:{toggle(){this.isshowcode = !this.isshowcode;}}})app.mount("#app")</script>
</body>
</html>
  1. v-show条件渲染
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><div><button @click="toggle">切换</button></div><div v-if="isshowcode"><img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt=""></div><div class="v_show" v-show="isshowcode"><img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt=""></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",isshowcode:true}},methods:{toggle(){this.isshowcode = !this.isshowcode;}}})app.mount("#app")</script>
</body>
</html>

Vue的列表渲染

  1. v-for的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><ul><li v-for="(item,index) in movies">{{item}}</li></ul><ul><li v-for="(item,index) in products">{{item.id}}-----{{item.name}}-----{{item.price}}</li></ul></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",movies:['星际穿越','少年派','大话西游','多啦A梦'],products:[{id:110,name:"Macbook",price:9.9},{id:111,name:"iphone",price:9.9},{id:112,name:"小米手环",price:9.9},]}}})app.mount("#app")</script>
</body>
</html>
  1. v-for的其他数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- 字符串 --><ul><li v-for="(item,index) in message">{{item}}</li></ul><!-- 数组 --><ul><li v-for="(item,index) in for_arr">{{item.title}}</li></ul><!-- 对象 --><ul><li v-for="(item,key,index) in airtcle">{{item}}--{{key}}---{{index}}</li></ul><!-- 数字 --><ul><li v-for="(item,index) in 10">{{item}}</li></ul></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",airtcle:{id:1,title:'标题一',desc:'描述'},for_arr:[{id:1,title:'标题一'},{id:2,title:'标题二'},{id:3,title:'标题三'},]}}})app.mount("#app")</script>
</body>
</html>
  1. v-for和template
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- 如果div没有实际意义，那么可以使用template --><template v-for="(value,key,indx) in infos"><span>{{value}}</span><div>{{key}}</div><span>{{index}}</span></template></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",infos:{name:'why',age:18,height:1.88}}}})app.mount("#app")</script>
</body>
</html>
  1. 数组更新的检测
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><ul><li v-for="(item,index) in names">{{item}}</li></ul><button @click="change_val()">操作</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",names:["abc","cba","nba","aaa","ccc"]}},methods:{change_val:function(){// 1.直接修改为另一个数组// this.names = ["why","abc"];// 2.通过一些数组的方法，修改数组中的元素// this.names.push("why")// this.names.pop()// this.names.splice(2,1,"why")// this.names.sort()// this.names.reverse()// 3. 不修改元数据的方法是不能监听watchconst newNames = this.names.map(item => item + "why")this.names = newNames;}}})app.mount("#app")</script>
</body>
</html>
  1. v-for中的key属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><ul><li v-for="item in letters" :key="item">{{item}}</li></ul></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",letters:["a","b","c"]}}})app.mount("#app")</script>
</body>
</html>

Vue的computed

  1. 复杂数据的处理-插值语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2>{{this.num1 + this.num2}}</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},methods:{}})app.mount("#app")</script>
</body>
</html>
  1. 复杂数据的处理-methods
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2>{{get_sub()}}</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},methods:{get_sub(){return this.num1 + this.num2;}}})app.mount("#app")</script>
</body>
</html>
  1. 复杂数据的处理-computed
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2>{{get_sub}}</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},computed:{get_sub(){return this.num1 + this.num2;}},methods:{}})app.mount("#app")</script>
</body>
</html>
  1. computed和methods区别
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2>{{get_sub}}</h2><h2>{{get_sub}}</h2><h2>{{get_sub}}</h2><h2>{{get_ext()}}</h2><h2>{{get_ext()}}</h2><h2>{{get_ext()}}</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},computed:{get_sub(){console.log('computed get_sub-------------')return this.num1 + this.num2;}},methods:{get_ext(){console.log('methods get_ext-------------')return this.num1 + this.num2;}}})app.mount("#app")</script>
</body>
</html>
  1. 计算属性的set和get写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2>{{fullname}}</h2><button @click="setFullname">改变fullname</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",firstname:'coder',lastname:'why'}},computed:{// 完整语法fullname:{get:function(){return this.firstname+" "+this.lastname},set:function(value){const names = value.split(" ")this.firstname = names[0]this.lastname = names[1]}}},methods:{setFullname(){this.fullname = "kobe bryant"}}})app.mount("#app")</script>
</body>
</html>

Vue的watch侦听

  1. Vue的data的watch
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><button @click="changeMessage">改变message</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",info:{name:'why',age:18}}},methods:{changeMessage(){this.message = '你好，世界';this.info = {name:"kobe"}}},watch:{// 1.默认对象参数 newValue/oldValuemessage(newValue,oldValue){console.log('message数据发生了变化：',newValue,oldValue)},info(newValue,oldValue){// 2.如果是对象类型，那么拿到的是代理对象// console.log("info数据发生了变化：",newValue,oldValue)// console.log(newValue.name,oldValue.name);// 3.获取原生对象console.log({ ...newValue });console.log(Vue.toRaw(newValue));}},})app.mount("#app")</script>
</body>
</html>
  1. Vue的watch监听器选项
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><h2>{{info.name}}</h2><button @click="change_name">改变name</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue",info:{name:'coder',age:18}}},methods:{change_name(){this.info.name = "kobe"}},watch:{// 默认watch监听不会进行深度监听// info(newVlaue,oldValue){//   console.log("监听到info的改变：",newVlaue,oldValue)// }// 进行深度监听info:{handler(newValue,oldValue){console.log("监听到info改变：",newValue,oldValue)console.log(newValue === oldValue)},// 监听器选项：// info进行深度监听deep:true,// 第一次渲染直接执行一次监听immediate:true},"info.name":function(newValue,oldValue){console.log("name发生改变：",newValue,oldValue)}}})app.mount("#app")</script>
</body>
</html>
  1. Vue的$watch监听
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><button @click="change_message">修改message</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({// data:option apidata(){return {message:"hello vue"}},methods:{change_message(){this.message = '你好，世界';}},created(){// ajax/fetch/axiosconsole.log("created");this.$watch("message",(newValue,oldValue)=>{console.log("message数据变量：",newValue,oldValue)},{deep:true,imediate:true})}})app.mount("#app")</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/119391.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于opencv的selenium滑动验证码的实现

基于opencv的selenium滑动验证码的实现

这篇文章主要介绍了基于opencv的selenium滑动验证码的实现&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 基于selenium进行动作链 由于最近很多人聊到滑动验证码…
阅读更多...
C语言之文件操作

C语言之文件操作

目录 实现文件读写 打开文件fopen函数的用法 写文件fprintf函数的用法 读文件fscanf函数的用法 写文件fwrite函数的用法 读文件fread函数的用法 关闭文件fclose函数的用法 实现文件读写 一直以来&#xff0c;我们学习C语言都是数据的处理&#xff0c;这些数据都是在内存…
阅读更多...
解决javascript报错：SyntaxError: Invalid Unicode escape sequence

解决javascript报错：SyntaxError: Invalid Unicode escape sequence

在处理cookie时报这个错&#xff1a; 网上搜了一圈都说是反斜杠问题&#xff0c;要把\替换成/ 但是试了网上的replace替换&#xff1a; replace(/\\/g, /) 结果没有用&#xff01;&#xff01;&#xff01; 然后我干脆直接做了一个最简单字符串赋值&#xff0c;再打印出来。…
阅读更多...
0036【Edabit ★☆☆☆☆☆】【让我加油】Let‘s Fuel Up!

0036【Edabit ★☆☆☆☆☆】【让我加油】Let‘s Fuel Up!

0036【Edabit ★☆☆☆☆☆】【让我加油 】Let’s Fuel Up! control_flow language_fundamentals numbers Instructions A vehicle needs 10 times the amount of fuel than the distance it travels. However, it must always carry a minimum of 100 fuel before setting o…
阅读更多...
C++ stack 的使用

C++ stack 的使用

目录 1. 无参构造函数 2. void push(const T& x) 3. void pop() 4. T& top() 5. bool empty() 6. size_t size() 7. 总结 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行 元素的插入与…
阅读更多...
快递排序Java

快递排序Java

快速排序是在工具类常用的排序算法&#xff0c;快速排序的思想主要是选定一个基准元素&#xff0c;然后找到基准元素的位置&#xff0c;然后再分别排序他左边的和他右边的,快速排序是不稳定的&#xff0c;时间复杂度位Nlog(N),最极端的情况就是一个反向排好顺序的数组&#xff…
阅读更多...
leetcode55. 跳跃游戏

leetcode55. 跳跃游戏

leetcode55. 跳跃游戏 方案一&#xff1a;dfs超时 class Solution { public:bool dfs(vector<int>& nums, int idx){if (idx (nums.size() - 1))return true;int dist nums.size() - idx;for (int i 0; (i < nums[idx]) && (i < dist); i) {if (d…
阅读更多...
【机器学习合集】人脸表情分类任务Pytorch实现TensorBoardX的使用 -＞（个人学习记录笔记）

【机器学习合集】人脸表情分类任务Pytorch实现TensorBoardX的使用 -＞（个人学习记录笔记）

人脸表情分类任务 注意&#xff1a;整个项目来自阿里云天池&#xff0c;下面是开发人员的联系方式&#xff0c;本人仅作为学习记录&#xff01;&#xff01;&#xff01;该文章原因&#xff0c;学习该项目&#xff0c;完善注释内容&#xff0c;针对新版本的Pytorch进行部分代码…
阅读更多...
快速入门Elasticsearch：安装、基本概念、分词器和文档基本操作详解

快速入门Elasticsearch：安装、基本概念、分词器和文档基本操作详解

本文主要介绍快速入门 Elasticsearch&#xff0c;从 安装 、 基本概念 、 分词器 、*** 文档基本操作 *** 这 4 个方面快速入门。 Elasticsearch 是一款近实时的搜索引擎&#xff0c;底层是基于 Lucene 做搜索&#xff0c;再此基础上加入了分布式的特性&#xff0c;以便支持海…
阅读更多...
2022年12月 Python（一级）真题解析#中国电子学会#全国青少年软件编程等级考试

2022年12月 Python（一级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试（1~6级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 关于Python语言的注释，以下选项中描述错误的是？（ ） A: Python语言有两种注释方式：单行注释和多行注释 B: Python语言的单行注释以#开头 C: Python多行注释使用###来做为标记 D: …
阅读更多...
RabbitMQ高级篇 笔记

RabbitMQ高级篇 笔记

这是一些高级的内容。 RabbitMQ还是运行在网络上的&#xff0c;倘若遇到了网络故障&#xff0c;mq自己挂了&#xff0c;出异常了&#xff0c;都会造成最终状态不一致的问题。这就是可靠性问题。 可靠性&#xff1a;一个消息发送出去之后&#xff0c;至少被消费1次。 要解决这3个…
阅读更多...
十九、类型信息（1）

十九、类型信息（1）

本章概要 为什么需要 RTTI RTTI&#xff08;RunTime Type Information&#xff0c;运行时类型信息&#xff09;能够在程序运行时发现和使用类型信息 RTTI 把我们从只能在编译期进行面向类型操作的禁锢中解脱了出来&#xff0c;并且让我们可以使用某些非常强大的程序。对 RTTI …
阅读更多...
第十三章：L2JMobius学习 – 玩家攻击怪物

第十三章：L2JMobius学习 – 玩家攻击怪物

本章节&#xff0c;我们学习一下玩家周边怪物的刷新。在上一章节中&#xff0c;我们提过这个事情。当玩家移动完毕之后&#xff0c;会显示周围的游戏对象&#xff0c;其中就包括NPC怪物。当然&#xff0c;玩家“孵化”自己&#xff08;调用spawnMe方法&#xff09;的时候&#…
阅读更多...
Hadoop分布式安装

Hadoop分布式安装

首先准备好三台服务器或者虚拟机&#xff0c;我本机安装了三个虚拟机&#xff0c;安装虚拟机的步骤参考我之前的一篇 virtualBox虚拟机安装多个主机访问虚拟机虚拟机访问外网配置-CSDN博客 jdk安装 参考文档&#xff1a;Linux 环境下安装JDK1.8并配置环境变量_linux安装jdk1.8并…
阅读更多...
Zoho Mail荣登福布斯2023年企业邮箱榜单，引领行业新方向！

Zoho Mail荣登福布斯2023年企业邮箱榜单，引领行业新方向！

几十年来&#xff0c;电子邮件一直是电子通信的重要形式&#xff0c;并且在未来的许多年里&#xff0c;它可能会无处不在。尽管有大量免费电子邮件服务可供用户和企业使用&#xff0c;但其中许多服务缺乏专门的功能&#xff0c;例如适合办公室使用的集中管理。 福布斯小型企业顾…
阅读更多...
1024特别剪辑： 使用Python Turtle 库绘制一棵随机生成的树

1024特别剪辑： 使用Python Turtle 库绘制一棵随机生成的树

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…
阅读更多...
MYSQL(事务+锁+MVCC+SQL执行流程)理解(2)

MYSQL(事务+锁+MVCC+SQL执行流程)理解(2)

一)MYSQL中的锁(知识补充) 可以通过In_use字段来进行判断是否针对于表进行加了锁 1)对于undo log日志来说:新增类型的&#xff0c;在事务提交之后就可以清除掉了&#xff0c;修改类型的&#xff0c;事务提交之后不能立即清除掉这些日志会用于mvcc只有当没有事务用到该版本信息时…
阅读更多...
【原创】解决Kotlin无法使用@Slf4j注解的问题

【原创】解决Kotlin无法使用@Slf4j注解的问题

前言 主要还是辟谣之前的网上的用法&#xff0c;当然也会给出最终的使用方法。这可是Kotlin&#xff0c;关Slf4j何事&#xff01;&#xff1f; 辟谣内容&#xff1a;创建注解来解决这个问题 例如&#xff1a; Target(AnnotationTarget.CLASS) Retention(AnnotationRetentio…
阅读更多...
等离子体共振和ENZ模式的场增强效应提高ITO对THz产生的非线性响应

等离子体共振和ENZ模式的场增强效应提高ITO对THz产生的非线性响应

利用等离子体共振和ENZ模式的场增强效应提高ITO对THz产生的非线性响应,SRR超表面的共振被设计成与λENZ紧密对齐。然而&#xff0c;ITO薄膜的加入&#xff0c;强烈地改变了透射光谱。 在x偏振照明下观察到共振分裂,在λENZ周围出现了一个明显的透明窗口,类似于等离子体诱导的透…
阅读更多...
Spark内核调度

Spark内核调度

目录 一、DAG &#xff08;1&#xff09;概念 &#xff08;2&#xff09;Job和Action关系 &#xff08;3&#xff09;DAG的宽窄依赖关系和阶段划分 二、Spark内存迭代计算 三、spark的并行度 &#xff08;1&#xff09;并行度设置 &#xff08;2&#xff09;集群中如何规划并…
阅读更多...
最新文章

Copyright @ 2022~2023