vue3的快速入门_vue3菜鸟教程-优快云博客

本文链接：https://blog.youkuaiyun.com/lizi88888/article/details/142325364

1. vue.js的快速入门使用
1.1 vue.js库的下载
1.2 vuejs的使用
1.2.1 调试工具Vue Devtools的安装
1.3 vue.js的M-V-VM思想
VM常用属性操作
1.4 显示数据
2. 常用指令
2.1 属性操作
2.2 事件绑定
例如:完成商城购物车中的商品增加减少数量
2.3 操作样式
2.3.1 控制标签class类名
2.3.2 控制标签style样式
2.3.2 实例-vue版本选项卡
2.4 条件渲染指令
2.4.1 v-if
2.4.2 v-else
2.4.3 v-else-if
2.4.4 v-show
2.5 列表渲染指令
3. Vue对象提供的其他的选项API
3.1 过滤器
3.1.1 使用Vue.filter()进行全局定义
3.1.2 在vue对象中通过filters选项来局部定义
3.2 计算属性和侦听属性
3.2.1 计算属性
3.2.2 侦听属性
3.3 vue对象的生命周期
3.4 指令修饰符
3.5 综合案例-todolist
3.6 webStorage本地存储

html、css、原生js、jQuery、bootstrap

vue.js的快速入门使用

1.1 vue.js库的下载

vuejs是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。

另外几个常见的工具库：react.js、vue.js、angular.js/jQuery

官方网站：https://cn.vuejs.org/

官方文档：https://v3.cn.vuejs.org/guide/introduction.html

vuejs目前有1.x、2.x和3.x 版本，我们学习3.x版本的。

jQuery和vue的定位是不一样的。

jQuery的定位是获取元素和完成特效。
vuejs的定位是方便操作和控制数据和完成特效。

1.2 vuejs的使用

vuejs的使用官方提供了2种方式：

基于脚本导入使用，下载vue.js文件，通过script标签引入到html网页。
基于项目构建工具来进行使用，需要安装项目构建工具，自动构建成一个独立的项目。

目前官方推荐的项目构建工具：vue-CLI，vite。

我们先通过vuejs的第1种方式来完成vue语法和基础内容的学习。这种方式的使用，vue的引入类似于jQuery，开发中可以使用开发版本vue-x.x.x.js，产品上线要换成vue.min.js。

github： https://github.com/vuejs/vue-next/tags

下载地址：https://v3.cn.vuejs.org/guide/introduction.html

https://cdn.jsdelivr.net/npm/vue@next/dist/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">


<p>{{message}}</p>
<p>{{num}}</p>
<p>{{is_delete}}</p>

<p>{{classmate}}</p>
</div>

<script>
// vuejs的所有代码全部开始于Vue对象
// Vue.createApp可以创建一个vue的实例对象，通过这个实例对象，我们可以操作指定HTML的内容、数据、结构、特效等等
// 一个HTML页面中，可以创建多个vue的实例对象，但是这些实例对象的保存变量名，不能一样
// 所以每次操作数据都要创建Vue实例对象开始。
const vm = Vue.createApp({
// data是将要展示到HTML标签元素中的数据。一般会在data这里预先设置vue要使用的变量数据,并给变量指定要一个默认值，
// 当然最终data这里的数据都是来自服务器
data(){
return {
message: "hello, python36",
num: 200,
is_delete: false,
}
}
}).mount("#app");

// 保存mount方法的直接结果就是一个vue的实例对象，里面可以直接发访问data选项里面的返回数据
console.log(vm);
console.log(vm.is_delete); // 相当于获取vm对象的data选项里面的is_delete
console.log(vm.message);
</script>
</body>
</html>

总结：

//1. vue的使用要从创建Vue实例对象开始
var vm = Vue.createApp({});

//2. 创建vue对象的时候，需要传递选项参数，选项参数就是json对象，json对象必须有data成员
var vm = Vue.createApp({
data(){
return {}
},
}).mount("#app");

//mount:设置vue可以操作的html内容范围，值一般就是css的id选择器。
//data: 保存vue.js中要显示到html页面的数据。

