1.v-on 调用传参
<head>
<style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<h3>自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(8)">牛奶8元</button>
</div>
<p>银行卡余额：{{ money }}元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy(price) {
this.money -= price
}
}
})
</script>
</body>
2.v-bind
-
作用： 动态的设置html的标签属性 → src url title ...
-
语法： v-bind:属性名="表达式"
-
注意： 简写形式 :属性名="表达式"
3.v-for
-
作用： 基于数据循环， 多次渲染整个元素→ 数组、对象、数字...
-
遍历数组语法：
v-for = "(item, index) in 数组"
- item 每一项， index 下标
- 省略 index: v-for = "item in 数组" → 数组、对象、数字...
<div id="app">
<h3>水果店</h3>
<ul>
<li v-for="(item, index) in list">
{{ item }} - {{ index }}
</li>
</ul>
<ul>
<li v-for="item in list">
{{ item }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '苹果', '鸭梨', '榴莲']
}
})
</script>
4.v-for 中的 key
1.语法：key属性 = "唯一标识"
2.作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
3.v-for 的默认行为会尝试 原地修改元素 （就地复用）
注意点：
-
key 的值只能是字符串或数字类型
-
key 的值必须具有唯一性
-
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
<body>
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for = "(item,index) in booksList" :key="item.id">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<!-- 注册点击事件 通过id进行删除数组中的 对应项 -->
<button @click = 'del(item.id)'>删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
booksList:[
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods:{
del(id) {
// console.log("删除",id)
// 通过id进行删除数组中的 对应项->filter(不会改变原数组的)
// filter:根据条件，保留满足条件的对应项，得到一个新数组
// 需要将更新后的新数组赋值给原来的数组
this.booksList = this.booksList.filter(item => item.id !== id )
}
}
})
</script>
</body>
5.v-model
-
作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
-
语法: v-model = '变量'
<div id="app">
<!--
v-model 可以让数据和视图，形成双向数据绑定
(1) 数据变化，视图自动更新
(2) 视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容
-->
账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login () {
console.log(this.username, this.password)
},
reset () {
this.username = ''
this.password = ''
}
}
})
</script>
