Vue模板语法有两大类:
-
插值语法
- 功能:用于解析标签体内容
- 写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
-
指令语法
- 功能:用于解析标签(包括标签体内容、绑定事件…)。
-
v-bind:绑定指令
<a v-bind:href="school.url.toUpperCase()" x="hello"> 点我去{{school.name}}学习1 </a> //简写 <a :href="school.url" x="hello">点我去{{school.name}}学习2</a> new Vue({ el:'#root', data:{ name:'李四', } })-
层级指令
在同一层它无法识别相同的指令而在层级指令可以
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
-
Vue概念
vue.js是前端框架，用于构建用户界面的渐进式框架
基于MVVM架构的轻量级框架
实现数据的一个双向绑定
目的:
- 免除原生的JavaSrcipt的Dom操作，简化书写。
MVVM软件架构模式：
- 一种简化界面的事件驱动编写的，源自经典的MVC架构我，
- 传统的架构模式(model—viewmodel–view):
- MVC 业务模型，用户界面，控制器。
- MVC目的将M和V的实现代码进行分离，从而使一个程序可以有不同的表现形式。
- viewmodel对象作为模型和视图的桥梁。
标准语法:
<body>
<div id="app">
{{username}}
</div>
<script>
//一个容器只能用到一个Vue
let vm=new Vue({
el:"#app",//用过el来管理
data:{
username:"张三"
}
})
</script>
</body>
安装方式:
-
本地引入
- 下载vue的js文件到本地项目中，使用
Vue实例
var vm=new Vue({
//选项
})
el:DOM选项,提供一个已存在的DOM元素，作为Vue实例的挂载目标，当目标被实例挂载后才可以通过vue实例
data:数据选项，Vue实例的数据对象，主要用于存储对象的具体数据。
methods:数据选项，专门用来存放逻辑方法(函数)。
computed:数据选项，计算属性，通过方法的形式，保存变量计算后的属性值。
**template:**一个字符串模板作为vue实例的标记使用，模板会替换掉管理的容器。
<body>
<div id="app">
{{username}}
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
username:"张三"
},
template:"<p>模板替换</p>",
methods:{
add:function(){}
},
remove:function(){
}
})
</script>
</body>
<body>
<div id="app">
{{username}}{{age}}
</div>
<script>
var vm=new Vue({
el:"#app",
data() {
return {username:"大傻逼",age:18}
},
methods:{
append:function(){
//给原来的值进行了一个拼接赋值,改变了原来的值
//this表示当前实例对象
this.username+=",hello me"
}
}
})
//自定义的append方法
vm.append();
alert(vm.username);
</script>
</body>
是同vue实现响应改变:
<script>
var d={a:10}
var vm=new Vue({
data() {
return d
}
})
//当一个vue实例被创建的时候它将我们data对象中所有的property加入到vue的响应式系统中
//当这些property的值改变时，视图将会产生响应，匹配更新为新的值
vm.a=100;//修改a为100，a是vm的property
alert(vm.a==d.a)//true，vm绑定的数据直接指向原始数据d,是同一数据
alert(d.a);
/* 如果你在晚些时候需要用到一些property,在创建vue实例时，
先设定好，并赋初始值，这样在后期使用才能响应 */
var v=new Vue({
data() {
str:'',
count:0,
arr:[]
}
})
</script>
生命周期函数;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktbwHwBe-1658151394746)(C:\Users\邪主\AppData\Roaming\Typora\typora-user-images\image-20220426161027606.png)]
事件处理
事件修饰符
限制某个事件的操作，让事件以特殊形式执行
格式:@事件类型.修饰符
常用修饰符
-
事件捕获
capture：先捕获在执行冒泡
<body> <div id="app" @click.capture="showD"> div文本 <p @click="showp"> 段落文本 <a @click="showA">a标记</a> </p> </div> <script type="text/javascript"> let vm = new Vue({ el:"#app", methods:{ showA(){ console.log("a标签") },showp(){ console.log("p标签") },showD(){ console.log("div标签") } } }) </script> </body> -
self:修饰符
当某节点由事件触发
键盘事件
**注意:**只有当绑定事件的节点获取焦点时，触发的键盘事件才有效果
按键码
vue为常用按键设置按键别名，也称按键码
格式:@事件.按键码
获取键盘事件对应的按键名和按键编码
在键盘输入设备中，每个按键都有对应的按键名和按键编码。
我们可以通过事件绑定（event.key ）
- {{index+1}}. {{n}}:{{v}}
});
</script>
</body>
事件处理
事件监听
vue中,可以给DOM节点绑定事件监听
语法: v-on
语法糖: @
格式： v-on: 事件类型=“事件内容 /事件名”
事件绑定
(1) 行内式
<p @click="num++">
{{num}}
</p>
(2)函数名绑定
用于复杂逻辑操作,通过函数名,以及methods选项，可通过函数名进行绑定。methods选项,专门用于存储函数。
注意事项: 不要使用"箭头函数"对事件进行绑定
methods函数中的this一般指向Vue实例,箭头函数中this一般是指向window对象。
常用鼠标事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxiManXL-1658151394750)(C:\Users\86188\AppData\Roaming\Typora\typora-user-images\image-20220506095618106.png)]
常用的事件修饰符
限制某个事件的操作,让事件以特殊形式执行
格式: @
常用的修饰符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDsWT7dg-1658151394752)(C:\Users\86188\AppData\Roaming\Typora\typora-user-images\image-20220506095529268.png)]
(1) 事件捕获模式
让事件在捕获进行阶段,而不是冒泡阶段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app" @click.capture="showD">
div文本
<p @click="showP">
段落文本
<a @click="showA">a标记</a>
</p>
</div>
<script>
let vm = new Vue({
el:"#app",
methods:{
showA(){
console.log("a标签")
},showP(){
console.log("p标签")
},showD(){
console.log("div标签")
}
}
})
</script>
</body>
</html>
只有当p标签被点击(p标签是事件源)时,才会触发事件,才会有效
（2）self修饰符
当某节点由事件触发时，触发节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app" @click="showD">
div文本
<p @click.self="showP">
段落文本
<a @click="showA">a标记</a>
</p>
</div>
<script>
let vm = new Vue({
el:"#app",
methods:{
showA(){
console.log("a标签")
},showP(){
console.log("p标签")
},showD(){
console.log("div标签")
}
}
})
</script>
</body>
</html>
(3) passive修饰符
wheel事件,不加修饰符实际触发过程：
鼠标滑轮变化—》触发wheel绑定事件–》界面上的滑动快发生变化
加passive修饰符,触发过程:
滑轮变化的–》 触发wheel绑定事件,同时滑动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
<style>
.uList{
width: 200px;
height: 200px;
background-color: plum;
overflow: auto;
}
li{
height: 80px;
}
</style>
</head>
<body>
<div id="app">
<ul class="uList" @wheel="show">
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
methods:{
show(){
alert("鼠标滑动事件")
}
}
})
</script>
</body>
</html>
修饰符可以串联使用,使用时需要 注意修饰符的串联顺序
键盘事件
事件名 事件描述
keydown 按下任意按键
keypress 除 shift.Fn、CapsLock外的任意键被按住。(连续触发)
keyup 释放任意按键
注意: 只有当绑定事件的节点获取焦点时，触发的键盘事件才有效果。
按键码
vue为常用按键设置按键别名,也称按键码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" @keydown.enter="showk"/> 回车键-->
<input type="text" @keydown.space="showk"/>
</div>
<script>
let vm = new Vue({
el:"#app",
methods:{
showk(){
// console.log("按下键盘的回车键")
console.log("按下键盘的空格键")
}
}
})
</script>
</body>
</html>
获取键盘事件对应的按键名和按键编码
在键盘输入设备中,每个按键都有对应的按键名和按键编码。
我们可以通过键盘事件绑定(event.key、event.keyCode)这两个属性来获取按键名和按键编码
<body>
<div id="app">
<!-- <input type="text" @keydown.enter="showk"/> 回车键-->
<input type="text" @keydown="showk"/>
</div>
<script>
let vm = new Vue({
el:"#app",
methods:{
showk(e){
// console.log("按下键盘的回车键")
// console.log("按下键盘的空格键")
console.log("按下的按键名"+e.key)
console.log("按下的按键编码"+e.keyCode)
}
}
})
</script>
</body>
Vue.js.Ajax使用(axios)
Axios是一个基于promise的网络请求库 ,可以用于浏览器,在浏览器上使用XMLHttpRequest
Vue.js 2.0版本推荐使用axios来完成异步请求。
安装
介绍方式多种,以下介绍两种:
(1)CDN方式
1 <script
src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js">
</script>
或者
1 <script
src="https://unpkg.com/axios/dist/axios.min.js">
</script>
(2)本地下载引入方式
下载链接： https://cdn.staticfile.org/axios/0.10.0/axios.min.js
打开该链接就能直接看到该文件,点击右键另存为文件
异步请求实现
注意:
data: post请求参数,不能用于get方式提交
parames： 是url后附加参数的一种写法,post和get都可以使用
前提条件: 需要将vue.min.js和axios.min.js文件加入到项目中
(1) axios()实现
axios({
methods:" 请求方法类型",
url:"访问路径?参数名=参数值"，
params:{参数1;参数值1,参数2;参数值2,.....},
data:{post请求参数}
}).then{function(resp){
resp.data //data属性是响应回来的数据
}}.catch( // 请求失败处理
function(error){
console.log(error)
})
(2) axios.get()实现
axios.get("访问路径",{params:{参数1;参数值1,参数2;参数值2,.....
}}).then().catch()
then () 用于处理响应数据
catch()用于处理请求失败
(3) axios.post()实现
axios.post("访问路径",{post提交 数据}).then().catch()
then () 用于处理响应数据
catch()用于处理请求失败
axios
Axios是什么？. Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。. 说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。. 但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。. 也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。.
第一种axios使用响应数据
<script >
let vm=new Vue({
el:"#app",
data:{
str:"",//定义用于接收后端响应数据
user:{}//该对象用于接收后端响应的用户数据
},mounted(){
let _this=this;//定义一个_this变量指向vue实例对象本身
//axios异步请求
axios.get("user",{params:{name:"李白",id:900}})
.then(function (resp){
//data接收的json字符串会自动转为对象
_this.user=resp.data;//将响应数据给vue实例赋值
})
}
})
</script>
第二种axios
使用箭头函数完成数据的响应
<body>
<div id="vue">
<div>
{{info.name}}
</div>
<!-- <div>
{{info.address.city}}
</div> -->
</div>
<!-- 引入js文件,在线模式-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#vue',
//data:属性:vm
data(){
return{
//请求的返回参数合适，必须和json字符串一样
info:{
name:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
mounted() {//钩子函数链式编程 ES6新特性
axios.get('../data.json').then(response=>(this.info=response.data));
}
})
</script>
列表渲染之数组更新
在Vue中,沿用了一系列的数组更新操作:
(1) 变更方法(在元数组上进行变动)
push(): 在数组结尾处 添加一个新元素,返回新数组长度
pop(): 从数组 中 删除最后一个元素,返回被删除的元素
shift(): 删除首个 元素,返回被删除的元素,所有元素位移到更低的索引
unshift(): 在数组开头添加一个元素,返回数组长度。
splice(): 可用于向素组中添加新元素,或删除原有的元素。
splice(2,0,"www“,“kwjhch”): 第一个参数表示操作索引的位置,第二个参数表示删除元素的个数,从第三个参数开始,都是用于在指定索引处插入两个元素
sort(): 对数组元素进行排序
reverse() : 反转数组中元素 的顺序
<script>
var str=[3,1,"x","a","z"];
// 在str素组中 索引是1的位置删除该元素,再在此位置添加两个元素 "www" "zzz"
// str.splice(1,0,"zzz","www")
// 排序
// str.sort();
// 反转
str.reverse();
for(let i=0;i<str.length;i++ ){
console.log(str[i])
}
</script>
(2) 替换方法(返回一个新数组)
fifter(): 使用数组中通过测试的每个元素创建新数组
concat(): 通过合并现有数组创建一个新数组,可以使用任意数量的数组参数
sclice(): 用数组的某个片段切出新数组,它不会从与那数组中删除 任何元素,从开始参数选取元素,指导结束参数(吧不包含)为止。
注意: 上述三个方法是不会改变原数组,总是返回一个新数组。
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in showNewNum()">{{item}}</li>
</ul>
</div>
<script>
let v1=new Vue({
el:"#app",
data:{
numArr:[12,45,3,18,9]
},
methods:{
showNewNum (){
let newNum=[];
newNum=this.numArr.filter(function(item){
return item%2===0
});
return newNum;
}
}
})
</script>
计算属性(computed)
计算属性设计的初衷减轻模板上业务的 负担,当数据上出现复杂衍生数据时,我们更期望以一种更易维护的方式去使用。
计算属性依赖于响应式属性,所以当且仅当响应式属性变化时,计算属性才会被重新计算 ,而且得到的结果会被缓存,指导响应式属性再次被修改.
方法选项和计算属性选项的 区别：计算属性基于响应式依赖进行缓存,也就是说,它是基于 被依赖 值解析计算,缓存的。
简单的讲,计算属性的使用： 通过方法的形式定义,模板语法形式使用
一般来讲: 计算次数少且计算开销大的功能通过计算来设计使用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js">
</script>
</head>
<body>
<div id="app">
<h2>英语中的"互文"</h2>
<p>我们先着三局</p>
<p>{{message}}. 我看到的是车还是猫</p>
<p>{{noSpaceMsg}}</p>
<p>{{palindromeMsg}}</p>
<p>英语中也有互文的修辞手法，比如{{message}}</p>
<p>将居中的空格去掉可得{{palindromeMsg}}</p>
<p>可以看到,{{noSpaceMsg}}={{palindromeMsg}}</p>
<p>互文英文的示例</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
message:"WAS IT CAR OR CAT I SAW"
},
computed:{
noSpaceMsg(){
return this.message.repeat(/\s/g,'');
},
palindromeMsg(){
return this.message.replace(/\s/g,'').split('').reverse().join('');
}
}
})
</script>
</body>
</html>
计算属性会默认提供getter函数，用于在使用计算属性时给予值,在执行取值时或者依赖数据发生变化的时候被调用。
computed:{
// age:function(){
// return 17;
// }
// 还可以这样写
age:{
get: function(){
return 17;
}
}
}
计算属性看作是一个特殊的属性, 它有getter 和 setter方法
setter函数: 在计算属性中, getter是默认定义的,如果需要对数据进行操作,则需要手动定义set方法。set方法不是改变计算 属性,计算属性本身无 值 ，改变的是依赖值 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>请选择个人爱好</p>
<p><input type="checkbox" v-model="checkAll"/> 全选 checkAll {{checkAll}}</p>
<p><input type="checkbox" v-model="eat"/>吃饭 eat:{{eat}}</p>
<p><input type="checkbox" v-model="sleep"/>睡觉 sleep:{{sleep}}</p>
<p><input type="checkbox" v-model="play"/>打豆豆 play:{{play}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
eat:false,
sleep:false,
play:false
},
computed:{
checkAll:{
get(){
return this.eat&this.sleep&this.play
},
set(val){
this.eat=val;
this.sleep=val;
this.play=val;
}
}
}
})
</script>
</body>
</html>
侦听属性(watch)
Vue允许 开发者使用侦听属性(监听属性)为实例添加被观察对象,并在对象被修改时调用开发 者自定义的方法。对数据进行监听
当监听的数据发生变化时,执行一系列操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{stuName}}</p>
<button @click="changeName()">重命名按钮</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
stuName:"张三"
},
watch:{
stuName(){
console.log("学生姓名属性发生变化!")
}
},
methods:{
changeName(){
this.stuName="李四";
}
}
})
</script>
</body>
</html>
当需要 在数据发生变化时执行开销比较大的操作或者异步,使用监听属性时非常有用的。
异步: 为异步操作的数据绑定监听,当异步执行完毕时,通过监听属性实现回调效果。
深度监听
在Vue中,Vue实例可以监测到任意数据的改变，但是Vue提供的watch属性值能监测到data选项最外层数据,默认情况下,data选项数据的内部数据是不能监听到的。
我们可以通过字面量的写法来 监听对象的属性,但是当我们需要监听整个对象的属性改变时,我们需要使用 监听属性的原始写法以及配置深度监听deep属性。
以下案例中，deep为 true则表示开启深度监听,但凡监听的对象,某一属性发生变化,都会被监听到,并执行hander函数中的代码。
案例: 监听某对象的属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{student}}</p>
<button @click="changeStu()">重命名按钮</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
student:{
name:"廖廖",
sex:"女"
}
},
watch:{
// student(){
// console.log("对象发生变化!")
// }
student:{
deep:true,
handler(){
console.log("对象发生变化!")
}
}
},
methods:{
changeStu(){
this.student.name="李四";
}
}
})
</script>
</body>
</html>
注意: 计算属性和监听属性使用和功能类似: 都是由特殊数据的改变从而触发事件行为。 这也使得监听属性滥用!!!一般情况下,建议使用计算属性去进行依赖响应,在异步,大性能开销时才考虑使用侦听属性。
,Vue实例可以监测到任意数据的改变，但是Vue提供的watch属性值能监测到data选项最外层数据,默认情况下,data选项数据的内部数据是不能监听到的。
我们可以通过字面量的写法来 监听对象的属性,但是当我们需要监听整个对象的属性改变时,我们需要使用 监听属性的原始写法以及配置深度监听deep属性。
以下案例中，deep为 true则表示开启深度监听,但凡监听的对象,某一属性发生变化,都会被监听到,并执行hander函数中的代码。
案例: 监听某对象的属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{student}}</p>
<button @click="changeStu()">重命名按钮</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
student:{
name:"廖廖",
sex:"女"
}
},
watch:{
// student(){
// console.log("对象发生变化!")
// }
student:{
deep:true,
handler(){
console.log("对象发生变化!")
}
}
},
methods:{
changeStu(){
this.student.name="李四";
}
}
})
</script>
</body>
</html>
注意: 计算属性和监听属性使用和功能类似: 都是由特殊数据的改变从而触发事件行为。 这也使得监听属性滥用!!!一般情况下,建议使用计算属性去进行依赖响应,在异步,大性能开销时才考虑使用侦听属性。
切记： 不要滥用监听属性！！！
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