//3. vue.js要控制的内容范围，必须先通过id来设置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>

1.2.1 调试工具Vue Devtools的安装

官网地址：https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E
下载回来的压缩包，复制到ubuntu或者开发的系统下用户家目录下进行解压，然后打开谷歌浏览器，在地址栏上输入chrome://extensions/，勾选开发者模式。

选择左边的加载已解压的扩展程序，就是刚才复制到ubuntu下的扩展目录，接着点击当前目录右上角的打开。

完成了步骤以后，就可以看到谷歌浏览器已经成功安装了。效果如下：

在使用vue的页面时，vue图标效果如下：

最后！！！注意！当前vue插件的目录绝对不能删除！！删了这个目录，则插件也没有了。所以自己找一个保存文件的目录把插件放进去再安装到谷歌浏览器中。

1.3 vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种代码分工思想来的。

Model 指代的就是vue对象的data选项里面的数据。这里的数据要显示到HTML页面中。

View 指代的就是vue中数据要显示的HTML页面，也称之为“视图模板” 。

ViewModel 指代的是vue.js中我们编写代码时的创建vue实例对象vm了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data选项里面的数据被显示中p标签中就是vm对象自动完成的。vm对象会时刻的监控View和Model的变化，并保持双方数据的一致性！！！有时候，这个特性也叫双向数据绑定

编写代码，让我们更加清晰的了解MVVM：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">
<p>{{num}}</p>
<input type="number" v-model="num">
</div>
<script>
// 创建vue实例对象
const vm = Vue.createApp({
// data选项中声明的所有数据将来都会被vm对象进行"遍历循环"，赋值给vm对象作为属性的。我们要访问或操作data里面的数据直接通过this来访问。
data(){ // 保存数据，这些数据将来都是用于输出到HTML页面的
return {
num: 100,
}
},
mounted(){ // 会在vue加载html完成以后，自动执行mounted这里的代码
setInterval(()=>{ // setInterval 原生js提供的多次定时器函数，参数1：是一个匿名函数，参数2：定时时间(毫秒)，表示间隔多久执行一次参数1对应的匿名函数
this.num += 1; // this.num = this.num+1; // this相当于python里面的self，代表当前vm对象，this.num就是data选项中的num
console.log(this.num);
},1000);
},
}).mount("#app")
</script>
</body>
</html>

