写在前面： 查阅「Vue官方网站」(Vue)是学习这个渐进式框架的推荐途径，很多想要搜寻的答案能在里面找到。本文记录Vue中的常用指令以及一个Vue简单案例的实现。
1. Vue的简介
Vue是一套用于构建用户界面的渐进式框架，尤雨溪是Vue.js框架的作者。学习Vue需要了解关于 HTML、CSS 和 JavaScript 的相关知识，只有当基础打牢后，Vue才能助力前端开发更上一层楼。
Vue具有如下特点：
- JavaScript框架：可以独立完成前后端分离式Web项目的渐进式JavaScript框架
- 简化DOM操作 ：以虚拟DOM为代表，Vue提供动态绑定等功能的一个框架，把程序员从复杂繁琐的DOM操作中解放出来
- 响应式数据驱动：视图是由数据驱动⽣成的，程序员可以通过修改数据从而使视图自动更新，而不会直接操作 DOM
此外，Vue采用MVVM模式的软件架构开发模式，关于MVVM的详细介绍可以参考一篇博文：什么是MVVM模式?。
2. Vue常用指令
指令 (Directives) 是指以v-开头，作用于HTML的标签，它能够提供一些特殊的特性：当指令被绑定到HTML元素时，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成HTML的一种特殊属性。
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
-
插值表达式：标签将会被替代为对应数据对象上属性的值，形如
{{vigoroushui}}- 作用： 使用Vue中的数据来替代HTML中的内容
- 内容： Vue对象
data中的数据或者一些数学运算（三元运算符），注意不能写语句 - 生效范围 : Vue对象接管的范围内，超出范围不会生效，不会被解析
-
el挂载注意点：- 一次选择多个标签的选择器，插值表达式只有第一个被解析
el挂载点选中的标签，其子标签使用插值表达式也能被解析html标签和body标签尽量不要被Vue对象接管，因为这两个标签被挂载后插值表达式不会被解析
-
文本设置：
v-text：只用于设置文本内容，且会更新整个标签中的内容v-html：除文本内容外，可以渲染HTML中的标签，注意尽量避免使用，因为会受到XSS跨站脚本攻击
-
判断是否渲染标签：
v-if：若为false，则将标签从 DOM 树中移除v-show： 将标签设置属性隐藏，本质是通过修改标签的display值- 两者的比较：
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好； 如果在运行时条件很少改变，则使用v-if较好。
-
v-on事件绑定：-
作用：用于绑定DOM事件，并在事件被触发时执行对应的JavaScript代码
-
语法: @事件名.修饰符 = “methods中的方法名” ，注意，方法可以传形参
-
修饰符：
<!-- 格式： v-on：事件名称.修饰符=“函数名称” 简写：@事件名.修饰符=“methods中的方法名” --> <button v-on:click="add"> <button @click="sub"> -
keydown.别名：按键（事件）触发
-
-
v-for：根据一组数组或对象的选项列表进行渲染，采用插值表达式接列表中的内容-
语法：
<!-- v-for="元素 in 容器(数组和对象)" v-for="数组中的元素 in data中的数组名" v-for="对象中的属性值 in data中的对象名" --> <h1 v-for="item in items"> {{item}}</h1> <h1 v-for="(element, index) in arr"> {{element}}</h1> <h1 v-for="(value, key, index) in Student"> {{value}}</h1> -
注意点：
key属性，通常是一个唯一的标识，它是一个可选属，建议在写v-for时设置：key="唯一值"
-
-
v-bind：绑定标签上的任何属性-
绑定
src和alt属性：alt代表当图像无法显示时的替代文字<img :src="imgUrl" v-bind:alt="alt" > 格式1: v-bind:属性名="data中的值" 简化格式: :属性名="data中的值" 对象语法: v-bind:属性名="{属性名:data中的值}" 数组语法: v-bind:属性名="[data中值1,data中值2...]" -
绑定
class类名<div v-bind:class="{active: isActive}"></div> <!-- 可以简化为 :，简化语法更常用 --> <div :class="{active: isActive}"></div>
-
-
v-model：获取和设置表单元素的值-
特点: 双向数据绑定（数据发生变化可以更新到界面，同时通过界面可以更改数据）
-
DOM对象绑定到模型数据、模型数据绑定到DOM对象
-
3. Vue的相关案例
本部分给出我对简易购物车的实现思路，案例的渲染速度有待优化，案例只是实现了功能，仅供参考。
先展示一份效果图：
案例描述：
- 点击购买
+则数量增加，总价格随之改变 - 当书本数量为1时，则不能继续减少
- 点击移除即可删除该行，总价格随之改变
- 使用Vue + HTML 实现该案例
实现思路：
- 引入
Vue.js - 构建Vue对象，其中包括
el（挂载），data（数据），methods（增、减、移除按钮的实现函数），computed（计算价格函数） - 逐行构建表格，涉及知识点：
v-for、v-bind - 采用内部样式表描述样式
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车演示</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- CSS的内部样式表 -->
<style>
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
.context{
padding: 10px 20px;
border: 1px solid #e9e9e9;
text-align: center;
}
.title{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 500;
}
.display{
position: relative;
left: 410px;
}
</style>
<body>
<div id="cart">
<table border="1px" width="50%" cellspacing="0" align="center">
<!-- 设置表格的第一行 -->
<tr class="title" align="center">
<td></td>
<td>书籍名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</tr>
<!-- 配合Vue 编辑表格的主体内容 -->
<tr v-for="(book, index) in Books" class="context" align="center">
<td>{{index+1}}</td>
<td>{{book.bookName}}</td>
<td>{{book.publishDate}}</td>
<td>¥{{book.price|showPrice}}</td>
<td>
<!-- 以”按钮 内容 按钮“的思路实现该部分-->
<!-- v-bind实现如果书本数量为1则不能减少-->
<input type="button" value="-" @click="decrease(index)" v-bind:disabled="book.count===0">
{{book.count}}
<input type="button" value="+" @click="increase(index)">
</td>
<td>
<input type="button" value="移除" @click="removeBook(index)">
</td>
</tr>
</table>
<!-- 用div的相对定位来将总价格固定在表格正下方 -->
<div class="display">
<!-- 在2级标题下使用一个计算函数 -->
<h2>总价格:¥ {{totalPrice|showPrice}}</h1>
</div>
</div>
</body>
<script>
var obj = new Vue({
el: "#cart",
data: {
Price: 0,
Books:[
{bookName:"《医学大神14册：现代医学史诗》", publishDate:"2019-9", price:378.00, count:1},
{bookName:"《机器学习》", publishDate:"2016-1", price:88.00, count:1},
{bookName:"《Hadoop权威指南》", publishDate:"2019-10", price:59.00, count:1},
{bookName:"《Linux/Unix系统编程手册》", publishDate:"2014-1", price:158.00, count:1}
]
},
methods: {
increase: function(index) {
this.Books[index].count++;
},
decrease: function(index) {
this.Books[index].count--;
},
removeBook: function(index) {
this.Books.splice(index,1);
}
},
computed: {
totalPrice: function() {
let price = 0;
for (let i in this.Books) {
price += this.Books[i].price * this.Books[i].count;
}
return price;
}
},
filters:{
showPrice(price){
return price.toFixed(2)
}
}
})
</script>
</html>
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
