首页 > 编程札记 > 编程

Vue3基本使用(基础部分)

阅读： 评论：0

Vue3基本使用(基础部分)

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="@next"></script><script>// 使用Vueconst app = ateApp({template:`<h2>Hello World</h2><span>呵呵呵</span>`})// 挂载unt("#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 = ateApp({template:'<h1>哈哈哈</h1>'})unt("#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 = ateApp({template:'<h2>{{message}}</h2>',data:function(){return {title:"hello world",message:'你好，vue3'}}})unt("#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 = ateApp({template:`<h2>电影列表</h2><ul><li v-for="item in movies">{{item}}</li></ul>`,data:function(){return {message:"你好啊，李银河",movies:['大话西游','星际穿越']}}})unt("#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 = ateApp({template:`<h2>当前计数器：{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button>`,data:function(){return {counter:0}},methods:{increment:function(){unter++},decrement:function(){unter--}}})unt("#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 = ateApp({data:function(){return {counter:0}},methods:{increment:function(){unter++},decrement:function(){unter--}}})unt("#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 = Content = counter// 2.监听按钮的点击lick = function(){counter+&#Content = lick = function(){Content = 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 = ateApp({data(){return {message:"hello"}},methods:{changeMessage:function(){ssage = "你好，世界";}}})unt("#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 = ateApp({data:function(){return {counter:0}},methods:{increment:function(){unter++;},// es6写法increment(){},// es6的箭头函数increment:()=>{},decrement:function(){unter--;}}})unt("#app")</script>
</body>
</html>

VsCode生成代码片段

  1. 第一步，复制自己要生产的代码；
  2. 第二部，/在该网站中生成代码片段；
  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 = ateApp({// 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}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",counter:100}},methods:{changemessage:function(){ssage = '你好，世界';unter = unter*2;console.unter);}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue"}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",content:'<span style="color: red;font-size: 40px;">你好，世界</span>'}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue"}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue"}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",name:'张三',sex:'男',age:'18'}},methods:{change_btn:function(){this.age = 20;// this.name = '李四';}}})unt("#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 = ateApp({// data:option apidata(){return {baidu:'',img1:'==/109951168999152069.jpg?imageView&quality=89',img2:'==/109951168999193521.jpg?imageView&quality=89',message:"hello vue",showImg:'==/109951168999152069.jpg?imageView&quality=89'}},methods:{change_img:function(){this.showImg = this.showImg === this.img1 ? this.img2 : this.img1}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",classes:"abc cba nba",isActive:false}},methods:{btnClick:function(){this.isActive = !this.isActive}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",fontColor:"blue",objStyle:{fontSize:'50px',color:"green"}}}})unt("#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 = ateApp({// data:option apidata(){return {name_cls:"class",}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",info:{name:"why",age:18,height:1.88,address:'广州市'},name:"why",age:18,height:1.88}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",counter:10}},methods:{divClick:function(){console.log('divClick')},increment:function(){unter++;},divMousemove:function(){console.log('divMousemove')}}})unt("#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 = ateApp({// 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)}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue"}},methods:{btnClick(event){console.log('btnClick')},divClick(){console.log('divClick')}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",info:{name:"why",age:18}}}})unt("#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 = ateApp({// data:option apidata(){return {message:"个人信息",info:{name:"why",age:18}}}})unt("#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 = ateApp({// data:option apidata(){return {message:"个人信息",info:{}}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",score:70}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",info:{name:"why",age:18}}}})unt("#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=".jpg" alt=""></div></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",isshowcode:true}},methods:{toggle(){this.isshowcode = !this.isshowcode;}}})unt("#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=".jpg" alt=""></div><div class="v_show" v-show="isshowcode"><img src=".jpg" alt=""></div></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",isshowcode:true}},methods:{toggle(){this.isshowcode = !this.isshowcode;}}})unt("#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 = ateApp({// 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},]}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",airtcle:{id:1,title:'标题一',desc:'描述'},for_arr:[{id:1,title:'标题一'},{id:2,title:'标题二'},{id:3,title:'标题三'},]}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",infos:{name:'why',age:18,height:1.88}}}})unt("#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 = ateApp({// 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()// verse()// 3. 不修改元数据的方法是不能监听watchconst newNames = this.names.map(item => item + "why")this.names = newNames;}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",letters:["a","b","c"]}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},methods:{}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},methods:{get_sub(){return this.num1 + this.num2;}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",num1:1,num2:2}},computed:{get_sub(){return this.num1 + this.num2;}},methods:{}})unt("#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 = ateApp({// 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;}}})unt("#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 = ateApp({// 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"}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue",info:{name:'why',age:18}}},methods:{changeMessage(){ssage = '你好，世界';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.Raw(newValue));}},})unt("#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 = ateApp({// 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)}}})unt("#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 = ateApp({// data:option apidata(){return {message:"hello vue"}},methods:{change_message(){ssage = '你好，世界';}},created(){// ajax/fetch/axiosconsole.log("created");this.$watch("message",(newValue,oldValue)=>{console.log("message数据变量：",newValue,oldValue)},{deep:true,imediate:true})}})unt("#app")</script>
</body>
</html>

Vue的阶段案例

  1. 购物车案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><table><thead><tr><th>编号</th><th>名称</th><th>单价</th><th>数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in card_list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td> <button :disabled="item.num <= 1" @click="sub(index,-1)">-</button>{{item.num}}<button @click="sub(index,1)">+</button></td><td @click="del(index)">删除</td></tr></tbody></table><div>总计：{{count}}</div></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"购物车",card_list:[{id:1,name:'php教程',price:30,num:1},{id:2,name:'Go教程',price:40,num:1},{id:3,name:'java教程',price:20,num:1},],}},computed:{count(){let price = 0;for(const item of this.card_list){price += item.price * item.num;}return price}},methods:{sub:function(index,num){console.log(index,num)this.card_list[index].num = this.card_list[index].num + num;},del:function(index){this.card_list.splice(index,1);}}})unt("#app")</script>