VM常用属性操作

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">
<p>{{num}}</p>
<p>{{num}}</p>
<p ref="p3">{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
<p>{{num}}</p>
</div>
<script>
// 创建vue实例对象
const vm = Vue.createApp({
data(){
return {
num: 100,
}
},
}).mount("#app")

console.log(vm);
console.log(vm.num);
console.log(vm.$data.num);
console.log(vm.$el); // vm对象控制的内容范围
console.log(vm.$el.parentElement); // vm对象本身绑定的标签元素
console.log(vm.$refs);
console.log(vm.$refs.p3);
vm.$refs.p3.style["background-color"]="red";
// vm.$refs.p3.style.backgroundColor="yellow";
</script>
</body>
</html>

总结：

如果要输出data里面的数据作为普通双标签的内容，需要使用{{ }}
用法：
vue对象的data属性：
data(){
return {
name:"小明",
}
}
标签元素：
<h1>{{ name }}</h1>
2. 如果要输出data里面的数据作为表单元素的值，需要使用vuejs提供的元素属性v-model
用法：
vue对象的data属性：
data(){
return {
name:"小明",
}
}
表单元素：
<input v-model="name">

使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至页面中凡是使用了这个数据都会发生变化。

1.4 显示数据

在双标签中显示纯文本数据一般通过{{ }}来完成数据显示，双括号中还可以支持js表达式和符合js语法的代码，例如函数调用.
在表单输入框中显示数据要使用v-model来完成数据显示
如果双标签的内容要显示的数据包含html代码，则使用v-html来完成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue-3.1.2.js"></script>
</head>
<body>
<div id="app">
<p v-html="message"></p>





<p>{{message.toUpperCase().split("").reverse().join("")}}</p>
<p><img src="pic.png"></p>
<input type="text" v-model="message">
<p>{{num}}</p>
<p>{{num+1}}</p>
<p>{{num>100?'大于100':'小鱼或等于100'}}</p>
<p>{{(num+0.8).toFixed(2)}}</p>
<p>{{(num+10000.8).toLocaleString()}}</p>
</div>
<script>
var vm = Vue.createApp({
data(){
return {
num: 100,
message:`<img src="pic.png">`,
}
}
}).mount("#app");
</script>
</body>
</html>

双花括号仅用输出纯文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.

v-html必须在html标签里面作为属性写出来，而且只能写在普通双标签中，单标签元素或者表单元素都不能使用v-html。

总结：

可以在普通双标签中使用{{ }} 或者 v-html 来输出data里面的数据
<h1>{{message}}</h1>
<h1 v-html="message"></h1>
2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据
<input type="text" v-model="username">
常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性，由vue提供的。每一个指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

指令会在vm对象的data选项数据发生变化时，会同时改变元素中的其控制的内容或属性。

因为vue的历史版本原因，所以有一部分指令都有两种写法：

vue1.x写法 vue2.x/vue3.x的写法
v-html ----> v-html
{{ 普通文本 }} {{普通文本}} v-text="普通文本"
v-bind:属性名 ----> :属性
v-on:事件名 ----> @事件名

2.1 属性操作

格式：

<标签名 :标签属性="data属性"></标签名>

<p :title="str1">{{ str1 }}</p> 
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> 

显示wifi密码效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">
<input :type="type" v-model="password"><button @click="change">{{text}}</button>
</div>

<script>
const vm = Vue.createApp({
data(){ // 数据选项
return {
type: "password",
password: "",
text: "显示密码",
}
},
methods:{ // 方法选项
change(){
if(this.type === "password"){
this.type = "text";
this.text = "隐藏密码";
}else{
this.type = "password";
this.text = "显示密码";
}
}
}
}).mount("#app");
</script>
</body>
</html>

2.2 事件绑定

有两种事件操作的写法，@事件名和 v-on:事件名

<button v-on:click="num+=5">按钮</button>
<button @click="num+=5">按钮</button>

使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
@blur ---> onblur
@click ---> onclick
....

例如:完成商城购物车中的商品增加减少数量

步骤：

给vue对象添加操作数据的方法
在标签中使用指令调用操作数据的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">
<button @click="sub">-</button>
<input type="text" v-model="num" size="2">
<button @click="add">+</button>
</div>

<script>
const vm = Vue.createApp({
data(){
return {
num: 1, // 当前用户选择的商品数量
max: 10, // 商品库存
}
},
methods:{
sub(){
// 减少数量
if(this.num<=1) return ; // 阻止代码继续往下执行,return 表示函数结束了。
this.num-=1;
},
add(){
// 增加数量
if(this.num>=this.max) return ;
this.num+=1;
}
}

}).mount("#app")
</script>
</body>
</html>

2.3 操作样式

操作样式，本质就是属性操作，使用冒号：

2.3.1 控制标签class类名

格式：
<h1 :class="值">元素</h1> # 值可以是变量名、对象、对象的变量名、数组、数组变量名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
<style>
.p1{
background: maroon;
color: aqua;
}
.p2{
background: yellow;
color: blue;
}
.p3{
border: 3px solid red;
}
</style>
</head>
<body>

<div id="app">
<p :class="p1_cls" @click="p1_cls='p2'">p1</p>
<p :class="{p1: use_p1, p2: user_p2}" @click="user_p2=!user_p2">p2</p>
<p :class="cls" @click="cls.p2=!cls.p2">p3</p>
<p :class="[cls,cls1]">p4</p>
<p :class="condition?'p1':'p2'">p5</p>
<p class="p3" :class="condition?'p1':'p2'" @click="condition=!condition">p6</p> 
</div>

<script>
const vm = Vue.createApp({
data(){
return {
p1_cls: "p1",
use_p1: true,
user_p2: false,
cls: {
p1: true,
p2: false
},
cls1:{
p3: true,
},
condition: true,
}
}
}).mount("#app")
</script>
</body>
</html>

代码执行效果：

总结：

给元素绑定class类名，最常用的就是第2,3种以及最后一种。
vue对象的data数据：
data:{
myObj:{
complete:true,
uncomplete:false,
}
}

html元素：
<div class="box" :class="myObj">2222</div>
最终浏览器效果：
<div class="box complete">2222</div>

2.3.2 控制标签style样式

工作中基本很少出现style控制样式，一个规范不允许，另一个就是代码不好维护。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">
<div :style="{color: activeColor, fontSize: fontSize + 'px' }" @click="fontSize+=1">div1</div>
<div :style="styleObject">div2</div>
<div :style="[style1,style2]">div3</div>
</div>

<script>
const vm = Vue.createApp({
data(){
return {
activeColor: "red",
fontSize: 30,
styleObject:{
fontSize: "30px",
backgroundColor: 'yellow'
},
style1:{
color:"red"
},
style2:{
background:"orange",
fontSize: "21px"
}
}
}
}).mount("#app")
</script>
</body>
</html>

2.3.2 实例-vue版本选项卡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
<style>
p{
padding: 0;
margin: 0;
}
.title-list span{
display: inline-block; /* 设置元素的显示模式：行级块状元素 */
height: 60px;
line-height: 60px;
width: 120px;
background-color: #bbb;
text-align: center;
cursor: pointer;
}
.title-list .activate{
background-color: yellow;
}
.content-list .content{
background-color: yellow;
display: none;
width: 370px;
height: 280px;
}
.content-list .current{
display: block;
}
</style>
</head>
<body>

<div id="optioncart">
<div class="title-list">
<span :class="{activate: key === 0}" @click="key=0">国内新闻</span>
<span :class="{activate: key === 1}" @click="key=1">国际新闻</span>
<span :class="{activate: key === 2}" @click="key=2">银河新闻</span>
</div>
<div class="content-list">
<div class="content" :class="{current: key ===0}">
<p>国内新闻列表</p>
<p>国内新闻列表</p>
<p>国内新闻列表</p>
<p>国内新闻列表</p>
<p>国内新闻列表</p>
</div>
<div class="content" :class="{current: key ===1}">
<p>国际新闻列表</p>
<p>国际新闻列表</p>
<p>国际新闻列表</p>
<p>国际新闻列表</p>
<p>国际新闻列表</p>
</div>
<div class="content" :class="{current: key ===2}">
<p>银河新闻列表</p>
<p>银河新闻列表</p>
<p>银河新闻列表</p>
<p>银河新闻列表</p>
<p>银河新闻列表</p>
</div>
</div>
</div>

<script>
const vm = Vue.createApp({
data(){
return {
key: 0,
}
}
}).mount("#optioncart")
</script>
</body>
</html>

代码运行效果：

2.4 条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

2.4.1 v-if

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>
<div id="app">

<p v-if="username">欢迎回到xx网站，{{username}}</p>
</div>
<script>
const vm =Vue.createApp({
data(){
return {
username: "",
}
},
}).mount("#app")

</script>
</body>
</html>

2.4.2 v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>
<div id="app">

<p v-if="username">欢迎回到xx网站，尊敬的{{username}}！</p>
<p v-else>欢迎访问xx网站，尊敬的游客！</p>
<p v-else>欢迎访问xx网站，尊敬的游客！2</p>
</div>
<script>
const vm =Vue.createApp({
data(){
return {
username: "",
}
},
}).mount("#app")

</script>
</body>
</html>

2.4.3 v-else-if

可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
<style>
.l0{
color: #000;
}
.l1{
color: #ffff99;
background: black;
}
.l2{
color: #ffff33;
background: black;
}
.l3{
color: #aaaa00;
background: black;
}
</style>
</head>
<body>
<div id="app">
<p v-if="username">欢迎回到xx网站，尊敬的{{username}}！</p>
<p v-else>欢迎访问xx网站，尊敬的游客！</p>
<p v-if="level === 0" class="l0">您是vip会员！</p>
<p v-else-if="level === 1" class="l1">您是svip会员！</p>
<p v-else-if="level === 2" class="l2">您是mvip会员！</p>
<p v-else-if="level === 3" class="l3">您是msvip会员！</p>
<p v-else>您是签到会员！</p>
</div>
<script>
const vm =Vue.createApp({
data(){
return {
username: "", // 会员账户名
level: 0, // 会员登录
}
},
}).mount("#app")

</script>
</body>
</html>

2.4.4 v-show

用法和v-if大致一样，区别在于2点：

v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是csss样式的display:none来隐藏的，

而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>
<div id="app">
<p v-show="username">欢迎回到xx网站，尊敬的{{username}}！</p>
<p v-show="!username">欢迎访问xx网站，尊敬的游客！</p>
</div>
<script>
const vm =Vue.createApp({
data(){
return {
username: "", // 会员账户名
}
},
}).mount("#app")

</script>
</body>
</html>

当页面中有使用了其他的前端插件，这些插件也操作了和vue控制的内容范围重叠，则需要使用v-show。

2.5 列表渲染指令

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

数据是数组：
<ul>

<li v-for="book in book_list">{{book.title}}</li>
</ul>

<ul>

<li v-for="(book, index) in book_list">第{{ index+1}}本图书：{{book.title}}</li>
</ul>

<script>
var vm1 = new Vue({
el:"#app",
data:{
book_list:[
{"id":1,"title":"图书名称1","price":200},
{"id":2,"title":"图书名称2","price":200},
{"id":3,"title":"图书名称3","price":200},
{"id":4,"title":"图书名称4","price":200},
]
}
})
</script>

数据是对象：
<ul>

<li v-for="value in book">{{value}}</li>
</ul>
<ul>

<li v-for="attr, value in book">{{attr}}:{{value}}</li>
</ul>
<script>
var vm1 = new Vue({
el:"#app",
data(){
return {
book: {
// "attr":"value"
"id":11,
"title":"图书名称1",
"price":200
},
}
}
})
</script>

课堂代码；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-3.1.5.js"></script>
<style>
.table{
border-collapse: collapse;
width: 800px;
}
.table th,
.table td{
height: 42px;
border: 1px red solid;
}
.bg{
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<table class="table">
<tr>
<th>编号</th>
<th>标题</th>
<th>价格</th>
<th>属性</th>
</tr>

<tr v-for="item,key in book_list">
<th>{{item.id}}{{key}}</th>
<th>{{item.title}}</th>
<th v-if="item.price<2000">{{item.price}}</th>
<th v-else class="bg">{{item.price}}</th>
<th>

<div v-for="attr,key in item.attrs">
{{key}}: {{attr}}
</div>
</th>
</tr>
</table>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
book_list:[
{"id":1,"title":"华为手机 Meta 4","price":4000,'attrs':{"网络":"5G", "颜色":"海蓝色", "分辨率":"5000万", "机身内存":"128G", "运行内存":"8G",}},
{"id":2,"title":"华为手机 Meta 3","price":2200,'attrs':{"网络":"4G", "颜色":"海蓝色", "分辨率":"3200万", "机身内存":"64G", "运行内存":"4G",}},
{"id":3,"title":"小米 Note 7","price":3200,'attrs':{"网络":"5G", "颜色":"粉红色", "分辨率":"5200万", "机身内存":"128G", "运行内存":"4G",}},
{"id":4,"title":"雕牌洗衣粉","price":18,'attrs':{"产地":"北京", "成分":"化学成分", "重量":"1kg", "香味":"柠檬味", "包装":"袋装",}},
]
}
},
}).mount("#app")
</script>
</body>
</html>

