一、前提
1、使用vue2.x版本
官方网址：https://cn.vuejs.org/v2/guide/
可以先讲官方的基础学习视频看一下：https://learning.dcloud.io/#/?vid=0
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UTHhpDhz-1625567473875)(image/01.png)]](https://img-blog.csdnimg.cn/20210706183134376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
2、开发工具VSCode
下载地址：https://code.visualstudio.com/
将vscode设置为中文：https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html
安装Live Server插件：https://blog.csdn.net/zhouwei_doris/article/details/80604604
live Server作用：修改代码保存后，可以在网页实时同步展示修改后的效果
常用快捷键：https://www.cnblogs.com/schut/p/10461840.html
二、VUE基础
A）快速起步
1、打开vscode
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
</div>
<script>
//开发模式下不使用devtools工具
//默认为true，前提是浏览器已经安装了vue的devtools调试工具
//Vue.config.devtools = false;
//开发阶段，取消生成提示信息
Vue.config.productionTip = false;
//创建vue对象
new Vue({
//el指定渲染的容器（表示网页元素是谁），这里表示对#app进行渲染
el : "#app",
//放所有数据
data() {
return {
users : [
{name :'wxb'},
{name : 'wt'}
]
}
},
})
</script>
</body>
</html>
2、运行liver server
右击，选择“open with Live Server”
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJ9QhFps-1625567473883)(image/02.png)]](https://img-blog.csdnimg.cn/20210706183151863.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
3、在chrome浏览器中安装vue插件
参考：https://blog.csdn.net/qsx741olm/article/details/101198698
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nw475etJ-1625567473883)(image/03.png)]](https://img-blog.csdnimg.cn/20210706183204973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
B）VUE指令
1、v-text
设置标签的文本值（textContent）
默认写法会替换全部内容，使用差值表达式{{ }}可以替换指定内容
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<h2 v-text="message">深圳</h2>
<h2 v-text="info">深圳</h2>
<h2>{{ message }}深圳</h2> <!-- 部分替换 -->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue2',
info :"王晓斌"
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXyUCZ48-1625567473884)(image/04.png)]](https://img-blog.csdnimg.cn/20210706183216972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
2、v-html
设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
content : "<a href='www.baidu.com'>王晓斌牛逼</a>"
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UyKYMIbo-1625567473885)(image/05.png)]](https://img-blog.csdnimg.cn/20210706183228854.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
3、v-on基础
为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="王晓斌牛逼不？" v-on:click="doIt">
<!-- 简写，可以用@代替v-on： -->
<input type="button" value="王晓斌牛逼不？" @click="doIt">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
methods: {
doIt:function(){
alert("牛逼！");
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKVlFnIf-1625567473885)(image/06.png)]](https://img-blog.csdnimg.cn/20210706183244212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
4、实践-计数器
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
num : 0
},
methods: {
sub:function(){
this.num--;
},
add:function(){
this.num++;
}
}
})
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L0EwVtn6-1625567473886)(image/07.png)]](https://img-blog.csdnimg.cn/20210706183254312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
5、v-show
根据表达值的真假，切换元素的显示和隐藏
原理是修改元素的display，实现显示隐藏
指令后面的内容最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" @click="changeIsShow" value="改变" />
<img src="image/01.jpg" v-show="true">
<img src="image/01.jpg" v-show="false">
<img src="image/01.jpg" v-show=isShow>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow : false
},
methods: {
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gM4hj4eg-1625567473886)(image/08.png)]](https://img-blog.csdnimg.cn/20210706183308704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
6、v-if
根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" @click="changeIsShow" value="改变" />
<img src="image/01.jpg" v-if=isShow>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow : false
},
methods: {
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BlMD404o-1625567473886)(image/09.png)]](https://img-blog.csdnimg.cn/20210706183321703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
7、v-bind
为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留:属性名
<!DOCTYPE html><html><head> <title>VUE基础</title></head><body> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app"> <input type="button" @click="changeIsShow" value="改变" /> <img v-bind:src="srcStr" v-if=isShow> <img :src="srcStr" v-if=isShow> </div> <script> var app = new Vue({ el: '#app', data: { isShow : false, srcStr : "image/01.jpg" }, methods: { changeIsShow:function(){ this.isShow = !this.isShow; } } }) </script></body></html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aOH03fJT-1625567473887)(image/10.png)]](https://img-blog.csdnimg.cn/2021070618333436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
8、实践-图片切换
图片使用数组保存，并用index进行切换
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<h2>图片切换</h2>
<img :src="imageArr[index]" />
<br>
<a href="javascript:void(0)" @click="prev">上一张</a>
<a href="javascript:void(0)" @click="next">下一张</a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
index : 0,
imageArr : [
"image/01.jpg",
"image/02.jpg",
"image/03.jpg"
]
},
methods: {
prev:function(){
this.index--;
console.log(this.index);
},
next:function(){
this.index++;
console.log(this.index);
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SqwF6sMm-1625567473887)(image/11.png)]](https://img-blog.csdnimg.cn/20210706183345279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
9、v-for
v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item,index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in arr">
{{ item }}
</li>
<li v-for="(item,index) in arr2">
{{ index }}、{{ item.name }}
</li>
</ul>
<input type="button" @click="add" value="添加"/>
<input type="button" @click="remove" value="删除"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr : [
"上海","西安","北京"
],
arr2 : [
{name : "wxb1"},
{name : "wxb2"},
{name : "wxb3"}
]
},
methods: {
add:function(){
this.arr2.push({name : "wxb4"});
},
remove:function(){
this.arr2.shift();
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00GVKpbv-1625567473887)(image/12.png)]](https://img-blog.csdnimg.cn/20210706183358302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
10、v-on补充
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车（更多的事件触发参考：https://cn.vuejs.org/v2/api/#v-on）
事件修饰符有多种
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" @click="doIt(666,'wxb')" value="点击"/>
<input @keyup.enter="sayHi" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
methods: {
doIt:function(p1,p2){
alert(p1+","+p2);
},
sayHi:function(){
alert("hi!!!");
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bVkK0fcL-1625567473888)(image/13.png)]](https://img-blog.csdnimg.cn/20210706183409146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
更多的事件参数：https://cn.vuejs.org/v2/api/#v-on
11、v-model
获取和设置表单元素的值（双向数据绑定）
绑定的数据会和表单元素值相关联
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getMessage" />
<h2>{{ message }}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message : "wxbnb"
},
methods: {
getMessage:function(){
alert(this.message)
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcuvQPCE-1625567473888)(image/14.png)]](https://img-blog.csdnimg.cn/20210706183418854.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
C）axios
1、get、post示例
官方文档：http://www.axios-js.com/zh-cn/docs/
<!-- axios cdn引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<button>get点击</button>
<button>post点击</button>
</div>
<script>
const btns = document.querySelectorAll("button");
btns[0].onclick = function(){
axios({
method:'get',
url:'http://localhost:8082/oa/user/getTest'
}).then(response => {
console.log(response);
},function(err){
console.log(err);
});
}
btns[1].onclick = function(){
axios.post(
//'https://autumnfish.cn/api/user/reg'
"http://localhost:8082/oa/user/postTest",
{name : "wxb",password : "123"}
).then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
}
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eVoXlXuZ-1625567473888)(image/15.png)]](https://img-blog.csdnimg.cn/20210706183430189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
2、注意
axios回调函数中的this已经改变。无法访问到data中的数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源
3、实践-天知道
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city（查询的城市名）
响应内容：天气信息
<!DOCTYPE html>
<html>
<head>
<title>VUE基础</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<input type="text" placeholder="请输入查询的城市"
@keyup.enter="searchWeather" v-model="city"
/>
<button @click="searchWeather">搜索</button>
<div>
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('西安')">西安</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
<ul>
<li v-for="item in weatherList">
<span>{{ item.date }}</span>
<b>{{ item.low }}</b>~<b>{{ item.high }}</b>
<span>{{ item.type }}</span>
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
city:'',
weatherList:[]
},
methods:{
searchWeather:function(){
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city
).then(function(response){
that.weatherList = response.data.data.forecast;
console.log(that.weatherList);
}).catch(function(err){
console.log(err)
})
},
changeCity:function(city){
this.city = city;
//methods中定义的方法内部，可以通过this关键字点出其他的方法
this.searchWeather();
}
}
})
</script>
</body>
</html>
展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UQOLihY4-1625567473888)(image/16.png)]](https://img-blog.csdnimg.cn/20210706183446499.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
D)、监听器（watch）
官方文档：https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8
该方法监听对应的数据是否发生变化，方法名必须跟数据名相同
该方法可以传两个参数，分别是：最新值和旧值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ message }}
<input v-model='message' />
</div>
<script>
new Vue({
el : "#app",
data : {
message : 0
},
watch : {
//该方法监听对应的数据是否发生变化，方法名必须跟数据名相同
//该方法可以传两个参数，分别是：最新值和旧值
message(newMessage,oldMessage) {
console.log('message变化', newMessage,oldMessage);
}
}
})
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EsSaIkFv-1625567473889)(image/57.png)]](https://img-blog.csdnimg.cn/20210706183508549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
E）计算属性（computed）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ message }}
<input v-model='message' />
{{ myname }}
</div>
<script>
new Vue({
el : "#app",
data : {
message : 0,
name : 'wxb',
bz : 'nb'
},
//计算属性
//在这里定义的每一个方法，在页面中都是当作一个属性来使用的
computed : {
myname(){
return this.name+' '+this.bz
}
},
//监听器
watch : {
//该方法监听对应的数据是否发生变化，方法名必须跟数据名相同
//该方法可以传两个参数，分别是：最新值和旧值
message(newMessage,oldMessage) {
console.log('message变化', newMessage,oldMessage);
}
}
})
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dhW5Z6YO-1625567473889)(image/58.png)]](https://img-blog.csdnimg.cn/20210706183519953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
F）过滤器（filters）
官方文档：https://cn.vuejs.org/v2/guide/filters.html#ad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ message }}
<input v-model='message' />
{{ myname | myFilters }}
</div>
<script>
new Vue({
el : "#app",
data : {
message : 0,
name : 'wxb',
bz : 'nb'
},
//局部过滤器
filters: {
myFilters(value){
return value.toUpperCase();
}
},
//计算属性
//在这里定义的每一个方法，在页面中都是当作一个属性来使用的
computed : {
myname(){
return this.name+' '+this.bz
}
},
//监听器
watch : {
//该方法监听对应的数据是否发生变化，方法名必须跟数据名相同
//该方法可以传两个参数，分别是：最新值和旧值
message(newMessage,oldMessage) {
console.log('message变化', newMessage,oldMessage);
}
}
})
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mbtYoiw-1625567473889)(image/59.png)]](https://img-blog.csdnimg.cn/20210706183532471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
全局过滤器：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jSGLe9Ds-1625567473889)(image/60.png)]](https://img-blog.csdnimg.cn/20210706183546638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2ODMyMw==,size_16,color_FFFFFF,t_70)
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
