Vue 程序初体验
下载并安装 vue.js
第一个 Vue 程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
//指定Vue实例的挂载位置
<div id="app"></div>
<script>
// 创建vue实例
//1.为什么要new Vue(),直接调用Vue（）函数不行吗 ？
//不行，因为直接调用Vue（）函数，不创建实例的话，会出现以下错误
//Vue is not a constructor and should be called with the `new` keyword
//2.关于Vue构造函数的参数 options?
//options翻译为多个选项，Vue框架要求这个options参数必须是个纯粹的js对象：{}
//在{ }对象可以编写大量的key：value对 ，一个key value对就是一个配置项
//主要是通过options这个参数来给Vue实例指定多个配置项
//3.关于Template配置项
//template翻译为模版
//template配置项用来指定什么？用来指定模版语句，模版语句是一个字符串形式的
//什么是模版语句？
//Vue框架自己制定了一些具有特殊含义的特殊符号
//我们写Vue模版语句的时候不能乱写，要遵守Vue框架的语法规则
//模版语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则，也可以是Html代码+Vue的特殊规则
//template后面的模版语句会被Vue框架的编译器进行编译，编译成浏览器能够识别的html代码
const myvue = new Vue({
template: '<h1> hello </h1>'
})
//将Vue实例挂载到id为app的元素的位置上
//Vue实例都有一个$mount()方法，这个方法的作用是什么？
//将Vue实例挂载到指定的位置上
//#app显眼是一个id选择器，这个语法借鉴了css
myvue.$mount('#app')
</script>
</body>
</html>模版语句的数据来源
Vue实例的数据来源对象详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div class="id">
</div>
<script>
let app = new Vue({
template: `<h1>{{name}},{{releaseTime}},{{1+1}},主角是{{lead.name}}
其他演员包括{{actor[0].name}},{{actor[0].age}},{{actor[1].name}}
</h1>`,
/*
模版语句的数据来源：data选项
1. data选项的类型是什么？ Object | function（对象或者是函数）
2. data配置项的专业叫法？ Vue实例的数据对象 （data实际上就是给整个Vue实例提供数据来源的）
3.data是对象的话，必须是纯粹的对象（含有零个或多个key:value对）
4.{{}}这是Vue框架自己搞的一套语法，别的框架看不懂，浏览器也是不能识别的
Vue框架自己是能够看懂的，被称为插值语法，有人也称为胡子语法
插值语法的小细节
{{}}，括号之间不能写其他字符包括空格
*/
data: {
name: 'kuangbiao',
releaseTime: '2020-01-01',
lead: {
name: "gaoqiqiang",
age: 40,
},
actor: [
{
name: 'anxin',
age: 30,
},
{
name: 'qilan',
age: 20,
},
{
name: 'zhaoyu',
age: 20,
},
{
name: 'zhaoyu',
age: 20,
},
{
name: 'zhaoyu',
age: 20,
},
]
}
}).$mount('.id')
</script>
</body>
</html>Template配置项详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div class="app">
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
</div>
<script>
/*
template配置项：
' '只能在一行中写
` `可以换行写
1.Template后面指定的是模版语句，但是模版语句中只能有一个根节点
2.只要data中的数据发生变化，模版语句就一定会重新编译（只要data变，Template就会重新渲染）
3.如果使用Template配置项的话，指定挂载位置的元素就会被替换
4.好消息：目前可以不使用template来编写模版语句，这些模版语句可以直接写到html标签中，vue框架能够找到并渲染
5.如果直接将模版语句编写到html标签中，指定的挂载位置就不会被替换了
关于$mount()方法挂载？
也可以不使用$moount('#app')的方式进行挂载了
在Vue中有一个配置项：el
el配置项和$mount('#app')的作用是一样的
el配置项的作用？
告诉Vue实例去接管哪个容器
*/
Vue.config.productionTip = false
new Vue({
el:'.app',
// template:"<h1>{{msg}}</h1> <h1>hahahah</h1>",
// template:`
// <div>
// <h1>{{msg}}</h1>
// <h1>{{name}}</h1>
// </div>
// `,
data:{
msg:"hello",
name:"world",
}
})
// .$mount('.app')
</script>
</body>
</html>解决控制台上的提示信息和错误信息
方法1：
方法2
方法3
装控制台所需的调试插件
Vue开发者工具初体验
Vue实例和容器
插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
</head>
<!--
主要研究 {{ }} 里面可以写什么
1.data里面声明的变量，函数等都可以
2.常量
3.只要是合法的js表达式都可以
4.模版表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math和Date等
-->
<body>
<div id="app">
{{msg}}
{{sayHello()}}
{{3.14}}
{{'AAAAAA'}}
{{i}}
{{1+1}}
{{'aaaa'+'vue'}}
{{gender?'男':'女'}}
{{msg.split('').reverse().join('')}}
{{Math.random()}}
</div>
</body>
<script>
var i=10
var app = new Vue({
el: '#app',
data: {
gender:false,
msg: 'Hello Vue!',
i:100,
sayHello(){
console.log("hello");
}
}
})
</script>
</html>指令语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<!--
指令语法：
1.什么是指令？有什么作用？
2.Vue框架的所有指令的名字都是以v-开头的
3.插值是写在标签体当中的，那么指令写在哪里？
Vue框架中所有指令都是以html标签的属性形式存在的
<span 指令></span>
虽然指令是写在标签的属性的位置上，但是这个指令浏览器是无法直接看懂的，
是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的
4.指令的完整的语法格式
<html标签 v-指令名称：参数="表达式"></html标签>
不是所有的指令都有参数和表达式，例如 v-once
-->
<body>
<div id="app">
<h1>{{mag}}</h1>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
mag:"hello world"
}
})
</script>
</html>v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<!--
v-bind这个指令可以让html标签的某个属性产生动态的效果
原则上v-bind指令后面的这个参数名可以随便写,但大部分情况下这个参数名还是需要写成html标签支持的属性名，这样才有意义
v-bind因为很常用，Vue提供了简写形式，
v-bind:title="msg"可以简写为：title="msg"
-->
<div class="app">
<span v-bind:xyz="msg"></span>
<!-- 这个表达式带有单引号，这个msg就不是变量了，是常量 -->
<span v-bind:title="'msg'"></span>
<!-- <img src="imgs/lyf.jpg" alt="" srcset=""> -->
<img v-bind:src="img">
<img :src="img1">
<input type="text" :value="hhh">
<!--不能采用以下写法
vue.js:5129 [Vue warn]: Error compiling template:
href="{{url}}": Interpolation inside attributes has been removed.
Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
请使用v-bind或冒号代替
<a href="{{url}}"></a>
-->
<!--
什么时候使用差值语法？什么时候使用指令语法？
凡是标签体当中的内容要想要动态，需要使用插值语法
只要向html标签的属性动态，需要使用指令语法
-->
</div>
</body>
<script>
new Vue({
el: ".app",
data: {
msg: "hello",
img: "imgs/lyf.jpg",
img1: "imgs/lyf.jpg",
hhh: "lisi",
url: "https://www.baidu.com"
}
})
</script>
</html>v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<!--
v-bind和v-model的区别和联系
1.v-bind和v-model这两个指令都可以完成数据的绑定
2.v-bind是单向数据绑定，data ====> 视图
v-model是双向数据绑定，视图 <====> data
4.v-bind可以使用在任何html标签当中，v-model只能用在表单元素当中，例如input、select、textarea等
为什么v-model的使用会有这样的限制？
因为v-model是专门为表单元素设计的，而表单元素的value属性是专门为表单元素设计的，所以v-model只能用在表单元素当中
v-model指令通常也是用在value属性上的
5.v-model和v-bind都有简写方式
v-model: <input type="text" v-model:value="msg1">
v-model: <input type="text" v-model="msg1">
-->
<div class="app">
v-bind: <input type="text" :value="msg">
<br>
v-model: <input type="text" v-model:value="msg1">
<br>
v-model: <input type="text" v-model="msg1">
</input>
</div>
</body>
<script>
new Vue({
el:".app",
data:{
msg:"hello",
msg1:"hello"
}
})
</script>
</html>初始MVVM分层思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<!--
MVVM是什么？
M: Model模型层
V: View视图层
VM: ViewModel层（视图模型），VM是MVVVM中的核心部分（它起到了一个核心的非常重要的作用）
MVVM是目前前端开发领域中非常流行的开发思想（一种架构模式）
目前前端的大部分主流框架都实现了这个MVVM思想，例如VUE ，React等
ViewModel层是Model和View的桥梁，
MVVM模型中倡导了Model和View分离
假如Model和view不分离，使用最原始的原生jS代码写项目
如果数据发生任意的改动，接下来我们需要编写大量的操作dom元素的js代码
将model和view分离之后，出现了一个VM核心，这个vm把所有的脏活累活全干了，
只需要在model层发生任何改动，vm层就会自动的更新view层，不需要我们操心任何事情
-->
<div class="app">
<input type="text" v-model:value="msg">
</div>
</body>
<script>
new Vue({
el:".app",
data:{
msg:"hello world",
}
})
</script>
</html>VScode快速生成代码片段
"Print Vue instance": {
"prefix": "vmobj",
"body": [
"const vm = new Vue({",
" el: '#app',",
" data : {",
" $1",
" }",
"})"
]
}
通过vm可以访问哪些属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<!--
通过Vue实例都可以访问哪些属性？（通过vm都可以vm.什么）
Vue实例中的属性很多，有的以$开头，有的以_开头，这些属性都是提供程序员使用的
所有以_开始的属性，可以看做是私有的属性，这些属性是Vue框架底层使用的，一般我们程序员很少使用
所有以$开头的属性，可以看做是Vue框架提供的一些公共属性，程序员可以直接使用这些属性
通过vm也可以访问Vue实例对象的的原型对象的属性，例如vm.$delete
-->
<body>
<div class="app">
<h1>{{msg}}</h1>
</div>
<script>
let dataobj={
msg:"helloooo"
}
const vm = new Vue({
el: '.app',
data:dataobj,
})
/*
按理说msg是dataobj对象的属性，为什么msg属性可以通过vm来访问？
这是因为Vue框架底层使用了数据代理机制
要想搞明白数据代理机制，必须有一个基础知识点：Object.defineProperty()
*/
</script>
</body>
</html>Object的defineProperty方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
Object.defineProperty()
1.这个方法是ES5新增的
2.这个方法的作用是用来：给对象新增属性，或者设置对象原有的属性
3.怎么用？
Object.defineProperty(obj,key,{value:value})
obj：要新增属性的对象
key：要新增的属性名
value：要新增的属性值
writable配置项：设置该属性的值是否可以被修改，true表示可以修改，false表示不可以修改
getter方法配置项：不需要我们手动调用，当读取属性值的时候，getter方法会被自动调用
getter方法的返回值非常重要，这个方法返回的值就代表这个属性的值，没有return值，那么这个属性的值就是undefined
setter方法配置项：不需要我们手动调用，当修改属性值的时候，setter方法会被自动调用
setter方法上是有一个参数的，这个参数可以接收传过来的值
注意：当配置项当中有getter和setter时，value和writable配置项都不能存在
-->
<body>
<script>
let phone={}
let temp
Object.defineProperty(phone,'brand',{
// value:'huawei',
// writable:true,
get:function(){
console.log('getter');
// return 'huawei'
return temp
},
set:function(val){
console.log('setter',val);
temp=val
}
})
</script>
</body>
</html>数据代理机制的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
什么是数据代理机制？
1.通过访问代理对象的属性来间接访问目标对象的属性
2.数据代理机制的实现就是靠Object.defineProperty()方法
ES6新特性
在对象中的函数/方法：functon是可以省略的
-->
<body>
<script>
/* 目标对象 */
let target={
name:"zhangsan",
}
/* 代理对象 */
let proxy={}
Object.defineProperty(proxy,'name',{
get(){
console.log("get name");
return target.name
},
set(newValue){
console.log("set name");
target.name=newValue
}
})
</script>
</body>
</html>Vue数据代理时对属性名的要求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<!--
Vue实例不会给以 _ 和 $ 开始的属性名做数据代理
为什么？
如果允许给_和$开头的属性名做数据代理的话，vm这个vue实例上可能会出现
_xxx或者$xxx这样的属性，而这个属性名可能会与vue框架自身的属性名冲突
所以，Vue框架不允许给_和$开头的属性名做数据代理
-->
<body>
<div id="app">
{{msg}}
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data : {
$msg:"hello world",
}
})
</script>
</html>data可以是一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<!--
data可以是一个函数，data函数应该返回一个对象
如果是函数，必须使用return语句返回{}对象
data可以是直接的对象，也可以是一个函数，什么时候使用直接的对象，什么时候使用函数？（学到组件就明白了）
-->
<body>
<div class="app">
<h1>{{msg}}</h1>
</div>
<script>
let phone={
name:"苹果x"
}
Object.defineProperties(phone,"color",{
value:"red",
enumerable:false,//表示该属性是可以遍历的，可枚举的，可迭代的
configurable:false,//表示该属性可以被删除
})
const vmm = new Vue({
el: '#app',
data : {
}
})
</script>
<script>
const vm = new Vue({
el: '.app',
data:function(){
return{
msg:'hello world'
}
}
})
</script>
</body>
</html>Vue的事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<!--
vue事件处理
v-on:事件名称="表达式"
表达式可以是一个常量，也可以是一个js表达式，Vue实例所管理的xxx
eg： v-on：click="aa"
在Vue当中，所有事件关联的回调函数，需要在Vue中的methods选项中定义
简写形式：
eg： v-on：click="aa" ====== @click="aa"
v-on：keydown="bb" ====== @keydown="bb"
绑定的回调函数,如果函数调用时不需要传递任何参数，小括号（ ）可以省略
Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是当前发生的事件对象
在绑定回调函数的时候，可以在回调函数的参数上使用 $event占位符，Vue框架看到这会自动将当前的事件以对象的形式传过去
-->
<body>
<div id="app">
<h1>{{msg}}</h1>
<button onclick="alert('hello')">hello</button>
<br>
<button v-on:click="aaa('jack',$event)">按钮0</button>
<button @click="aaa">按钮</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data : {
msg:"shijianbangding"
},
methods: {
aaa(e,event){
// alert("hello")
console.log(e,event);
},
bbb(e){
console.log(e);
alert("hello")
}
}
})
</script>
</body>
</html>
关于事件回调函数中的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<!--
-->
<div id="app">
<h1>{{count}}</h1>
<button @click="add()">按钮</button>
<button @click="add1()">按钮</button>
</div>
<body>
<script>
const vm = new Vue({
el: '#app',
data : {
count:0,
},
methods: {
add(){
console.log(this)
console.log(vm);
console.log(this==vm);
this.count++
// vm.count++
},
//箭头函数中没有this，箭头函数中的this是从父级作用域当中继承过来的
//对于当前的程序来说，父级作用域是全局作用域，也就是window
add1:()=>{
console.log(this);
}
},
})
</script>
</body>
</html>
methods的实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!--
methods对象当中的方法可以通过vm去访问吗？可以 vm.say()
methods对象中的方法有没有做动态代理？没有 （...）这样的是做了数据代理
-->
<body>
<div class="app">
</div>
</body>
<script>
const vm = new Vue({
el: '.app',
data : {
},
methods: {
say:function(){
console.log('hello')
}
},
})
</script>
</html>事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!--
事件修饰符
Vue当中提供的事件修饰符
.stop 停止事件冒泡 等同于 event。stopPropagation（）
.prevent 等同于 event.preventDefault（） 阻止事件的默认行为
.capture 事件的捕获阶段触发
添加事件监听器时使用事件捕获模式
添加事件监听器包括两种不同的方式
一种是从内往外添加 （属于事件冒泡模式）
一种是从外到内添加 （时间捕获模式）
没有添加则这个元素以及这个元素的子元素都会使用默认的冒泡模式 3 1 2
.once 事件只触发一次
.self 这个事件如果是我元素上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序
.passive 翻译为顺从、不抵抗 ，无需等待，直接继续（立即）执行事件的默认行为
.passive 和 .prevent 修饰符是对立的，不可以共存
.prevent:阻止事件的默认行为
.passive: 解除阻止
-->
</head>
<body>
<div id="app">
<a href="https://www.baidu.com" @click="dianji">baidu</a>
<br>
<!--
在Vue当中，事件修饰符是可以多个联合使用的
但是需要注意，修饰符的顺序是从左到右的
@click.self.stop 先执行stop，再执行self，最后执行click
@click.stop.self 先执行stop，再执行self，最后执行click
-->
<div @click.capture="san"> //3 1 2
<div @click.self="er"> //1 3 这个是1传递过来的，不是自身的事件
<button @click="yi">anniu</button>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data : {
},
methods: {
dianji(event){
alert("你点击了a标签")
event.preventDefault();
console.log(event)
},
yi(){
alert("1")
},
er(){
alert("2")
},
san(){
alert("3")
}
},
})
</script>
</html>
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="getinfo"><br>
<input type="text" @keyup.13="getinfo"><br>
delete:<input type="text" @keyup.delete="getinfo"><br>
esc:<input type="text" @keyup.esc="getinfo"><br>
space:<input type="text" @keyup.space="getinfo"><br>
tab:<input type="text" @keydown.tab="getinfo"><br>
</br>
pagedown:<input type="text" @keyup.page-down="getinfo"><br>
e:<input type="text" @keyup.e="getinfo"><br>
huiche:<input type="text" @keyup.huiche="getinfo"><br>
<!--
tab键无法触发keyup事件 ,只能用keydown事件
怎么获取某个键的按键修饰符
第一步：通过event.key获取这个键的真实名字、
第二步：将这个真实名字以key-case风格进行命名
PageDown是真实名字，经过命名之后：page-down
按键修饰符是可以自定义的：
通过Vue的全局配置对象config来进行按键修饰的自定义，语法规则：
Vue.config.keyCodes.按键修饰符的名字 = 键值
系统
-->
</div>
</body>
<script>
Vue.config.keyCodes.huiche = 13
var app = new Vue({
el: '#app',
data: {
},
methods: {
getinfo(event){
// console.log("hello")
// if(event.keyCode === 13){
// console.log(event.target.value);
// }
console.log(event.target.value);
}
},
})
</script>
</html>系统修饰键
计算属性（效率问题，会走缓存）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
输入的信息：<input type="text" v-model="info">
<br>
{{reverse}}
<!-- 反转的信息：{{reverseinfo()}}
<br>
{{hehe}}
{{hehe}}
{{hehe}}
{{hehe}}
{{hello()}}
{{hello()}}
{{hello()}}
{{hello()}}
{{hello()}} -->
<!--
在插值语法中可以直接调用方法，小括号不能省略，这个是需要Vue实例所管理的。
-->
<br>
<!-- 反转的信息：{{info.split("").reverse().join("")}}
反转的信息：{{info.split("").reverse().join("")}}
反转的信息：{{info.split("").reverse().join("")}}
反转的信息：{{info.split("").reverse().join("")}}
计算属性：
1.什么是计算属性
使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性
Vue的原有属性：data对象当中的属性可以叫做Vue的原有属性
全新的属性：表示生成了一个新的属性，和data的属性无关了，新的属性也有自己的属性名和属性值了
2.计算属性怎么用
需要一个新的配置项，computed
computed: {
//这是一个计算属性
计算属性1：{
//getter和setter方法
//当读取计算属性1的时候，getter方法会被自动调用
get(){
},
//当修改计算属性1的时候，setter方法会被自动调用
//val表示修改的值
set(val){
}
}，
//这是另外一个计算属性
计算属性2：{}，
...
}
3.计算属性的作用
代码得到了复用，更加便于维护，执行效率更高了
-->
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
info:"",
msg:"hahahah"
},
methods: {
reverseinfo(){
return this.info.split("").reverse().join("")
},
hello(){
console.log("hello");
return "hello"
}
},
computed: {
hehe:{
//不能使用箭头函数，使用箭头函数会导致this指向的是：window
// get方法的调用时机包括两个：
// 第一个时机：第一次访问这个属性时
// 第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，getter方法会被重新调用一次
get(){
console.log("get");
return "haha"
},
set(val){
console.log("set");
}
},
// reverse(){
// return this.info.split("").reverse().join("")
// },
reverse:{
get(){
return this.info.split("").reverse().join("")
},
set(val){
}
}
}
})
</script>
</html>
计算属性的简写形式
侦听属性的变化
深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="number"><br>
<input type="text" v-model="a.b"><br>
<input type="text" v-model="a.c">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
number: 0,
//a属性中保存的值是个对象的内存地址
a: {
b: 0,
c: 0,
}
},
computed: {
hehe() {
return 'hahha' + number
}
},
watch: {
//可以监视多个属性
//监视哪个属性，请吧这个属性的名字拿过来用即可
number: {
//初始化的时候触发一次handler方法
immediate: true,
//这里有一个固定写死的方法，方法名必须叫做：handler
//handler方法什么时候被调用呢？当被监视的属性发生变化的时候，handler就会被自动调用一次
//handler方法上有两个参数，第一个参数是newValue，第二个参数是oldValue
//newvalue是属性变化之后的新值
//oldValue是属性变化之前的旧值
handler(newValue, oldValue) {
console.log(newValue, oldValue);
//this是当前vue实例对象
//如果是箭头函数，this是window，不建议使用箭头函数
console.log("@");
}
},
'a': {
//启动深度监视，默认是不开启深度监视的
//什么时候开启深度监视？当你需要监视一个具有多层结构的属性，并且监视所有的属性，需要启用深度监视。
//注意：监视某个属性的时候也有简写方式，什么时候启用简写形式？
//当只有handler回调函数时，可以使用简写形式
//nuewber（new，old）{
//console.log("jaja");
//}
deep:true,
handler(newValue, oldValue) {
// console.log(newValue, oldValue);
console.log("@");
}
},
// 'a.b' : {
// handler(newValue, oldValue) {
// // console.log(newValue, oldValue);
// console.log("@");
// }
// },
// 'a.c' : {
// handler(newValue, oldValue) {
// // console.log(newValue, oldValue);
// console.log("@");
// }
// },
//也可以监视计算属性
hehe: {
}
//如何后期监视多个属性呢？
//语法：vm.$watch（'被监视的属性名'，{
// }）
}
})
</script>
</html>
class 与 style 绑定
class 绑定
绑定字符串
绑定数组
绑定对象
style 绑定
绑定对象
绑定数组
条件渲染
v-if
v-else-if、v-else
<template>与 v-if
v-show
v-if VS v-show
列表渲染
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