练习：

goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]

# 把上面的数据采用table表格输出到页面，价格大于60的数据需要添加背景色橙色[orange]

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue-3.1.5.js"></script>
<style>
.bg{
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<table border="1" width="600">
<tr>
<th>name</th>
<th>price</th>
<th>number</th>
<th>doing</th>
</tr>
<tr v-for="item,key in goods" :class="{bg:item.price>60}">
<th>{{item.name}}</th>
<th>{{item.price}}</th>
<th>
<button @click="sub(item)">-</button>
<input type="text" size="1" v-model="item.num">
<button @click="add(item)">+</button>
</th>
<th><span @click="del(key)">删除</span></th>
</tr>
</table>
</div>
<script>
/**
* goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]

把上面的数据采用table表格输出到页面，价格大于60的数据需要添加背景色橙色[orange]
*/
Vue.createApp({
data(){
return {
goods:[
{"name":"python入门","price":150, num: 100,},
{"name":"python进阶","price":100, num: 100,},
{"name":"python高级","price":75, num: 100,},
{"name":"python研究","price":60, num: 100,},
{"name":"python放弃","price":110, num: 100,},
]
}
},
methods:{
sub(item){
// 商品数量减少
item.num--
},
add(item){
// 商品数量增加
item.num++
},
del(key){
this.goods.splice(key,1)
}
}
}).mount("#app")
</script>
</body>
</html>

3. Vue对象提供的其他的选项API

3.1 过滤器

Vue3.0已经被淘汰了过滤器这个选项，所以我们这里使用2.6.11版本来完成代码的编写。

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种：全局过滤器和局部过滤器。

3.1.1 使用Vue.filter()进行全局定义

js/filters.js，代码：

// 全局范围定义的过滤器
Vue.filter("money1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v.toFixed(2)+"元"
})

