vue 基础语法及购物车小案例
插值操作
对象里的变量用{{}}插入,且可以进行运算及逻辑等操作,但是一般里面要尽量简介,非必要的情况下逻辑跟运算不往这里面写,逻辑跟运算都写在 module 里
- MVVM 模式(Model-View-ViewModel)
View 里的内容通过 ViewModel 能动态的改变 Model 的内容,Model 里的内容通过 ViewModel 能动态改变 View 里的内容 常用指令
- v-model
如给 input 绑定了 v-model,对应的插值就会与该 input 标签输入的内容一致,改变 input 里面的内容能动态改变插值,改变插值也能动态改变 input 里面的内容 - v-once
取消响应式,只显示初始值 - v-pre
将{{}}及里面的内容原封不动的全部输出,如<div v-pre>{{msg}}</div>
输出就是{{msg}}
- v-text
基本等同于{{}},,如
<div v-text="msg"></div>
就等同于
<div>{{ msg }}</div>
- v-html
这个跟 test 的使用方法类似,但是这个最重要的一点:用了这个指令,插入的值里面的 html 标签就能被解析出来
- v-model
v-bind:绑定属性
v-bind:可以给标签内的属性绑定变量或方法,可以简写为:,如<div v-bind:class="msg"></div>
就等同于
<div :class="msg"></div>
计算属性 computed
- 插值中一般只插值,不插入方法,只有事件的地方才加方法,或者方法中调用方法,方法放在程序里面,不放在插值模板里面。
- 方法跟计算属性的区别:计算属性带缓存,而方法不带,方法每调用一次都会执行一次,计算属性会根据当前的值是否有变化做一个判断,如果没有变化就不重复执行
- 当不加 get 与 set 直接写成函数方法时,默认是 get 方式
- get 与 set 的区别:可以简单理解为:get 一般用于将多个变量集合到一起生成计算值,当变量变化的时候计算值变化,set 用于把计算值拆分给多个变量,当计算值变化的时候,变量变化
就好比:
let a = 10;
let b = 20;
// get就是
function sum() {
return a + b;
}
console.log(sum());
// set就是
function add(sum) {
a = sum * 0.5;
b = sum * 0.5;
return [a, b];
}
console.log(add(30)[0], add(30)[1]);
事件监听 v-on
- v-on:事件名称 绑定时间监听器
- 语法糖写法:用@缩写
- 着重介绍 mouseenter(参数,$event)与mouseleave(参数,$event)
- 任何事件都可以加$event 参数,获取事件对象,里面可以包含各种对应事件的信息,如鼠标位置、按下的是哪个按键等等
- mouseenter(参数,$event)与mouseleave(参数,$event)区别于 mouseover 跟 mouseout,如果一个最外层的盒模型绑定了这个事件,内部还有多个嵌套的盒模型,使用 mouseover 跟 mouseout 时,内部盒模型也会触发这两个事件,但是 mouseenter 跟 mouseleave 就不会,他只会在最外层的盒模型四边进出时触发该事件
- .stop 阻止事件冒泡
- .self 当事件在该元素本身触发时才触发事件
- .capture 添加事件侦听器是,使用事件捕获模式
- .prevent 阻止默认事件
- .once 事件只触发一次
条件判断 v-if v-else v-else-if
- v-if 接收一个值,这个值是 true 或者 false,也可以是一个判断条件
- 只有 v-if 是单条件判断,如果为真,则该标签存在,为假该标签不存在
- v-if 与 v-else 双条件判断,如果为真,该标签存在,而 v-else 的标签不存在,反之该标签不存在,v-else 的标签存在
- v-if 、v-else-if 、v-else 多条件判断,里面一般加一个判断条件
循环遍历指令 v-for
- 基础语法
v-for="(item,index,num) in arr" :key="item.id"
item:值,index:下标,num 数字索引,:key 必加,这里面的值是什么无所谓,但是必须是一个唯一值 - 一个标签使用了 v-for 其下面的子标签也可以使用其中的内容
- 一个标签使用 v-for 遍历后,下面子标签可以进行二次遍历进行嵌套
- :key 这个东西简单理解,可以给所有被遍历出来的元素加一个唯一标识,可以给相如 checkbox 等类型加 checked 属性时,锁定对应元素,不然 checked 的时候就只能一直锁定某个位置的元素
v-model
实现原理,给 value 绑定一个值,然后使用@input 事件获取当前对象,拿到对应的值
<input type="text" name="111" id="222" :value="msg" @input="getValue($event)"
.lazy 懒加载修饰符
- .number 修饰符让其转换为 number 类型,类似于 parseInt,不同的是,如果开头的字符不是数字,仍然会输出字符串而不是 NaN
- .trim 修饰符可以自动过滤掉输入框的首尾空格
- radio 里的 v-model,有两个作用:1、代替 name 的功能,2,如果 v-model 绑定的值的初始值,与其中一个选项的 value 相同,会默认选中该选项
- checkbox 这里除了能够绑定 name 关系,还有两种情况:1.单值,单值的时候 v-model 绑定的值是一个布尔值,为 true 时默认勾选,为 false 时不勾选,2.多值,绑定的值是一个数组,选中哪个就会往这个数组内传哪个的值,同理这里的数组中初始有哪个选项的值,对应选项就会被选中
- select,select 给 select 标签加 v-model,然后 option 对应的 value 值会传到 select 绑定的单值或者数组中,如果其中有对应的值,select 里对应的 option 也会被选中
购物车小案例
<template>
<div>
<!-- v-if双条件判断如果books里没有内容提示购物车为空,否则显示table表单 -->
<div v-if="books.length <= 0">购物车空空如也,快去选购商品吧~</div>
<table v-else>
<caption>
购物车
</caption>
<thead>
<tr>
<th></th>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- v-for得加在tr里,v-for这层也会循环 -->
<tr v-for="(items, index) in books" :key="index">
<td>
<!-- 给每个input绑定v-model的true属性,使其默认选中 -->
<input type="checkbox" v-model="items.check" id="cart" />
</td>
<!-- 索引是从0开始的 索引+1,让编号从1开始 -->
<td>{{ index + 1 }}</td>
<!-- 书名 -->
<td>{{ items.name }}</td>
<!-- toFixed(num)将一个数值转为小数点后多少为的小数值 -->
<td><small>¥</small>{{ items.price.toFixed(2) }}</td>
<td>
<!-- 给减号按钮加click事件,点击后数量-1,并给disabled加一个条件判断,如果小于等于1减号失效 -->
<button @click="items.count--" :disabled="items.count <= 1">-</button>
<!-- 数量 -->
<span>{{ items.count }}</span>
<!-- 给加号按钮加click事件,点击后数量+1,并给disabled加一个条件判断,如果大于等于10加号失效 -->
<button @click="items.count++" :disabled="items.count >= 10">+</button>
</td>
<td>
<!-- 将a标签原有事件删除,并定义一个点击事件,点击删除某项 -->
<a href="" @click.prevent.stop="del(index)">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总价</td>
<!-- 总价 -->
<td colspan="3"><small>¥</small>{{ sum }}</td>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
export default {
data() {
return {
// 初始默认books的数组
books: [
{ id: 1, check: true, name: "《细说 PHP》", price: 10, count: 1 },
{ id: 2, check: true, name: "《细说网页制作》", price: 10, count: 1 },
{ id: 3, check: true, name: "《细说 JavaScript 语言》", price: 10, count: 1 },
{ id: 4, check: true, name: "《细说 DOM 和 BOM》", price: 10, count: 1 },
{ id: 5, check: true, name: "《细说 Ajax 与 jQuery》", price: 10, count: 1 },
{ id: 6, check: true, name: "《细说 HTML5 高级 API》", price: 10, count: 1 },
],
disabled: true,
};
},
computed: {
// 求和运算
sum() {
let total = 0;
for (let i = 0; i < this.books.length; i++) {
// 判断是否选中,选中的才被计算
if (this.books[i].check) {
// 循环累加
total += this.books[i].price * this.books[i].count;
}
}
// 返回总数
return total;
},
},
methods: {
// 删除方法,传入index索引参数
del(index) {
// 找到索引位置,删除一位
this.books.splice(index, 1);
},
},
};
</script>
<style lang="scss">
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid;
min-width: 30px;
padding: 6px;
text-align: center;
}
span {
padding: 4px;
}
</style>