</body>
</html>

Vue的双向绑定

  1. v-model的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- 收到实现v-model --><input type="text" :value="val" @input="change_val"> <div>val的值{{val}}</div><!-- 自动实现 --><input type="text" v-model="model_val"><div>model_val的值{{model_val}}</div><!-- textarea --><textarea name="" id="" cols="30" v-model="textarea_value" rows="10"></textarea><div>textarea_value的值{{textarea_value}}</div></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",val:'abcd',model_val:'hello',textarea_value:'aaaaaaaaaaa'}},methods:{change_val:function(eve){this.val = eve.target.value;}}})unt("#app")</script>
</body>
</html>
  1. v-model绑定textarea
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- 收到实现v-model --><input type="text" :value="val" @input="change_val"> <div>val的值{{val}}</div><!-- 自动实现 --><input type="text" v-model="model_val"><div>model_val的值{{model_val}}</div><!-- textarea --><textarea name="" id="" cols="30" v-model="textarea_value" rows="10"></textarea><div>textarea_value的值{{textarea_value}}</div></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",val:'abcd',model_val:'hello',textarea_value:'aaaaaaaaaaa'}},methods:{change_val:function(eve){this.val = eve.target.value;}}})unt("#app")</script>
</body>
</html>
  1. v-model绑定checkbox
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- 单选框 --><label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意协议</label><h2>单选框：{{isAgree}}</h2><hr><div class="hobbies"><h2>请选择你的爱好：</h2><label for="sing"><input type="checkbox" id="sing" v-model="hobies" value="唱">唱</label><label for="jump"><input type="checkbox" id="jump" v-model="hobies" value="跳">跳</label><label for="rap"><input type="checkbox" id="rap" v-model="hobies" value="rap">rap</label><h1>你的爱好：{{hobies}}</h1></div></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",isAgree:false,hobies:[]}}})unt("#app")</script>
</body>
</html>
  1. v-model绑定radio
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><label for="man"><input type="radio" id="man" v-model="gender" value="man"> 男</label><label for="wman"><input type="radio" id="wman" v-model="gender" value="wman"> 女</label><h2>性别：{{gender}}</h2></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",gender:"man"}}})unt("#app")</script>
</body>
</html>
  1. v-model绑定select
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- select 单选 --><select name="" v-model="fruit" id=""><option value="apple">苹果</option><option value="orange">橘子</option><option value="banana">香蕉</option></select><h2>单选：{{fruit}}</h2><!-- select 多选 --><select name="" multiple size="3" v-model="fruits" id=""><option value="apple">苹果</option><option value="orange">橘子</option><option value="banana">香蕉</option></select><h2>多选：{{fruits}}</h2></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",fruit:"orange",fruits:[]}}})unt("#app")</script>
</body>
</html>
  1. v-model的值绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- select 多选 --><select name="" multiple size="3" v-model="fruits" id=""><option v-for="(item,index) in select_option" :key="item.val" :value="item.val">{{}}</option></select><h2>多选：{{fruits}}</h2></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",fruit:"orange",fruits:[],select_option:[{val:'apple',txt:'苹果'},{val:'orange',txt:'橘子'},{val:'banana',txt:'香蕉'},]}}})unt("#app")</script>