3.1.2 在vue对象中通过filters选项来局部定义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.2.6.11.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
<p @click="add">{{num | money1}}</p>
<p @click="add">{{num | money}}</p>
</div>
<script>
const vm =new Vue({ // 在vue3.0以后，替换成了Vue.createApp()
el: "#app", // 在vue3.0以后，没有el选项了，换成了mount()
data(){
return {
num: 100.453
}
},
methods:{
add(){
this.num+=1;
}
},
// 在vm对象内部通过filters选项来自定义过滤器
filters:{
money(data){
return data.toFixed(2)+"元"
}
}
})

</script>
</body>
</html>

3.2 计算属性和侦听属性

3.2.1 计算属性

所谓的计算属性，是vue提供给我们开发者用于编写代码时计算出新的数据保存的变量来的。主要通过computed进行声明的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
<style>
table{
border-collapse: collapse;
border: 1px solid red;
}
td, th{
border: 1px solid red;
padding: 10px 18px;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>ID</th>
<th>title</th>
<th>price</th>
<th>number</th>
<th>total</th>
</tr>
<tr v-for="goods in goods_list">
<td>{{goods.id}}</td>
<td>{{goods.title}}</td>
<td>{{goods.price}}</td>
<td>
<button @click="sub(goods)">-</button>
<input type="text" size="1" v-model="goods.num">
<button @click="add(goods)">+</button>
</td>
<td>{{(goods.num * goods.price).toFixed(2)}}</td>
</tr>
<tr>
<td colspan="3"></td>
<td>总计：</td>
<td>{{total_price}}</td>
</tr>
<tr>
<td colspan="3"></td>
<td>实付价格：</td>
<td>{{discount_price}}</td>
</tr>
</table>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
goods_list:[
{"id":10,"title":"商品1","price":688.50, "num": 0,},
{"id":21,"title":"商品2","price":30.80, "num": 0,},
{"id":35,"title":"商品3","price":150.00, "num": 0,},
{"id":50,"title":"商品4","price":100.30, "num": 0,},
]
}
},
computed:{
// 计算属性，相当于在data选项中声明了一个变量，
// computed的成员都是函数来的，使用的时候相当于data选项里面的变量，但是computed中的变量，可以随着其他的变化而变化
total_price(){
let total = 0;
for(let goods of this.goods_list){
total += goods.price * goods.num;
}
return total.toFixed(2)
},
discount_price(){
// 超过2000，优惠500
let total = this.total_price;
if(this.total_price>2000){
total = this.total_price - 500;
}
return parseFloat(total).toFixed(2);
}
},
methods:{
add(goods){
goods.num+=1;
},
sub(goods){
if(goods.num<=0) return;
goods.num-=1;
},
}
}).mount("#app")
</script>
</body>
</html>

