[vue3知识点链接](https://blog.csdn.net/yangyangdt/article/details/122021026)### vue2写法```html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue2入门基础</title> <script src="js/vue.js"></script> <style type="text/css"> .red{ color: red; } .green{ color: green; } .bgyellow{ background-color: yellow; } </style> </head> <body> <div id="app"> <p v-if="istrue==0">{{pop}}</p> <p v-else-if="istrue==1">1.{{pop}}</p> <p v-else></p> <p v-show="show">2.我是v-show</p> <template v-if="show">3.v-if 与v-show的另一个区别template</template><br /> <button @click="handleclick">4.点击v-on</button><br /> <button @click="handleclick1($event)">4.点击v-on</button><br /> 5.v-for 遍历 <ul> <li v-for="(item,index) in arr">{{item}}---{{index}}</li> </ul> <ul> <li v-for="(value,key) in obj">{{value}}--{{key}}</li> </ul> <ul> <li v-for="item in 4">{{item}}</li> </ul> <ul> <li v-for="item in 'Yahoo'">{{item}}</li> </ul> <h2 :class="h2red">我是绑定红色的class</h2> <h2 :class="{green:true}">我是绑定green的class</h2> <h2 :class="[h2red,bg]">我绑定了两个class</h2> <h3 :class="h3arr[0]">class还可以用数组绑定</h3> <h4 :style="{border:'1px solid blue'}">style</h4> <h4 :style="[{border:'1px solid red'},color]" style="background-color: yellow;">style多个绑定</h4> <div v-html="html"></div> <a href=""></a> <a :[attr1]='url1'>去百度</a> <h3>{{returnfunc()}}</h3> <h2>{{conbine}}</h2> </div> </body> <script type="text/javascript"> data={ istrue:1, pop:"我是显示的pop", show:true, arr:[1,2,3,4], obj:{ name:'把卡卡', age:'29' }, h2red:"red", bg:'bgyellow', html:'<p>我是p标签</p>', attr1:'href', url1:'http://www.baidu.com', ret:'我是调用的函数', name:"小明", age:"12", conbine:'', color:{ color:"green" }, h3arr:['red','green'] } const vm=new Vue({ el:"#app", data:data, methods:{ handleclick:function(e){ console.log("我是点击的对象"+e.target) }, handleclick1:function(e){ console.log("我是点击的对象"+e.target) }, returnfunc:function(){ return this.ret; } }, created:function(){ this.conbine=this.name+this.age; }, watch:{ name:function(name){ this.conbine=name+this.age; } } }) vm.name="小白" </script></html>```### vue3写法```html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue3基础</title> <script src="js/vue.global.js"></script> <style type="text/css"> h4{ color: red; } .blue{ color: blue; } .bgcolor{ background-color: yellow; } </style> </head> <body> <div id="app"> <ul v-if="arr.length!=0"> <li v-for="value,index in arr0" > <span v-if="index<=1">{{ value }} {{ index }} </span> </li> </ul> <p v-else>数组为空</p> <h4>1）vue的双向绑定的功能</h4> <input type="text" v-model="doubleend"/> <h3>{{doubleend}}</h3> <h4>2）vue中常用的指令 </h4> <h4>2.1 v-if的用法</h4> <p v-if="istrue==0">{{ pop }}</p> <p v-else>我是else</p> <h4>2.2 v-bind,==:</h4> <img :src="imgUrl" :alt="name" width="100" height="100" /> <h4>3）创建数组，并且在页面中遍历数据 显示数据</h4> <li v-for="item in arr">{{ item }}</li> <h4>4）创建对象，并且在页面中遍历对象 显示数据</h4> <li v-for="(value,key) in obj">{{ value }}---{{ key }}</li> {{ obj.name }} <h4>6）通过vue给某个标签添加样式</h4> <h5 :class="{blue:true}">添加蓝色</h5> <h3 :class="a">添加蓝色</h3> <h5 :style="[{border:'1px solid green'},color1]" style="background-color: yellow;">{{ h5 }}</h5> <h4> v-on:click="handelclick()" 表示侦听点击事件</h4> <button v-on:click="handelclick()" >点击事件</button> <h4>this的指定</h4> <button v-on:click="handleClick1 ()">点击我{{count}}</button> <ul> <li v-for="value,index in arr0" v-on:click="handleClick2 (index)">{{ value }} {{ index }} </li> </ul> <h4>2.5 v-once：一次性插值</h4> <h5><span v-once>This will never change: {{ once }}</span></h5> <h4>2.6 v-html解释HTML</h4> <p>未使用v-html:Using mustaches: {{ rawHtml }}</p> <p>使用v-html: <span v-html="rawHtml"></span></p> </div> </body> <script type="text/javascript"> const data = { arr0:["小明","xiaobao","xiahua"], doubleend:"balabalabal", istrue:0, pop:"我是if", imgUrl:"https://ps.ssl.qhimg.com/sdmt/432_324_100/t01ecdff6694bf22e0c.webp", name:"火烈鸟", once:'执行一次，不改变', rawHtml:'<i>我是斜体</i>', arr:[1,2,3,4,5], obj:{ name:'xiaomig', age:'29', message:"r87381", }, a:["blue","bgcolor"], blue:"blue", bgcolor:"bgcolor", h5:"我的背景黄色，字体蓝色，有绿色边框", color1:{ color:"blue" }, count:10 } const vm = Vue.createApp({ data() { return data }, methods:{ handelclick(){ console.log("已点击") }, handleClick1 (){ console.log(this) this.count+=1 }, handleClick2 (num){ console.log("点击得到index"+num) } } }).mount('#app') var arr=[1,2,3,4,5,6]; var arr2=arr.slice(2,4) arr2=[3,4]; arr=arr=[1,2,3,4,5,6]; var arr1=[1,2,3,4,5,6]; var arr3=arr.splice(2,4); arr3=[3,4,5,6] </script></html>```
vue2写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue2入门基础</title>
<script src="js/vue.js"></script>
<style type="text/css">
.red{
color: red;
}
.green{
color: green;
}
.bgyellow{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<p v-if="istrue==0">{{pop}}</p>
<p v-else-if="istrue==1">1.{{pop}}</p>
<p v-else></p>
<p v-show="show">2.我是v-show</p>
<template v-if="show">3.v-if 与v-show的另一个区别template</template><br />
<button @click="handleclick">4.点击v-on</button><br />
<button @click="handleclick1($event)">4.点击v-on</button><br />
5.v-for 遍历
<ul>
<li v-for="(item,index) in arr">{{item}}---{{index}}</li>
</ul>
<ul>
<li v-for="(value,key) in obj">{{value}}--{{key}}</li>
</ul>
<ul>
<li v-for="item in 4">{{item}}</li>
</ul>
<ul>
<li v-for="item in 'Yahoo'">{{item}}</li>
</ul>
<h2 :class="h2red">我是绑定红色的class</h2>
<h2 :class="{green:true}">我是绑定green的class</h2>
<h2 :class="[h2red,bg]">我绑定了两个class</h2>
<h3 :class="h3arr[0]">class还可以用数组绑定</h3>
<h4 :style="{border:'1px solid blue'}">style</h4>
<h4 :style="[{border:'1px solid red'},color]" style="background-color: yellow;">style多个绑定</h4>
<div v-html="html"></div>
<a href=""></a>
<a :[attr1]='url1'>去百度</a>
<h3>{{returnfunc()}}</h3>
<h2>{{conbine}}</h2>
</div>
</body>
<script type="text/javascript">
data={
istrue:1,
pop:"我是显示的pop",
show:true,
arr:[1,2,3,4],
obj:{
name:'把卡卡',
age:'29'
},
h2red:"red",
bg:'bgyellow',
html:'<p>我是p标签</p>',
attr1:'href',
url1:'http://www.baidu.com',
ret:'我是调用的函数',
name:"小明",
age:"12",
conbine:'',
color:{
color:"green"
},
h3arr:['red','green']
}
const vm=new Vue({
el:"#app",
data:data,
methods:{
handleclick:function(e){
console.log("我是点击的对象"+e.target)
},
handleclick1:function(e){
console.log("我是点击的对象"+e.target)
},
returnfunc:function(){
return this.ret;
}
},
created:function(){
this.conbine=this.name+this.age;
},
watch:{
name:function(name){
this.conbine=name+this.age;
}
}
})
vm.name="小白"
</script>
</html>
vue3写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue3基础</title>
<script src="js/vue.global.js"></script>
<style type="text/css">
h4{
color: red;
}
.blue{
color: blue;
}
.bgcolor{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<ul v-if="arr.length!=0">
<li v-for="value,index in arr0" >
<span v-if="index<=1">{{ value }} {{ index }} </span>
</li>
</ul>
<p v-else>数组为空</p>
<h4>1）vue的双向绑定的功能</h4>
<input type="text" v-model="doubleend"/>
<h3>{{doubleend}}</h3>
<h4>2）vue中常用的指令 </h4>
<h4>2.1 v-if的用法</h4>
<p v-if="istrue==0">{{ pop }}</p>
<p v-else>我是else</p>
<h4>2.2 v-bind,==:</h4>
<img :src="imgUrl" :alt="name" width="100" height="100" />
<h4>3）创建数组，并且在页面中遍历数据 显示数据</h4>
<li v-for="item in arr">{{ item }}</li>
<h4>4）创建对象，并且在页面中遍历对象 显示数据</h4>
<li v-for="(value,key) in obj">{{ value }}---{{ key }}</li>
{{ obj.name }}
<h4>6）通过vue给某个标签添加样式</h4>
<h5 :class="{blue:true}">添加蓝色</h5>
<h3 :class="a">添加蓝色</h3>
<h5 :style="[{border:'1px solid green'},color1]" style="background-color: yellow;">{{ h5 }}</h5>
<h4> v-on:click="handelclick()" 表示侦听点击事件</h4>
<button v-on:click="handelclick()" >点击事件</button>
<h4>this的指定</h4>
<button v-on:click="handleClick1 ()">点击我{{count}}</button>
<ul>
<li v-for="value,index in arr0" v-on:click="handleClick2 (index)">{{ value }} {{ index }} </li>
</ul>
<h4>2.5 v-once：一次性插值</h4>
<h5><span v-once>This will never change: {{ once }}</span></h5>
<h4>2.6 v-html解释HTML</h4>
<p>未使用v-html:Using mustaches: {{ rawHtml }}</p>
<p>使用v-html: <span v-html="rawHtml"></span></p>
</div>
</body>
<script type="text/javascript">
const data = {
arr0:["小明","xiaobao","xiahua"],
doubleend:"balabalabal",
istrue:0,
pop:"我是if",
imgUrl:"https://ps.ssl.qhimg.com/sdmt/432_324_100/t01ecdff6694bf22e0c.webp",
name:"火烈鸟",
once:'执行一次，不改变',
rawHtml:'<i>我是斜体</i>',
arr:[1,2,3,4,5],
obj:{
name:'xiaomig',
age:'29',
message:"r87381",
},
a:["blue","bgcolor"],
blue:"blue",
bgcolor:"bgcolor",
h5:"我的背景黄色，字体蓝色，有绿色边框",
color1:{
color:"blue"
},
count:10
}
const vm = Vue.createApp({
data() {
return data
},
methods:{
handelclick(){
console.log("已点击")
},
handleClick1 (){
console.log(this)
this.count+=1
},
handleClick2 (num){
console.log("点击得到index"+num)
}
}
}).mount('#app')
var arr=[1,2,3,4,5,6];
var arr2=arr.slice(2,4)
arr2=[3,4];
arr=arr=[1,2,3,4,5,6];
var arr1=[1,2,3,4,5,6];
var arr3=arr.splice(2,4);
arr3=[3,4,5,6]
</script>
</html>
