vue
es6
react
npm init vue@latest
cd bb
npm install
npm run dev
属性绑定 :v-bind 简写:
:title
: class
:id
条件渲染
频繁切换:使用v-show效率高
实质:display隐藏或显示
v-show
实质:销毁与重建
v-if
v-else-if
v-else
列表渲染
可以使用 of
作为分隔符来替代 in
<li v-for="(value, index) in myObject"> {{ index}}: {{ value }} </li>
v-for遍历数组(2个参数)(属性值,下标)
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
<li v-for="item in items">
{{ item.message }}
</li>
第二个参数:表示当前项的位置索引。
data() {
return {
parentMessage: 'Parent',
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
v-for遍历对象(3个参数)(属性值,属性名,下标)
你也可以使用 v-for
来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys()
的返回值来决定。
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
第二个参数表示属性名 (例如 key):
<li v-for="(value, key) in myObject">
{{ key }}: {{ value }}
</li>
第三个参数表示位置索引:
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
通过key管理状态
重新排序元素
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
展示过滤或排序后的结果
组件上使用 v-for
事件处理
v-on 缩写 @
内联事件处理器
data() {
return {
count: 0
}
}
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
方法事件处理器
<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// 方法中的 `this` 指向当前活跃的组件实例
alert(`Hello ${this.name}!`)
// `event` 是 DOM 原生事件
if (event) {
alert(event.target.tagName)
}
}
}
事件传参
获取事件对象(e.target)
<button @click="addCount">add</button><p>{{ count }}</p>
data(){return{count: 0}},methods: {//event对象addCount(e){e.target.innerHTML ="ADD"+this.countthis.count++}}}
<p @click="getNameHandler(item)" v-for="(item,index) in names" :key="index">{{ item }}</p>
data(){return{names:["sd", "ff", "vf"]}},methods: {//event对象getNameHandler(msg){console.log(msg);}}}
<div @click="getNameHandler(item,$event)" v-for="(item,index) in names" :key="index"><p>{{ item }}</p></div>
data(){return{names:["sd", "ff", "vf"]}},methods: {getNameHandler(msg,e){console.log(msg);console.log(e.target.tagName); //获取离item最近的标签名}}}
<a @click="clikeHandler" href="www.baidu.com">百度</a>
data(){return{}},methods:{clikeHandler(e){e.preventDefault();console.log('click');}}
<a @click.prevent="clikeHandler" href="www.baidu.com">百度</a>
data(){return{}},methods:{clikeHandler(e){console.log('click');}}
<div @click="clikDiv"><p @click="clikP">测试冒泡</p></div>
data() {return {};},methods: {clikeHandler(e) {console.log("click");},clikDiv(e) {console.log("div");},clikP(e) {e.stopPropagation();console.log("p");}}
<div @click="clikDiv"><p @click.stop="clikP">测试冒泡</p></div>
data() {return {};},methods: {clikDiv(e) {console.log("div");},clikP(e) {console.log("p");}}
<button @click="addListHandle">添加数据</button><ul><li v-for="(item,index) in list" :key="index">{{item}}</li></ul>
data(){return{list:[1,2,3]}},methods:{addListHandle(){//会引起UI自动更新this.list.push("aaa")//不会引起UI自动更新 //需要赋值给原数组UI才会自动更新this.list.concat("ddd")//会引起UI自动更新this.list=this.list.concat(["df"])}}
本文来自博客园,作者:hellowworld!,转载请注明原文链接:https://www.cnblogs.com/zhangsai/p/17641818.html
posted on 2023-08-18 23:20 hellowworld! 阅读(3) 评论(0) 编辑 收藏 举报