3.2.2 侦听属性

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
<style>
input{
outline: none;
border: 1px solid #333;
}
</style>
</head>
<body>
<div id="app">
账户：<input ref="username" type="text" v-model="username"><br><br>
口令：<input ref="password" type="text" v-model="password"><br><br>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
username: "",
password: "",
}
},
watch:{
// 侦听属性，也叫监听属性，主要用于监听data或者computed中的变量如果发生值的改动，则自动执行watch中的同名成员方法
username(){
console.log(`username=${this.username}`)
let length = this.username.length;
if(length>=6 && length<=16){
this.$refs.username.style.border="1px solid blue";
}else{
this.$refs.username.style.border="1px solid #333";
}
},
password(new_value, old_value){ // 参数为：修改前的变量值以及修改后的变量值
if(/^\d+$/.test(this.password)){
this.$refs.password.style.border="1px solid red";
}else{
this.$refs.password.style.border="1px solid #333";
}
}
}
}).mount("#app")
</script>
</body>
</html>

3.3 vue对象的生命周期

每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同时间阶段加上我们需要的自动执行代码，就实现特定的功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-3.1.5.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><p>{{num}}</p>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
num: 10,
}
},
beforeCreate(){
// 初始化选项api之前
console.log(">>>>>>>>>> beforeCreate执行了。")
console.log(this.$data)
console.log(this.num)
},
created(){
// 初始化选项api之后
console.log(">>>>>>>>>> created执行了。开发中一般在这里进行数据的初始化，编写ajax或其他的网络请求。")
console.log(this.$data)
console.log(this.num)
console.log(this.$el) // 此时无法操作HTML模板的。还没有加载到vm对象中。
},
beforeMount(){
// 读取视图模板，进行数据替换之前
console.log(">>>>>>>>>> beforeMount执行了。")
},
mounted(){
console.log(">>>>>>>>>> mounted执行了。开发中一般在这里进行页面的初始化，编写HTML页面/样式/其他的第三方插件的代码等等")
// 把data中的变量替换到视图模板中了
console.log(this.$el.parentElement.innerHTML)
},
beforeUpdate(){
// data数据被改动以后，同步到HTML视图模板之前
console.log(">>>>>>>>>> beforeUpdate执行了。")
console.log(this.num, this.$el.parentElement.innerHTML)
},
updated(){
// data数据被改动，并同步到HTML视图模板之后
console.log(">>>>>>>>>> updated执行了。")
console.log(this.num, this.$el.parentElement.innerHTML)
}
}).mount("#app")
</script>
</body>
</html>