</body>
</html>
  1. v-model的修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!-- 1.lazy绑定事件  onchange --><input type="text" v-model.lazy="message"><h2>message:{{message}}</h2><hr><!-- 2.number:自动将内容转换为数子 --><input type="text" v-model.number="counter" name="" id=""><h1>counter:{{counter}}--{{typeof counter}}</h1><hr><input type="number" v-model.number="counter2" name="" id=""><h1>counter:{{counter2}}--{{typeof counter2}}</h1><hr><!-- 3.trim去除首位空格 --><input type="text" im="content"><h2>content:{{content}}</h2><hr><!-- 4. 使用多个修饰符 --><input type="text" im="content"><h2>content:{{content}}</h2></div><script src="./lib/vue.js"></script><script>const app = ateApp({// data:option apidata(){return {message:"hello vue",counter:0,counter2:0,content:''}},watch:{content(newValue,oldValue){console.log('newValue',newValue)}}})unt("#app")</script>
</body>
</html>

Vue组件化开发

  1. vue的根组件使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2></div><script src="./lib/vue.js"></script><script>const App = {// data:option apidata(){return {message:"hello vue"}}};const app = ateApp(unt("#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><product-item></product-item><product-item></product-item><product-item></product-item></div><!-- 组件product-item的模板 --><template id="item"><div class="product"><h1>我是商品</h1><h3>商品图片</h3><div>商品价格￥9.9</div><p>商品描述</p></div></template><script src="./lib/vue.js"></script><script>const App = {};const app = ateApp(App)// 注册一个全局组件appponent("product-item",{template:"#item"})unt("#app")</script>
</body>
</html>
  1. 组件自己的逻辑
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><!-- 驼峰命名不起作用 --><!-- <ComponentTitle></ComponentTitle> --><product-item></product-item><component-title></component-title> <product-item></product-item><component-title></component-title> <product-item></product-item><component-title></component-title> <product-item></product-item></div><!-- 组件product-item的模板 --><template id="item"><div class="product"><h1>我是商品</h1><h3>商品图片</h3><div>商品价格￥9.9</div><p>商品描述</p></div></template><!-- 组件product-item的模板 --><template id="ComponentTitle"><div><h1>商品标题</h1></div></template><script src="./lib/vue.js"></script><script>const App = {};const app = ateApp(App)// 注册一个全局组件appponent("product-item",{template:"#item"})appponent("ComponentTitle",{template:"#ComponentTitle"})unt("#app")</script>
</body>
</html>
  1. vue全局组件的特点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><!-- 驼峰命名不起作用 --><!-- <ComponentTitle></ComponentTitle> --><product-item></product-item><component-title></component-title> <product-item></product-item><component-title></component-title> <product-item></product-item><component-title></component-title> <product-item></product-item></div><!-- 组件product-item的模板 --><template id="item"><div class="product"><h1>我是商品</h1><h3>商品图片</h3><div>商品价格￥9.9</div><p>商品描述</p></div></template><!-- 组件product-item的模板 --><template id="ComponentTitle"><div><h1>商品标题</h1></div></template><script src="./lib/vue.js"></script><script>const App = {};const app = ateApp(App)// 注册一个全局组件//appponten都是全局组件 全局组件的特点：一旦注册成功后，可以在任意其他组件的template中使用appponent("product-item",{template:"#item"})appponent("ComponentTitle",{template:"#ComponentTitle"})unt("#app")</script>
</body>
</html>
  1. vue局部组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2><product-item></product-item>  <product-item></product-item>  <product-item></product-item>  </div><!-- 组件product-item的模板 --><template id="product"><div class="product"><h1>{{title}}--------我是商品</h1><h3>商品图片</h3><div>商品价格￥{{price}}</div><p>商品描述</p></div></template><script src="./lib/vue.js"></script><script>const ProductItem = {template:"#product",data(){return {title:'我是product的标题',price:9.9}}}const app = ateApp({// data:option apicomponents:{ProductItem,},data(){return {message:"hello vue"}}})unt("#app")</script>
</body>
</html>

感谢大家观看，我们下次见。

本文发布于:2024-02-01 23:58:19，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170680999440145.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

上一篇：浅析新能源汽车充电桩及收费云平台的应用
下一篇：27 进退失据
标签：基础
留言与评论（共有 0 条评论）
   
验证码：
推荐文章
排行榜
热门标签

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23