VUE3.0学习笔记
开始学习时间:2022-04-09
引入VUE的CSDN<script src="https://unpkg.com/vue@next"></script>
Vue官网:https://v3.cn.vuejs.org/
一、VUE语法初探-开始学习时间:2022-04-09
1.1 单页面基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue基本语法使用</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
//创建vue实例并且使用mount挂载到id = app 节点下
Vue.createApp({
data() {
return {
content: "hello world vue3.0"
}
},
template:`<div>{{content}}</div>`
}).mount("#app");
</script>
</body>
</html>
1.2 定时器使用:setInterval
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>helloWorld 定时器</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
count>>>{{count}}
</div>
<script>
//创建vue实例
const app = Vue.createApp({
data() {
return {
count: 0,
content:"hello world"
}
},
mounted() {
setInterval(()=>{
this.count +=1;
},1000);
}
});
//把vue实例挂载到 id=app 的dom节点下
app.mount("#app")
</script>
</body>
</html>
1.3 字符串翻转:@click
v-on:click='converStr’
点击事件 ,可以简写@click="converStr"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
content: "hello world vue"
}
},
methods:{
//点击触发翻转字符串的方法
convertStr(){
this.content = this.content.split('').reverse().join('');
}
},
template: `<div>{{content}} </div>
<button v-on:click="convertStr">反转</button>
<button @click="convertStr">反转</button>
`
});
app.mount("#app")
</script>
</body>
</html>
1.4 隐藏和显示:v-if
v-if
指令,作为逻辑判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示和隐藏</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
content: "hello world vue",
show: true
}
},
methods:{
handlershow(){
this.show = !this.show;
}
},
template: `<div v-if="show">{{content}}</div>
<button @click="handlershow">显示或隐藏</button>
`
});
app.mount("#app")
</script>
</body>
</html>
1.5 数据双向绑定 :v-model
比如在输入框中使用v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
inputValue: "",
list:["今天学习VUE3"]
}
},
methods:{
addValue(){
this.list.push(this.inputValue);
this.inputValue=""
}
},
template: `
<input v-model="inputValue" /><button @click="addValue">新增</button>
<ul>
<li v-for="(item,index) of list">
{{item}}
</li>
</ul>
`
});
app.mount("#app")
</script>
</body>
</html>
1.6 数据循环遍历 : v- for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据循环遍历</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
books:["JAVA8实战","kafka指南","K8S"]
}
},
template: `<ul>
<li v-for="(item,index) of books">
编号:{{index+1}}----名称:{{item}}
</li>
</ul>`
});
app.mount("#app")
</script>
</body>
</html>
1.7 组件概念初探:component
如何创建组件,模板如何传值给组件基础使用
v-bind
绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>07.组件概念初探使用</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ counter }}
</div>
<script>
const App = {
data() {
return {
counter: 0,
list:['java','Vue3.0','python']
}
},
mounted() {
//页面加载完毕之后 启动一个定时器
setInterval(()=>{
this.counter +=1;
},1000)
},
template: `<ul>
<to-do v-for="(index,item) of list"
v-bind:content="item"
v-bind:index="number" />
</ul>`
};
//创建一个vue实例然后挂载到 #app下 [这样编写可以自定义组件]
const vue=Vue.createApp(App)
//自定义组件
vue.component("to-do",{
props:['content','number'],
template:`<li>{{content}}---{{number}}</li>`
})
vue.mount('#app');
</script>
</body>
</html>
二、Vue基础语法-开始学习时间: 2022-04-10
2.1 MVVM设计模式
M----model 数据; V—-view 视图;vm—-viewmodel视图数据连接层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world vue3.0</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
{{message}}
</div>
<script>
//app 表示vue应用,存储在app变量
// mvvm 设计模式: m -->model 数据; v-view视图; vm-->viewmodel视图数据连接层
const app = Vue.createApp({
data() {
return {
message: "xxx"
}
}
});
//vm 表示vue应用的根组价
//vm.$data.message="hello vue3.0"
const vm = app.mount("#root")
</script>
</body>
</html>
2.2 Vue生命周期函数:vue2.x
vue3.x 创建Vue应用: Vue.createApp({})
2.3 常用模板语法使用
插值语法 : {{message}}
v-html指令
通过html 展示message 变量,不会转义 message的标签,直接渲染 message: <stronge>hello world </stronge>
v-bind:title
绑定一个属性为title
输入框是否可以输入: <input v-bind:disabled="disabled”/>
data中有一个属性: disabled:true
js表达式: {{Math.max(1,2)}}
v-once
: 变量只是用一次 <div v-once>{{message}}</div>
v-if: <div v-if="show”>{{message}}</div>
动态属性绑定: :[name]="message” / @[event]="handlerMehod”
data中有一个属性: name: "title” event: "mouseenter”
阻止表达提交[事件修饰符]: @click.prevent="handlerClick”
,handlerClick是methods里面的一个方法,写我们自己的逻辑
2.3.1 插值表达式使用:{{message}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world vue3.0</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
//app 表示vue应用,存储在app变量
// mvvm 设计模式: m -->model 数据; v-view视图; vm-->viewmodel视图数据连接层
const app = Vue.createApp({
data() {
return {
message: "xxx"
}
},
template:`<div>{{message}}</div>`
});
//vm 表示vue应用的根组价
//vm.$data.message="hello vue3.0"
const vm = app.mount("#root")
</script>
</body>
</html>
2.3.2 直接渲染数据,不用转义 :v-html
在使用插值表达式的时候默认是进行转义了的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world vue3.0</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
//app 表示vue应用,存储在app变量
// mvvm 设计模式: m -->model 数据; v-view视图; vm-->viewmodel视图数据连接层
const app = Vue.createApp({
data() {
return {
message: "<strong>hell world</strong>"
}
},
// template:`<div v-html="message"></div>`
template:`<div>{{message}}</div>`
});
//vm 表示vue应用的根组价
//vm.$data.message="hello vue3.0"
const vm = app.mount("#root")
//直接输入: <strong>hell world</strong>
</script>
</body>
</html>
使用v-html
直接渲染message中的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world vue3.0</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
//app 表示vue应用,存储在app变量
// mvvm 设计模式: m -->model 数据; v-view视图; vm-->viewmodel视图数据连接层
const app = Vue.createApp({
data() {
return {
message: "<strong>hell world</strong>"
}
},
template:`<div v-html="message"></div>`
// template:`<div>{{message}}</div>`
});
//vm 表示vue应用的根组价
//vm.$data.message="hello vue3.0"
const vm = app.mount("#root")
</script>
</body>
</html>
2.3.3 给标签绑定属性 v-bind:title (或者简写:title
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world vue3.0</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
//app 表示vue应用,存储在app变量
// mvvm 设计模式: m -->model 数据; v-view视图; vm-->viewmodel视图数据连接层
const app = Vue.createApp({
data() {
return {
message: "<strong>hell world</strong>"
}
},
template:`<div v-html="message" v-bind:title="hell"></div>`
// template:`<div>{{message}}</div>`
});
//vm 表示vue应用的根组价
//vm.$data.message="hello vue3.0"
const vm = app.mount("#root")
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world vue3.0</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
//app 表示vue应用,存储在app变量
// mvvm 设计模式: m -->model 数据; v-view视图; vm-->viewmodel视图数据连接层
const app = Vue.createApp({
data() {
return {
message: "<strong>hell world</strong>",
disabled: true
}
},
methods:{
handlerDisabled(){
this.disabled = !this.disabled;
}
},
template:`<div v-html="message" v-bind:title="hell"></div>
<input v-bind:disabled="disabled"/>
<button @click="handlerDisabled">切换是否可以输入</button>
`
});
//vm 表示vue应用的根组价
//vm.$data.message="hello vue3.0"
const vm = app.mount("#root")
</script>
</body>
</html>
绑定的属性名称不确定的写法:—–动态属性
2.3.4 插值表达式使用JS表达式: {{Math.max(1,2)}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue"
}
},
template: `<div>{{Math.max(12,33)}}</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.3.5 使用一次: v-once指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue"
}
},
template: `<div v-once>{{msg}}</div>
`
});
const vm = app.mount("#app")
</script>
</body>
</html>
在控制台中去改变msg的内容:
vm.$data.msg="xxxx"
,页面还是展示的是hell world vue
2.3.6 vue的判断指令: v-if和点击事件v-on:click (或者简写@click)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue",
show: true
}
},
methods:{
showOrNotShow(){
this.show = !this.show;
}
},
template: `<div v-if="show" >{{msg}}</div>
<button @click="showOrNotShow">显示/隐藏</button>
`
});
const vm = app.mount("#app")
</script>
</body>
</html>
2.3.7 动态属性写法 @[event]="handlerMthods”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态属性的绑定的写法</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue",
name: "title",
event: "mouseenter"
}
},
methods:{
handlerMethods(){
alert("动态属性绑定写法")
}
},
template: `
<input v-bind:title="hellworld"/>
<input :[title]="hellworld" @[event]="handlerMethods"/>
`
});
app.mount("#app")
</script>
</body>
</html>
2.3.8 事件修饰符 @click.prevent="handlerClick”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
content: "hello world vue"
}
},
methods: {
handlerMenthods() {
alert("点击事件修饰符 @click.prevent 阻止表单提交")
}
},
template: `
<form action="http://www.baidu.com">
<button type="submit">提交</button>
</form>
<hr color="red"/>
<h1>阻止表单提交</h1>
<form action="http://www.baidu.com" @click.prevent="handlerMenthods">
<button type="submit">提交</button>
</form>
`
});
app.mount("#app")
</script>
</body>
</html>
2.4 数据、方法、计算属性和监听器
computed
计算属性;
watch
监听器
插值表达式中使用方法 {{formateString(str)}}
methods中定义一个formateString方法,比如: formateString(str){return str.toUpperCase()}
计算属性:
{{parseInt(count,10)*parseInt(price,10)}}
计算属性语义化: computed:{total(){this.count* this.price}}
计算属性computed 页面数据发生改变,计算属性里面的依赖属性发生改变的时候,才会重新计算【内部带有缓存效果】
methods里面的方法只要页面重新渲染,才会重新计算
监听器: wahtch:{}
wathc:{
//price 发生改变,函数会执行 计算属性底层都是使用监听器
price(current,prev){
//setTimeOut(()=>{console.log("price change)},3000)
this.nowToatal = this.current;
}
}`
2.4.1 数据 data:{return {//….}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
content: "hello world vue"
}
},
template: `<div>{{content}}</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.4.1 方法 methods:{customerMthods(){}}
- 无参方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方法</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
content: "hello world vue"
}
},
methods:{
handlerClick(){
alert("hello vue methos....")
}
},
template: `<div @click="handlerClick">{{content}}</div>`
});
app.mount("#app")
</script>
</body>
</html>
- 有参方法和插值表达式中使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方法</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
content: "hello world vue"
}
},
methods:{
handlerClick(){
alert("hello vue methos....");
},
formatStr(str){
return str.toUpperCase();
}
},
template: `
<h1>无参方法</h1>
<div @click="handlerClick">{{content}}</div>
<hr color="red"/>
<h1>有参方法</h1>
{{formatStr(content)}}
`
});
app.mount("#app")
</script>
</body>
</html>
<!--插值表达式中写的方法需要加上大括号 -->
2.4.2 计算属性 computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性computed</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue",
count: 12,
price: 10
}
},
computed: {
total() {
return this.count * this.price;
}
},
methods: {
getGlobNum() {
return this.count * this.price;
}
},
template: `<div>{{parseInt(count,10)*parseInt(price,10)}}</div>
<div>methods方法里面有一个getGlob计算总价的方法得到的值:{{getGlobNum()}}</div>
<div>
计算属性得到的值:{{total}}</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.4.3 监听器 watch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
count: 3,
price: 10,
newTotal: 30
}
},
watch:{
//price 是定义在data的属性
price(current,prev){
this.newTotal = current * this.count;
}
},
template: `<div>{{newTotal}}</div>`
});
const vm = app.mount("#app")
</script>
</body>
</html>
2.5 Vue样式绑定语法
2.5.1 基础原始样式绑定—使用class类样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue绑定样式</title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
template: `<div class="red">hello world-one</div>
<div class="green">hello world-tow</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.5.2 vue绑定样式之:字符串形式+绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue绑定样式</title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classStr: 'green'
}
},
template: `<div :class="classStr">hello world-one</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.5.3 vue绑定样式之:对象形式+绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue绑定样式</title>
<style type="text/css">
.green {
color: green;
}
.red {
color: red;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classStr: "green",
classObject: {
//这里编写的顺序和定义的样式的顺序保持一直。那么red会覆盖green
green: true,
red: true
}
}
},
template: `<div :class="classStr">hello world-one</div>
<div :class="classObject">hello world-tow</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.5.4 vue绑定样式之:数组形式+绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue绑定样式</title>
<style type="text/css">
.green {
color: green;
}
.red {
color: red;
}
.blue {
color: blue
}
.brown {
color: brown;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classStr: "green",
classObject: {
green: true,
red: true
},
//数组嵌套对象
classArray: ['green','red','blue',{brown: true}]
}
},
template: `<div :class="classStr">hello world-one</div>
<div :class="classObject">hello world-tow</div>
<div :class="classArray">hello world-tow</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.5.5 组件之间的样式传递 :class="$attrs.class”
子组件绑定父组件传递的值: $attrs.class
- 子组件模板中只有一层元素的时候,可以把样式直接绑定在父组件上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子组件如何绑定样式</title>
<style type="text/css">
.green {
color: green;
}
.red {
color: red;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classStr: "green",
classObject: {
green: true,
red: true
},
//数组嵌套对象
classArray: ['green', 'red', 'blue', {
brown: true
}]
}
},
template: `
<div :class="classObject">
hello world-tow
<demo :class="classStr"/>
</div>
`
});
app.component("demo",{
template: `<div>single</div>`
})
app.mount("#app")
</script>
</body>
</html>
- 如果子组件有多个相同层级的元素的时候需要使用 $attrs.class 表示使用父组件的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子组件如何绑定样式</title>
<style type="text/css">
.green {
color: green;
}
.red {
color: red;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
classStr: "green",
classObject: {
green: true,
red: true
},
//数组嵌套对象
classArray: ['green', 'red', 'blue', {
brown: true
}]
}
},
template: `
<div :class="classObject">
hello world-tow
<demo :class="classStr"/>
</div>
`
});
app.component("demo",{
template: `
//使用父组件样式即 <demo :class="classStr"/>
<div :class="$attrs.class">one</div>
//使用的是最外层 <div :class="classObject"></div>的样式
<div>tow</div>
`
})
app.mount("#app")
</script>
</body>
</html>
2.5.6 行内样式使用 style=“color:red;”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子组件如何绑定样式</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
styleStr: "color: green",
styleObjec: {
color: "yellow",
background: "red"
}
}
},
template: `
//html中行内样式的写法
<div style="color: red;">hello world-tow</div>
//行内样式字符串的写法
<div :style="styleStr">hello world-tow</div>
//行内样式对象的写法
<div :style="styleObjec">hello world-tow</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.6 条件渲染:v-if | v-else /v-show
- v-if 控制dom节点是否存在
v-if /v-else 必须挨着一起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
template: `<div v-if="show">hello world v-if</div>
<div v-else>hello world v-else</div>
`
});
app.mount("#app")
</script>
</body>
</html>
- v-show 通过 style="display:none” 样式来控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串翻转</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
template: `<div v-if="show">hello world v-if</div>
<div v-else>hello world v-else</div>
<hr color="red"/>
//<div style="display: none;">hello world v-show</div>
<div v-show="show">hello world v-show</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.7 列表循环渲染 :v-for
循环数组、对象;循环指定key提高vue效率, :key="index”
,这个key值是唯一
数组的变更函数:
push("h”)–从数组中添加 / pop()–从数组中减少一个(从尾开始减) shift()(从头开始减)
从头部添加 unshift("h”)
splice,sort,reverse()取反
直接替换一个数组 this.listArray = ['x’,’y’]
this.listArray = ['x’,’y’].concat('z’)
过滤: this.listArray=['x’,’y’].filter(item => item === 'x’)
直接更新数组的内容: this.listArray[1]='m’
循环对象:
直接添加对象的内容,也可以自动的展示出来。【vue新版才支持】
直接循环一个数字: <div v-for="item in 10”>{{item}}</div>
循环里面的逻辑判断
<template></template>
2.7.1 循环遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if循环渲染</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['x','y','z']
}
},
template: `
<div v-for="item of listArray">{{item}}</div>
<hr/>
<div v-for="(item,index) in listArray">
{{item}}---{{index}}
</div>
`
});
const vm = app.mount("#root");
</script>
</body>
</html>
2.7.2 往数组里面添加元素 push("X”) / unshift("Y“)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if循环渲染</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['x','y','z']
}
},
methods:{
add(){
//1.push方法 【把元素添加到尾部】
//this.listArray.push("m");
//2.直接替换
//this.listArray = ['x','y','z','m','n']
//3.unshift 把元素添加到头部
//this.listArray.unshift("J");
//4.concat
this.listArray =['B','A'].concat("C");
}
},
template: `
<div v-for="(item,index) in listArray">
{{item}}---{{index}}
</div>
<button @click="add">新增元素到数组中</button>
`
});
const vm = app.mount("#root");
</script>
</body>
</html>
2.7.2 数组翻转 reverse/排序 sort / 分割split
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if循环渲染</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['x','y','z']
}
},
methods:{
reverse(){
//把数组进行反转
//reverse/排序 sort / 分割split
this.listArray.reverse();
}
},
template: `
<div v-for="(item,index) in listArray">
{{item}}---{{index}}
</div>
<button @click="reverse()">把数组元素进行反转</button>
`
});
const vm = app.mount("#root");
</script>
</body>
</html>
2.7.3 数组过滤 filter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if循环渲染</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['X','y','z','X']
}
},
methods:{
reverse(){
//把数组进行反转
//this.listArray.reverse();
},
filterArray(){
this.listArray = this.listArray.filter(item => item ==='X');
}
},
template: `
<!-- :key="index" 如果往数组中添加了元素,使用改key 之后
告诉vue 不用渲染以前,把新增渲染出来都可以了 -->
<div v-for="(item,index) in listArray" :key="index">
{{item}}---{{index}}
</div>
<button @click="filterArray()">过滤出X的元素</button>
`
});
const vm = app.mount("#root");
</script>
</body>
</html>
2.7.4 循环遍历对象 :v-for = (value,key,index) of listObje
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if循环渲染</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['X', 'y', 'z', 'X'],
listObj: {
name: "TOM",
age: 34,
sex: "男"
}
}
},
template: `<div v-for="(value,key,index) of listObj" :key="index" >
{{value}}---{{key}}---{{index}}
</div>
`
});
const vm = app.mount("#root");
</script>
</body>
</html>
2.7.5 循环遍历的条件判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if循环渲染</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['X', 'y', 'z', 'X'],
listObj: {
name: "TOM",
age: 34,
sex: "男"
}
}
},
template: `
<div v-for="(value,key,index) of listObj" :key="index" >
<div v-if="value !=34">
{{value}}---{{key}}---{{index}}
</div>
</div>
<hr/>
<!--
//template 表示占位符,
//查看dom 元素结构可以发现 比上面这种少了一层div
-->
<template
v-for="(value,key,index) of listObj"
:key="index" >
<div v-if="value !=34">
{{value}}---{{key}}---{{index}}
</div>
</template>
`
});
const vm = app.mount("#root");
</script>
</body>
</html>
2.8 事件绑定
在事件这里可以写简单的js表达式: <div @click="count +=1>点击新增</div>
<div @click="add(2,$event)">点击新增</div>
点击原生事件获取:add(num,event){}
触发多个方法 : <div @click="add(),add2()">点击新增</div>
事件修饰符:
防止事件冒泡 @click.stop="add()”
@click.self
点击自己dom元素 触发的才触发
阻止默认行为: @click.prevent
@click.capture
事件执行一次: @click.once
2.8.1 绑定事件和传递event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods:{
add(num,event){
console.log(event.target);
this.count +=num;
}
},
template: `<div>{{count}}
<button @click="count+=2">添加1</button>
<button @click="add(2,$event)">添加2</button>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.8.2 绑定事件调用多个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods:{
add(){
alert("add ....")
},
add2(){
alert("add2 ....")
}
},
template: `<div>{{count}}
<button @click="add(),add2()">添加</button>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.8.3 事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods:{
add(){
this.count +=1;
},
addDiv(){
alert("div add")
}
},
template: `
{{count}}
<div @click="addDiv">
//时间向外传播行为, 事件冒泡
<button @click="add()">添加2</button>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.8.4 阻止事件冒泡修饰符 @click.stop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods:{
add(){
this.count +=1;
},
addDiv(){
alert("div add")
}
},
template: `
{{count}}
<div @click="addDiv">
//@click.stop 停止事件向外冒泡
<button @click.stop="add()">添加2</button>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.8.5 阻止事件冒泡 @click.self
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods:{
add(){
this.count +=1;
},
addDiv(){
alert("div add")
}
},
template: `
//自己的标签dom才会触发
<div @click.self="addDiv">
{{count}}
<button @click="add()">添加2</button>
</div>`
});
app.mount("#app")
</script>
</bo
prevent 阻止默认行为 / capture 捕获 /once 事件绑定执行一次
2.8.6 按键修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
methods:{
keydownHandler(){
alert("x")
}
},
template: `
<div>
<!-- 按键按下的时候触发keydownHandler方法 -->
<input @keydown="keydownHandler"/>
</div>
`
});
app.mount("#app")
</script>
</body>
</html>
修改成按下enter键才会触发keydownHandler方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定事件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
methods:{
keydownHandler(){
alert("x")
}
},
template: `
<div>
<!-- 按键按下的时候触发keydownHandler方法
tab/delte/tab
-->
<input @keydown.enter="keydownHandler"/>
</div>
`
});
app.mount("#app")
</script>
</body>
</html>
2.9 表单双向绑定指定
2.9.1 input 双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue"
}
},
template: `<div>
{{msg}}
<input v-model="msg"/>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
input 双向绑定不用写value了。
2.9.2 textarea数据双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: "hello world vue"
}
},
template: `<div>
{{msg}}
<textarea v-model="msg"/>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.3 checkbox 双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox数据双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: true
}
},
template: `<div>
{{msg}}
<input type="checkbox" v-model="msg" value="TOM"/>TOM
<div>
选择的内容: {{msg}}
</div>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: []
}
},
template: `<div>
{{msg}}
//使用数组来接收选择的值
tom <input type="checkbox" v-model="msg" value="tom"/>
kevin <input type="checkbox" v-model="msg" value="kevin"/>
dd <input type="checkbox" v-model="msg" value="dd"/>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.4 radio 双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: ''
}
},
template: `<div>
{{msg}}
<!-- 使用字符串存储单选按钮选择的值 -->
tom <input type="radio" v-model="msg" value="tom"/>
kevin <input type="radio" v-model="msg" value="kevin"/>
dd <input type="radio" v-model="msg" value="dd"/>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.5 select 双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: ''
}
},
template: `<div>
<select v-model="msg">
<option disabled value="">----请选择----</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
选择的内容: {{msg}}
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.6 select 进行多选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: []
}
},
template: `<div>
<select v-model="msg" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
选择的内容: {{msg}}
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.7 循环遍历option进行数据展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
options: [{
{text: 'A',
value: 'A'
},
{
text: 'B',
value: 'B'
},
{
text: 'C',
value: 'C'
}
],
msg: []
}
},
template: `<div>
<select v-model="msg" multiple>
<option v-for="item of options " :value="item.value">{{item.text}}</option>
</select>
选择的内容: {{msg}}
</div>`
});
app.mount("#app")
</script>
</body>
</html>
选择的A,存放的是{value: A},可以定义数据格式为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框双向绑定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: '',
options: [
{text:'A',value:{value:'A'}}
]
}
},
template: `<div>
<select v-model="msg">
<option disabled value="">----请选择----</option>
<option v-for="item of options" :value="item.value">{{item.text}}</option>
</select>
选择的内容: {{msg}}
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.8 v-model.lazy 修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model.lazy修饰符</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: ""
}
},
template: `<div>
{{msg}}
<input v-model.lazy="msg"/>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
2.9.9 v-model.number 类型转换修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model.lazy修饰符</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: 123
}
},
template: `<div>
{{ typeof msg}}
<input v-model.number="msg" type="number"/>
</div>`
});
app.mount("#app")
</script>
</body>
</html>
我测试了不用number修饰符,打印的类型也是number?????
2.9.10 v-model.trim 去除前后空格修饰符
去除前后空格,如果字符串中间有空格是去除不了的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model.lazy修饰符</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
msg: 123
}
},
template: `<div>
{{msg}}
<input v-model.trim="msg" />
</div>`
});
app.mount("#app")
</script>
</body>
</html>