总结：

在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。

另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

3.4 指令修饰符

v-model的指令修饰符。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
</head>
<body>
<div id="app">

<input type="password" v-model.trim="password"><br>

<input type="text" v-model.lazy="mobile"><br>

<input type="text" size="1" v-model.number="num"> + 500 = <span>{{num+500}}</span>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
password: "",
mobile: "",
num: 0,
}
},
watch:{
password(){
console.log(this.password);
},
mobile(){
console.log("发送http请求验证手机号是否在服务端注册了");
console.log(this.mobile);
}
}
}).mount("#app");
</script>
</body>
</html>

事件指令的修饰符使用.stop和.prevent

.prevent 用于阻止页面跳转，用于a标签和form标签下的button

.stop 用于阻止事件继续冒泡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 200px;
height: 200px;
background: #ccc;
}
.box2{
width: 100px;
height: 100px;
background: pink;
}
</style>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data(){
return {

}
}
})
}
</script>
</head>
<body>
<div id="app">
<div class="box1" @click="alert('box1')">
<div class="box2" @click.stop.prevent="alert('box2')"></div> 
</div>

<form action="#">
<input type="text">
<input type="submit">
<input type="submit" value="提交02" @click.prevent=""> 
</form>
</div>

</body>
</html>

课堂代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.3.2.20.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
#app2{
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
color: #fff;
width: 68vw;
padding-top: 30vh;
padding-bottom: 30vh;
padding-left: 32vw;
}
a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<button @click="show_login_box=!show_login_box">登录</button>
<div id="app2" v-if="show_login_box" @click="show_login_box=false">
<div @click.stop="">
账户：<input ref="username" type="text" v-model="username"><br><br>
口令：<input ref="password" type="text" v-model="password"><br><br>
</div>
<a href="http://www.baidu.com" @click.prevent.stop="check_params">登录</a>  
<a @click="show_login_box=false">取消</a>
</div>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
show_login_box: false,
password: "",
username: "",
}
},
methods:{
check_params(){
if(this.username != "xiaoming"){
console.log("验证数据失败！!");
return ; // 阻止代码继续往下执行
}

console.log("跳转页面的代码");
}
}
}).mount("#app");
</script>
</body>
</html>

3.5 综合案例-todolist

我的计划列表

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}

.list li span{
float:left;
}

.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">

<ul id="list" class="list">

<li>
<span>学习html</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
</li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>

特效实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="js/vue-3.1.5.js"></script>
<style>
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}

.list li span{
float:left;
}

.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<div class="list_con" id="app">
<h2>To do list</h2>
<input type="text" v-model="title" id="txt1" class="inputtxt">
<input type="button" @click="add_task" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">

<li v-for="item,key in todolist">
<span>{{item}}</span>
<a href="javascript:;" class="up" @click="up_task(key)"> ↑ </a>
<a href="javascript:;" class="down" @click="down_task(key)"> ↓ </a>
<a href="javascript:;" class="del" @click="del_task(key)">删除</a>
</li>
</ul>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
title: "",
todolist: [
"学习html",
"学习css",
"学习javascript",
]
}
},
created(){
this.read_data()
},
methods:{
add_task(){
// 添加计划任务
console.log(this.title)
if(this.title.length<1){
alert("计划任务不能为空！")
return;
}
// 把新增的计划追加yodolist计划列表中
this.todolist.unshift(this.title)
// this.todolist.push(this.title)
// 清空用户在输入框的信息
this.title = ""
// 调用保存数据的方法
this.save_data()
},
del_task(key){
// 从任务列表删除计划
this.todolist.splice(key,1)
// 调用保存数据的方法
this.save_data()
},
up_task(key){
// 向上移动任务
console.log(key)
if(key === 0){
return
}
let task = this.todolist.splice(key,1)[0]
console.log(task)
this.todolist.splice(key-1,0,task)
// 调用保存数据的方法
this.save_data()
},
down_task(key){
// 向下移动任务
let task = this.todolist.splice(key,1)[0]
this.todolist.splice(key+1,0,task)
// 调用保存数据的方法
this.save_data()
},
save_data(){
// 把任务列表保存到本地存储
localStorage.todolist = JSON.stringify(this.todolist)
},
read_data(){
// 从本地存储中读取任务列表
this.todolist = JSON.parse( localStorage.todolist )
}
}
}).mount("#app")
</script>
</body>
</html>

3.6 webStorage本地存储

是HTML5提供的用于在本地实现离线存储的一种技术方案。HTML5中提供了2个全局对象用于保存数据到本地浏览器或者移动端的webapp中，分别是：localStorage和sessionStorage。这2个对象，使用方式一致，区别仅仅是存储数据的有效期不同。

localStorage 永久存储，不主动删除，会一直保存在本地。

sessionStorage 会话存储，当浏览器重启以后，数据则会丢失。

这个对象保存数据时，都是域名进行区分保存的，不同的域名保存在本地存储的相互之间是互不干扰，互不影响的。

localStorage的用法：

// 保存一个数据
localStorage.setItem("变量名", "变量值");
// localStorage.变量名="变量值"

// 获取一个数据
localStorage.getItem("变量名"); // 返回值：变量值
// 变量值 = localStorage.变量名

// 删除一个数据
localStorage.removeItem("变量名");

// 清空当前域名下所有的数据
localStorage.clear();

sessionStorage 的用法：

// 保存一个数据
sessionStorage.setItem("变量名", "变量值");
// sessionStorage.变量名="变量值"

// 获取一个数据
sessionStorage.getItem("变量名"); // 返回值：变量值
// 变量值 = sessionStorage.变量名

// 删除一个数据
sessionStorage.removeItem("变量名");

// 清空当前域名下所有的数据
sessionStorage.clear();