Vue

(一)、利用Vscode开发Vue
- 1.在桌面创建文件夹code
- 2.使用Vscode进行打开这个文件夹
- 3.在Vscode的右键创建文件夹
- 4.右键创建.html文件
(二)、第一个Vue程序
- 1.下载并引入Vue.js
- 2.引入vue.js
- 3.创建视图层
- 4.创建Model层
- 5.获取Vue实列中的数据
- 6.效果展示
⭐为什么要使用new 关键字来创建?
- 1.进行测试
- 2.Vue源码
- 3.效果:
⭐一个Vue就为一个容器服务
- 1.问题描述
- 2.代码展示
- 3.代码效果
⭐{{}} 的详细讲解
- 1.思路设想:
- 2.获得一个类中的其他对象
- 3.效果展示
⭐()=>'数据' 箭头函数
- 1.基本演示
- 2.实战Vue利用箭头函数
(三)、关于表达式的说明
- 1.表达式 var c=a,b (不加小括号)
- 2.验证b被重新覆盖定义
- 3. 表达式 var c=(a,b) (加小括号)
- ⭐4.回归到Vue的表达式
- 5. 表达式 var x=a && b
- 6.源码解释官方md文件
- ⭐5.回归到Vue表达式
(四)、模板语法
- 1.认识标签体标签属性标签
- 2.插值语法(⭐标签体 {{}} )
- 3.指令语法（⭐标签 v-bind）
- 4.效果展示
(五)、Vue中的数据绑定
- 1.解决浏览器控制台的警告信息⭐
- 2.单向数据绑定(v-bind)
- 3.双向数据绑定(v-model)
(六)、MVVM模型
- 1.解释MVVM的信息
- 2.测试vm改变数据影响视图
- 3.el绑定视图的两种方法($mount())⭐
- 4.⭐JS方法的七种定义以及调用⭐
- 5.data的两种方法(对象和方法)⭐
(七)、Vue中的数据代理(_date)
- 1.数据代理模式基本介绍
- 2.查看数据核实信息
- 3.介绍属性追加的信息(object.definePropery)⭐
- 4.模拟数据代理的实列⭐
- 5.Vue为什么要使用数据代理
(八)、复习前七章的知识点
- 1.Vue渲染的声明过程⭐
- 2.模板语法 (单项数据绑定)
- 3.数据绑定 (双向数据绑定)
- 4.数据代理 (_data => vm)
- ⭐5.JS的按钮监听绑定事件 (Dom)⭐
(九)、事件处理(v-on)
- 1.⭐JS原生按钮事件的获取⭐
- 2.七大常用事件处理
(十)、姓名案列_分析_计算属性
- 1.插值语法进行实现
- 2.methods方法实现
- ⭐3.JS原生代码进行实现⭐
- 4.computed计算属性实现 (简写只读)
- 5.computed计算属性实现 (完整读写)
- ⭐6.插值语法里面的参数⭐
(十一)、data methods computed总结
- 1.基本简要
(十二)、数据监视_watch
- 1.数据监视总结
- 2.数据监视的第一种写法 (精简版)
- 3.数据监视的第二种写法 (完整版)
- 4.watch的第二种写法（$watch）
- 5.computed计算属性与watch监视区别
(十三)、绑定样式
- 1.原生状态绑定样式
- 2.class样式绑定 (字符串)
- 3.class样式绑定 (类绑定:不加引号)
- 4.class样式绑定 (类绑定:加引号)
- 5.class样式绑定 (三元表达式)
- 6.数组绑定样式
- 7.绑定style样式
- 8.全部样式信息
(十四)、Vue实现前端背景色的改变
- 1.如何让div充满整个屏幕?
- 2.如何实现对下拉框数据的监听?
- 3.背景色的改变
(十五)、条件渲染
- 1.配置methods手动改变天气
- 2.表达式直接取反改变天气
- 3.利用v-show做条件渲染
- 4.利用v-if/v-else做条件渲染

(一)、利用Vscode开发Vue

1.在桌面创建文件夹code

2.使用Vscode进行打开这个文件夹

3.在Vscode的右键创建文件夹

4.右键创建.html文件

(二)、第一个Vue程序

1.下载并引入Vue.js

vue.js下载链接

下载之后的效果

程序中引入vue,新建一个文件夹，文件夹的名字叫做 js,把下载的vue.js放入文件夹中。

2.引入vue.js

<script type="text/javascript" src="../js/vue.js"></script>

3.创建视图层

div 是一个容器,容器中写的是Vue模板代码，并不是html代码
所谓的模板代码类似于React中的jsx,是html+js的混合体。
{{xxxx}},xxxx会自动读取data中的xxxx属性。

<div id="root"><h1>{{message}}</h1>
</div>

4.创建Model层

el :通过id选择器进行绑定视图层。data 存数据的容器，为root容器提供数据，值是一个对象。

new Vue不是vue不能小写，小写会出错。
Vue里面的参数，我们传输的是对象。
el 只能绑定一个容器

    <script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的statemessage : '你好呀，吉士先生!'}});</script>

5.获取Vue实列中的数据

ResultFul风格

{{message}}

6.效果展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器，  --><div id="root"><h1>{{message}}</h1></div><script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的statemessage : '你好呀，吉士先生!'}});</script>
</body>
</html>

⭐为什么要使用new 关键字来创建?

1.进行测试

我们通过测试调用x的对象，发现了this再经过new之后，就会发生变化。目的是为了符合源码的需求。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">/*在这里我们进行创建一个demo方法，然后把x等于obj的属性a1.我们利用普通方法传递: demo(对象),这里的this是window2.new demo(),之后我们这里的this就变成 demo的实列了。*/function demo(obj){this.x=obj.a  //在这里调用对象 this 指window}demo({a:1}) // 传入一个对象console.log(this.x)  //这里我们需要使用window进行调用 xconst d=new demo({a:1})  //使用new调用demo时，demo中的this是demo的石烈对象console.log(this.x)</script>
</body>
</html>

2.Vue源码

  function Vue(options) {if (!(this instanceof Vue)) {warn$2('Vue is a constructor and should be called with the `new` keyword');}this._init(options);}

3.效果:

⭐一个Vue就为一个容器服务

1.问题描述

在这里我们对容器root进行Vue绑定服务，对于root2不进行Vue绑定服务。这里就会发现root会被Vue解析，root2不会进行Vue解析

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器，  --><div id="root"><h1>{{message}}</h1></div><div id="root2"><h1>{{message}}</h1></div><script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的statemessage : '你好呀，吉士先生!'}});</script>
</body>
</html>

3.代码效果

⭐{{}} 的详细讲解

1.思路设想:

{{xxxx}},xxxx会自动读取data里的xxxx属性。
在这里我们再data里面存储的数据，由原来的一个对象。变成一个类，里面包含很多对象。eg:name对象和address对象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器，  --><div id="root"><h1>名字:{{school.name}}</h1><h1>地址:{{school.address}}</h1></div><script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的stateschool:{name:'吉士先生',address:'河南省周口市'}}});</script>
</body>
</html>

2.获得一个类中的其他对象

    <div id="root"><h1>名字:{{school.name}}</h1><h1>地址:{{school.address}}</h1></div>

3.效果展示

⭐()=>‘数据’ 箭头函数

此种写法()=>({})等同于()=>{return {}},是ES6的新特性。

1.基本演示

// 箭头函数
let fun = (name) => {// 函数体
return `Hello ${name} !`;
};// 等同于
let fun = function (name) {// 函数体
return `Hello ${name} !`;
};

2.实战Vue利用箭头函数

在这里我们使用箭头函数 subject,那么我们的方法名就是subject

箭头函数没有自己的this

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器，  --><div id="root"><h1>名字:{{school.name}}</h1><h1>地址:{{school.address}}</h1><h1>学习的是:{{school.subject()}}</h1></div><script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的stateschool:{name:'吉士先生',address:'河南省周口市',subject: ()=>'Java_LCP'  //这里是一个方法}}});</script>
</body>
</html>

(三)、关于表达式的说明

1.表达式 var c=a,b (不加小括号)

不加小括号的版本，因为Js中var可以被覆盖，所以能够运行成功，察觉不到小逗号后面的b会被重新赋值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">/*这里我们添加表达式 var c =a,b的时候，没有用小括号*/var a=1var b=2var c=a,bconsole.log(c);console.log(b);</script>
</body>
</html>

2.验证b被重新覆盖定义

把 b的作用域var换成let

3. 表达式 var c=(a,b) (加小括号)

c的值取值于小括号的最后一个元素，b

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">/*这里我们添加表达式 var c =a,b的时候，用小括号 c的值取于 小括号的最后一个元素b*/var a=1var b=2var c=(a,b)console.log(c);console.log(b);</script>
</body>
</html>

⭐4.回归到Vue的表达式

{{xxx,xxx}},和我们上边讨论的js代码一致。无小括号看第一个，有，看最后一个。

    <h1>{{school.name,school.address}}</h1>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器，  --><div id="root"><h1>名字:{{school.name}}</h1><h1>地址:{{school.address}}</h1><h1>学习的是:{{school.subject()}}</h1><hr><h1>{{school.name,school.address}}</h1></div><script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的stateschool:{name:'吉士先生',address:'河南省周口市',subject: ()=>'Java_LCP'  //这里是一个方法}}});</script>
</body>
</html>

不加小括号，如愿以偿。输出第一个

加上下括号，如愿以偿输出最后一个

  <h1>{{(school.name,school.address)}}</h1>

5. 表达式 var x=a && b

会输出最后一个数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">// 关于逻辑与 &&const a='qwe';const b='wer';const x=a && b;console.log(x);if(a && b){console.log('@');}</script>
</body>
</html>

6.源码解释官方md文件

a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns ""
a9 = false && ''         // f && f returns false

⭐5.回归到Vue表达式

如愿以偿，输出最后一个数据。假如说第一个不存在数值，那么就会返回false.如果存在值那么就返回最后一个

{{school.name && school.address}}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初始Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器，  --><div id="root"><h1>名字:{{school.name}}</h1><h1>地址:{{school.address}}</h1><h1>学习的是:{{school.subject()}}</h1><hr><h1>{{(school.name,school.address)}}</h1>  <!-- 不加小括号 那么就输出第一个，加上小括号就输出第最后个--><h1>{{school.name && school.address}}</h1></div><script type="text/javascript">//  创建一个vue的实列const vm=new Vue({el:'#root',  // el用于指定当前Vue实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuerydata :{  //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的stateschool:{name:'吉士先生',address:'河南省周口市',subject: ()=>'Java_LCP'  //这里是一个方法}}});</script>
</body>
</html>

如愿以偿，返回最后一个数据

如愿以偿，返回false.什么都不返回.

<h1>{{school.x && school.address}}</h1>

(四)、模板语法

1.认识标签体标签属性标签

2.插值语法(⭐标签体 {{}} )

    Vue模板语法有两大类:1.插值语法:功能:用于解析 标签体 内容写法:{{xxxx}},xxx作为表达式去解析，且可以自动读取到data中的属性

<!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>模板语法</title><!-- 引入Vue.js --><script src="../js/vue.js"></script>
</head>
<body><!-- Vue模板语法有两大类:1.插值语法:功能:用于解析 标签体 内容写法:{{xxxx}},xxx作为表达式去解析，且可以自动读取到data中的属性2.指令语法:功能:用于解析 标签(包括:标签属性、标签内容、绑定事件......)举列: v-bind:标签属性='xxxx'----》 :标签属性='xxxx'备注: Vue中有很多的指令，此处我们只是拿v-bind举个列子-->
<div id="root"><h2>插值语法</h2><h4>{{message}}</h4><h4>{{message.toUpperCase()}}</h4>
</div><script>var vm=new Vue({el:'#root',data:{message: 'hello jsxs',url:'https://www.baidu.com/'}});
</script>
</body>
</html>

3.指令语法（⭐标签 v-bind）

        2.指令语法:功能:用于解析 标签(包括:标签属性、标签内容、绑定事件......)举列: v-bind:标签属性='xxxx'----》 :标签属性='xxxx'备注: Vue中有很多的指令，此处我们只是拿v-bind举个列子

<!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>模板语法</title><!-- 引入Vue.js --><script src="../js/vue.js"></script>
</head>
<body><!-- Vue模板语法有两大类:1.插值语法:功能:用于解析 标签体 内容写法:{{xxxx}},xxx作为表达式去解析，且可以自动读取到data中的属性2.指令语法:功能:用于解析 标签(包括:标签属性、标签内容、绑定事件......)举列: v-bind:标签属性='xxxx'----》 :标签属性='xxxx'备注: Vue中有很多的指令，此处我们只是拿v-bind举个列子-->
<div id="root"><h2>指令语法</h2><a v-bind:href="url">点我去百度</a>
</div><script>var vm=new Vue({el:'#root',data:{message: 'hello jsxs',url:'https://www.baidu.com/'}});
</script>
</body>
</html>

4.效果展示

(五)、Vue中的数据绑定

1.解决浏览器控制台的警告信息⭐

基本步骤

在浏览器扩展程序中下载Vue.js detected
假如我们的V不亮的话，先测试是否下载正确
点击这个链接: https://blog.csdn.net/qq_69683957?spm=1011.2124.3001.5343看看V是否亮起。如果亮起就下载没问题，我们只需要进行配置。
配置权限的信息
会在F12里面的框中多出来一个调试工具

2.单向数据绑定(v-bind)

我们先使用 v-bind 绑定属性，让属性的值为vue的data区域的值。然后通过Vue的插件进行测试单项数据绑定，即:数据存储区的信息进行变化，那么我们的视图层也随时进行变化。

1.单项数据绑定(v-bind): 数据只能从data刘翔页面
2.双向数据绑定(v-model): 数据不仅能从data流向页面，还能从页面刘翔数据备注:1.双向数据绑定一般是对于表单元素2.v-model:value 可以简单的携程 v-model 默认收集value值

数据可以控制视图
视图不可以控制数据

<!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>数据绑定</title><script src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root">单向数据绑定: <input type="text" :value="message"><br><br>双向数据绑定: <input type="text" :value="message"></div><!-- 创建一个Vue实列 --><script type="text/javascript">new Vue({el:'#root',data:{message:'吉士先生'}});</script>
</body>
</html>

3.双向数据绑定(v-model)

我们使用组件 v-model: 进行实现视图和数据的双向绑定，这里我们对双向数据进行了绑定。单向的数据我们没有进行数据的绑定。

在普通的输入框中,我们可以直接写v-model=‘xxx’,会自动默认绑定value.
v-model: 绑定的式标签属性
只限于文本框进行使用双向绑定

双向数据绑定: <input type="text" v-model:value="message">

<!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>数据绑定</title><script src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root">单向数据绑定: <input type="text" :value="message"><br><br><!--  进行添加语句 v-model:属性='xxxx' -->双向数据绑定: <input type="text" v-model:value="message"></div><!-- 创建一个Vue实列 --><script type="text/javascript">new Vue({el:'#root',data:{message:'吉士先生'}});</script>
</body>
</html>

(六)、MVVM模型

1.解释MVVM的信息

M: 模型(Model): 对应data中的数据
V: 视图(View) 模板代码
VM: 视图模型(ViewModel) : Vue实列对象
视图一直监听Model,Model一直绑定视图
el 相当于Model绑定视图

2.测试vm改变数据影响视图

在这里我们等待服务器两秒后,执行方法()=>{}.

延时函数 setTimeout(function|delayTime);setTimeout(()=>{vm.message='龙川萍'},2000)

我们发现Vue实列可以帮助我们进行改变视图

<!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>数据绑定</title><script src="../js/vue.js"></script>
</head>
<body><!-- 1.单项数据绑定(v-bind): 数据只能从data刘翔页面2.双向数据绑定(v-model): 数据不仅能从data流向页面，还能从页面刘翔数据备注:1.双向数据绑定一般是对于表单元素2.v-model:value 可以简单的携程 v-model 默认收集value值--><!-- 准备好一个容器 --><div id="root">单向数据绑定: <input type="text" :value="message"><br><br><!--  进行添加语句 v-model:属性='xxxx' -->双向数据绑定: <input type="text" v-model:value="message"></div><!-- 创建一个Vue实列 --><script type="text/javascript">var vm=new Vue({el: '#root',data:{message:'吉士先生'}});// 设置定时函数，两秒钟后调用函数()=>{},setTimeout(()=>{vm.message='龙川萍'},2000)</script>
</body>
</html>

3.el绑定视图的两种方法($mount())⭐

第一种: el 绑定的方法

el:'#root'

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>{{message}}</h1></div>
<script>//el: 绑定视图的第一种写法new Vue({el:'#root',data:{message:'你好，吉士先生'}   });</script>
</body>
</html>>

第二种:vm.$mount(''),绑定

  vm.$mount('#root')

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>{{message}}</h1></div>
<script>//el: 绑定视图的第一种写法
/*    new Vue({el:'#root',data:{message:'你好，吉士先生'}});*///el : 第二种绑定视图var vm=new Vue({data:{message:'你好，吉士先生'}});vm.$mount('#root')
</script>
</body>
</html>

4.⭐JS方法的七种定义以及调用⭐

第一种定义一个普通的方法 function 方法名(参数){}。调用方式: 方法名()

调用方式: 方法名()

<!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><div><button onclick="a2()">点击我调用方法1</button></div><script type="text/javascript">function a2(){console.log(2)}</script>
</body>
</html>

第二种属性名:function 方法名(参数){}。调用方式: 方法名()

调用方式: 方法名()

<!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><div><button onclick="a()">点击我调用方法1</button></div><script type="text/javascript">a1:function a(){console.log(1)}</script>
</body>
</html>

第三种: var 对象={属性名:function(参数类型){}}。调用方式: 对象.属性名();

调用方式: 对象.属性名();

<!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><div><button onclick="obj.a3()">点击我调用方法3</button></div><script type="text/javascript">//  定义一个对象。对象的名字叫做objvar obj={a3:function(){console.log(3)}}</script>
</body>
</html>

第四种: var 对象={属性名:function 方法名(参数类型){}}。调用方式: 对象.属性名();

调用方式: 对象.属性名();

<!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><div><button onclick="obj2.a5()">点击我调用方法4</button></div><script type="text/javascript">// 第四种 对象里面的属性是方法 有函数名var obj2 = {a5: function a6() {console.log(4)}}</script>
</body>
</html>

第五种: var 对象={ 属性1:{ 属性2: function 方法名(){}}}。调用方式: 对象.属性1.属性2()

调用方式: 对象.属性1.属性2()

<!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><div><button onclick="obj3.a7.a8()">点击我调用方法5</button></div><script type="text/javascript">// 第五种 对象里面包含对象(内嵌方法)  var obj3 = {a7:{a8: function a9() {console.log(5)}}}</script>
</body>
</html>

第六种: var 函数名=(参数)=>{},调用方式: 函数名()

调用方式: 函数名()

<!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><div><button onclick="obj4()">点击我调用方法6</button></div><script type="text/javascript">// 第六种:箭头函数var obj4=()=>{console.log(6);}</script>
</body>
</html>

第七种:var 对象={属性名(){}}。调用方式: 对象.属性名()

可以省略 :function

<!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><div><button onclick="a()">点击我调用方法1</button><button onclick="a2()">点击我调用方法2</button><button onclick="obj.a3()">点击我调用方法3</button><button onclick="obj2.a5()">点击我调用方法4</button><button onclick="obj3.a7.a8()">点击我调用方法5</button><button onclick="obj4()">点击我调用方法6</button><button onclick="obj5.a10()">点击我调用方法7</button></div><script type="text/javascript">// 第一种 属性名a1: function a() {console.log(1)}// 第二种 普通方法function a2() {console.log(2)}// 第三种 对象里面的属性是方法 无函数名var obj = {a3: function a4() {console.log(3)}}// 第四种 对象里面的属性是方法 有函数名var obj2 = {a5: function a6() {console.log(4)}}// 第五种 对象里面包含对象(内嵌方法)  var obj3 = {a7:{a8: function a9() {console.log(5)}}}// 第六种 :箭头函数var obj4=()=>{console.log(6);}var obj5={a10(){console.log(7)}}</script>
</body></html>

5.data的两种方法(对象和方法)⭐

第一种:利用对象的写法进行存储 (常用写法)

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>{{message}}</h1></div>
<script>// 第一种利用对象的方式进行存储。new Vue({el:'#root',data:{message:'你好，吉士先生'}});
</script>
</body>
</html>

第二种: 利用方法的写法进行存储返回的是对象

方法返回的数据是对象
可以简写为 data(){return {} } 省略function
方法不要使用箭头函数，否则会导致this转变成window
组件中用的多

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>{{message}}</h1></div>
<script>// 第一种利用对象的方式进行存储。/*new Vue({el:'#root',data:{message:'你好，吉士先生'}});*///第二种利用函数的方式进行存储，返回值是 对象new Vue({el:'#root',data:function(){  //可以简写为 data(){return {} }.data尽量不要使用箭头函数，我们要使用普通函数。否则this指向的是window,而不是Vuereturn{message:'你好，吉士先生'}}});
</script>
</body>
</html>

(七)、Vue中的数据代理(_date)

1.数据代理模式基本介绍

我们首先在data的对象中传入数据
然后再_data中进行收集数据
再然后_data寻找代理vm,vm帮助我们进行代理数据
最重要的一点是: 代理对象不仅拥有读取的功能，也有更改的功能。

2.查看数据核实信息

发现数据引用的数据是true

  console.log(vm.name===vm._data.name)   true

![<!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><script src="../js/vue.js"></script>
</head>
<body><!-- 准备一个容器 --><div id="root"><h2>学校名字: {{name}}</h2><h2>学校地址: {{address}}</h2><h2>学科: {{subject}}</h2></div><!-- 进行配置Vue的实列 --><script type="text/javascript">var vm=new Vue({el:'#root',data:{name:'长春工业大学',address:'福祉大路',subject:'软件工程'}});console.log(vm.name===vm._data.name)</script>
</body>
</html>

3.介绍属性追加的信息(object.definePropery)⭐

我们定义一个空对象person,我们对其最佳数据 Object.defineProperty('代理的对象','添加的属性',{}) 。这里面我们要手动写入两个方法，分别对应着set方法和get方法。

定义一个对象对象的名字叫做person。 set和get中的this都是当前对象
调用Object.defineProperty(在哪个对象添加属性,添加的属性名字，{}); 为一个对象进行追加数据
当修改person.name时,set被调用。set会收到修改之后的值。
当读取person.name,get被调用，get的返回值就是name的值。

<!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 type="text/javascript">//如下这么写，那么就会出现死循环一直调用set方法//  定义一个对象 对象的名字叫做person。 set和get中的this都是当前对象var person = {};//  调用Object.defineProperty(在哪个对象添加属性,添加的属性名字，{}); 为一个对象进行追加数据Object.defineProperty(person, 'name', {set(ModifiedValue) { //当修改person.name时,set被调用。set会收到修改之后的值。console.log('set方法被调用' + ModifiedValue);this.name=value;  //如果加上这个赋值语句就会形成死循环的操作。一直调用set方法},get() {//当读取person.name,get被调用，get的返回值就是name的值。console.log('get方法被调用');return 100;}});person.name = '吉士先生';console.log(person.name);</script>
</body></html>

4.模拟数据代理的实列⭐

在这里我们的真实对象是 _data,代理_data的是vm.我们对vm进行属性追加的操作。当我们更改数据的时候会调用set方法，在set方法里面我们对_data数据进行赋值。在get方法中我们返回_data.数据

        关于Vue中的数据代理1.什么是数据代理?(1).当配置对象data中的数据，会被收集到vm._data中，然后通过Object.defineProperty让vm拥有_data所有的代理权(2).当访问vm的msg时，返回的是_data当中同名属性的值(3).当修改vm的msg时,修改的是_data当中同名属性的值2.为什么要数据数据代理?为了更加方便的读取和修改_data中的参数，不做数据代理，我们需要: vm._data.xxx 访问参数3.扩展思考更高效的监视数据。

<!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 type="text/javascript">// 模拟数据代理let _data={message:'吉士先生'}let vm={};Object.defineProperty(vm,'message',{set(ModifiedValue){_data.message=ModifiedValue;},get(){return _data.message;}});console.log(vm);</script>
</body>
</html>

5.Vue为什么要使用数据代理

(八)、复习前七章的知识点

1.Vue渲染的声明过程⭐

在这里我们对Vue实列中的data存储区，分别设置，渲染之前存储和渲染之后存储的操作。目的是为了判断数据什么时候会被存储在_data区，并且能够被vm遍历出来

我们发现在渲染之前能够被存储在_data区并且能够被vm识别
渲染之后，也能存储在_data区但是不能被vm识别

<!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>复习前五章</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>{{name}}</h1></div><script type="text/javascript">let data={name:'吉士先生',}var vm=new Vue({el: '#root',data});console.log(vm);// 我们在Vue渲染之后，再次为data存储区添加数据data.age='21';</script>
</body>
</html>

2.模板语法 (单项数据绑定)

v-bind : 数据绑定标签属性，会自动去查找data对象的属性。

3.数据绑定 (双向数据绑定)

v-model : 绑定表单中的value属性，可以实现双向绑定

4.数据代理 (_data => vm)

利用Object.defineProperty(){}

⭐5.JS的按钮监听绑定事件 (Dom)⭐

我们利用Dom元素通过id属性，进行获取button这个标签。并且添加函数改变Vue的_data区域的name属性。

通过dom获取id属性的时候，不需要加#

<button id="btn">点击我切换姓名</button>

        var bttn=document.getElementById('btn');bttn.addEventListener('click',function(){if(vm.name === '川川'){vm.name='吉士先生';}else{vm.name='川川';}

<!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>复习前五章</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>{{name}}</h1><button id="btn">点击我切换姓名</button></div><script type="text/javascript">let data={name:'吉士先生',age:'21'}var vm=new Vue({el: '#root',data});console.log(vm);// 我们在Vue渲染之后，再次为data存储区添加数据var bttn=document.getElementById('btn');bttn.addEventListener('click',function(){if(vm.name === '川川'){vm.name='吉士先生';}else{vm.name='川川';}});</script></body>
</html>

(九)、事件处理(v-on)

1.⭐JS原生按钮事件的获取⭐

这里我们发现，当我们点击按钮事件的时候。我们的数据会调用一个箭头函数，这个函数会自带一个event事件的这个函数。我们可以通过这个函数获取点击按钮的value值信息。

存在 event 这个事件

<!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><button id="btn">点我</button><script type="text/javascript">var bttn=document.getElementById('btn');bttn.onclick=(event)=>{  //当我们点击按钮的时候会带用这个箭头函数console.log(event);}</script>
</body>
</html>

2.七大常用事件处理

标准事件 (v-on)
简写事件 ( : )
传递参数 (event,数据)
阻止默认行为（@click.prevent）
阻止冒泡 (@click.stop)
阻止默认行为+阻止冒泡 (@click.stop.prevent)
键盘事件 (@keyup.enter)
标准事件 (v-on)⭐
我们这里不能用箭头函数否则会导致this转变
绑定的函数 show() 可以加括号

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><!-- 绑定事件 ---标准方式 --><button v-on:click="show1()">点我打印信息1 (v-on)</button> <!-- 这里我们可以写为 show1() 或则 show1 都可以进行调用 --><br><br></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show1: function (event) {  // 这里千万不要用 箭头函数 show1:()=>{},  因为假如我们使用箭头函数，那么我们的this会变成windowalert('信息1');console.log(this);    // 这里的this 是指 Vue的实列，vm}</script>
</body>
</html>

简写事件⭐

我们可以使用@ 代替 v-on:
暗藏着一个事件event

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><!-- 绑定事件 ---简写方式 --><button @click="show2">点我打印信息1 (@)</button><br><br></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show2(event){alert('信息2');console.log(event.target.innerText); //我们可以使用这个event的这些方法，通过这些方法我们可以进行打印出来button的value值 });</script>
</body></html>

传递参数⭐

传递参数我们需要在绑定事件处添加($event)

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><!-- 绑定事件 --- 传递参数 --><button @click="show3($event,654)">点我打印信息2 + 传递的参数</button>  <!-- 我们传递参数的时候，需要在前面保证event,能够传递进去。所以我们要进行$event --><br><br></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show3(event,number){console.log(event); //  打印看看是否存在event这个事件alert('信息3---'+number);}});</script>
</body></html>

阻止默认行为⭐

我们可以添加修饰符.pervent进行阻止

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><!-- 绑定事件 --- 阻止默认行为   prevent 叫事件修饰符--><a href="https://www.baidu.com" @click.prevent="show4">点我打印信息4 (阻止默认行为)</a><br><br></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show4(event){  // event.preventDefault();  //靠程序员进行手动阻止默认行为alert('信息4');}});</script>
</body></html>

阻止冒泡⭐

我们可以使用stop进行阻止冒泡

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><div @click="show5"><button @click.stop="show5">点我打印信息5 (阻止冒泡)</button></div><br></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show5(event){event.stopPropagation();  //靠程序员进行手动阻止冒泡alert('信息5');}});</script>
</body></html>

阻止冒泡+阻止默认行为⭐

@click.pervent.stop

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><!-- 绑定事件 ---阻止冒泡及默认行为 事件修饰符都可以连写 并且顺序可以乱写--><div @click="show6"><a href="https://www.baidu.com" @click.stop.prevent="show5">点我打印信息6 (阻止冒泡及默认行为)</a></div><br></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show6(event){   alert('信息6');  //进行阻止冒泡+默认行为}});</script>
</body></html>

键盘事件⭐

我们可以的使用@keyup.entry/编码

<!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><script src="../js/vue.js"></script>
</head><body><div id="root"><h1>欢迎来找{{msg}}玩耍</h1><!-- 绑定事件 ---标准方式 --><button v-on:click="show1()">点我打印信息1 (v-on)</button> <!-- 这里我们可以写为 show1() 或则 show1 都可以进行调用 --><br><br><!-- 绑定事件 ---简写方式 --><button @click="show2">点我打印信息1 (@)</button><br><br><!-- 绑定事件 --- 传递参数 --><button @click="show3($event,654)">点我打印信息2 + 传递的参数</button>  <!-- 我们传递参数的时候，需要在前面保证event,能够传递进去。所以我们要进行$event --><br><br><!-- 绑定事件 --- 阻止默认行为   prevent 叫事件修饰符--><a href="https://www.baidu.com" @click.prevent="show4">点我打印信息4 (阻止默认行为)</a><br><br><!-- 绑定事件 ---阻止冒泡  stop 叫做事件修饰符--><div @click="show5"><button @click.stop="show5">点我打印信息5 (阻止冒泡)</button></div><br><!-- 绑定事件 ---阻止冒泡及默认行为 事件修饰符都可以连写 并且顺序可以乱写--><div @click="show6"><a href="https://www.baidu.com" @click.stop.prevent="show5">点我打印信息6 (阻止冒泡及默认行为)</a></div><br><!--  键盘事件  @keyup.键值/keyCode编码。编码兼容性强，尽量用编码 --><input type="text" placeholder="按下回车提示数据7" @keyup.enter="show7"></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {msg: '吉士先生'},methods: {  // 用于配置Vue的方法show1: function (event) {  // 这里千万不要用 箭头函数 show1:()=>{},  因为假如我们使用箭头函数，那么我们的this会变成windowalert('信息1');console.log(this);    // 这里的this 是指 Vue的实列，vm},show2(event){alert('信息2');console.log(event.target.innerText); //我们可以使用这个event的这些方法，通过这些方法我们可以进行打印出来button的value值 },show3(event,number){console.log(event); //  打印看看是否存在event这个事件alert('信息3---'+number);},show4(event){  // event.preventDefault();  //靠程序员进行手动阻止默认行为alert('信息4');},show5(event){event.stopPropagation();  //靠程序员进行手动阻止冒泡alert('信息5');},show6(event){   alert('信息6');  //进行阻止冒泡+默认行为},show7(event){//  程序员需要自己判断按键// if (event.keyCode !==13){  //event.keyCode 是指按键的编码，编码13是回车键//     return;// }else{//     alert(event.target.value);  //展示文本框中的数据// }alert(event.keyCode);  //查看按键的编码}}});</script>
</body></html>

(十)、姓名案列_分析_计算属性

1.插值语法进行实现

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root">姓:<input type="text" v-model:value="xing"><br><br>名:<input type="text" v-model:value="ming"><br><br>全名:<span>{{xing}}-{{ming}}</span></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {xing:'李',ming:'明'}});</script>
</body>
</html>

2.methods方法实现

methods 里面的方法只要在绑定的容器里就可以直接利用{{}}调用
这里的this指的是vm的实列。
这里面的小括号我们必须要加，如果不加就会去找data区域不会找methods区域

<!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>使用methods进行实现</title><script src="../js/vue.js"></script>
</head>
<body><div id="root">姓:<input type="text" v-model:value="xing"><br><br>名:<input type="text" v-model:value="ming"><br><br>全名:<span>{{fullName()}}</span></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {xing:'李',dia:'-',ming:'川'},methods: {fullName(){return this.xing + this.dia+this.ming;}}});</script>
</body>
</html>

⭐3.JS原生代码进行实现⭐

利用添加属性的操作 Object.defineProperty()
当我们调用fulltime属性的时候，就获取 first+name
当我们改变fulltime的时候，我们获取到更改后的值。并且对值进行截取两部分。根据(-)
字符串.split(’ ')截取数据

<!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 type="text/javascript">let p = {firstName: '张',lastName: '三'// fullName= this.firstName + ' ' + this.lastName  不能这样写 因为这样写的话我们的this指的是window并不是p};Object.defineProperty(p,'fullName',{set(value) {   //当p被改变的时候，会自动调用set的值var arr =value.split('-');this.firstName=arr[0];this.lastName=arr[1];}, get() {  //当p被调用的时候，会自动调用get的值return this.firstName + '-' + this.lastName;}});</script>
</body>
</html>

4.computed计算属性实现 (简写只读)

什么时候调用计算属性 fullName?

⭐初次渲染会调用
⭐当依赖的属性值发生变化(本程序中依赖的属性是xing ming 和 fullName)
⭐当自己的属性被调用的时候
本质上是属性，不是方法。嗲用的时候不能加小括号
为什么不能用简写的方法改全名?
因为计算属性中，内涵了一个get()方法。没有包含set()方法
computed 的底层用的还是 get 和 set
计算属性的本质是:
添加属性并且赋值

 1.计算属性: 要显示的数据不存在.要通过计算得来
2.fullName函数底层用到得是对象setter() 和 getter()方法3.执行得时机:(1).初始显示会执行一次，得到的初始值去显示(2).当以来得数据发生改变时会被再次调用4.优势: 与methods实现相比，内部缓存机制 效率更高。

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root">姓:<input type="text" v-model:value="xing"><br><br>名:<input type="text" v-model:value="ming"><br><br>全名:<input type="text" v-model:value="fullName"></div><script type="text/javascript">new Vue({el: '#root',data:{xing:'李',ming:'明'},computed:{   // 计算属性，重要的是属性。也就是说在这个区域中的方法也就是属性，换句话说就是添加属性//  * ! computed 的底层用的还是 get 和 set // * !fullName什么时候调用?  (简写)// * ?⭐初次渲染会调用。⭐当依赖的属性值发生变化(本程序中依赖的属性是xing ming 和 fullName)fullName(){   return this.xing + '-' + this.ming}});</script>
</body>
</html>

5.computed计算属性实现 (完整读写)

这里我们对添加的属性进行手动添加get 和 set方法

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root">姓:<input type="text" v-model:value="xing"><br><br>名:<input type="text" v-model:value="ming"><br><br>全名:<input type="text" v-model:value="fullName"></div><script type="text/javascript">new Vue({el: '#root',data:{xing:'李',ming:'明'},computed:{ //     完整写法fullName:{set(Value){  //当fullName被修改的时候，会调用这个方法var arr=Value.split('-');this.xing=arr[0];this.ming=arr[1];},get(){return this.xing + '-' +this.ming;}}}});</script>
</body>
</html>

⭐6.插值语法里面的参数⭐

1.假如说插值语法里面的参数没有小括号
(1).可能时data储存区里的
(2).也可能时computed储存区里的
2.假如说插值语法里面的参数有小括号
(1).一定时methods方法区域里面的

(十一)、data methods computed总结

1.基本简要

方法和计算属性直接归vm所有不用代理
全场的this都是vue的实列
方法名不能和属性名相一致，否则会冲突
计算属性会在初始化渲染的时候进行调用一次（前提是用到）
计算属性优点是: 具有缓存的操作
在data中里面的this是指window

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2>{{x}}</h2><br><h2>{{y()}}</h2><br><h2>{{z}}</h2><br><button @click="y">点我调用y方法</button><br><br>展示x的值是:<input type="text" :value="x"></div><script type="text/javascript">var vm = new Vue({el: '#root',  //绑定哪个容器 为那个容器服务data: {  //驱动页面显示的数据都放在这里x: 'Hello, World!'   // 最终会通过数据代理的方法放入 vm},methods: {   // 方法名和属性名不能一致，否则会造成冲突y(){  //这里没有利用数据代理。直接被放在vm身上。console.log(100+'被调用');return 100;}},computed:{z:{  //z直接被放在vm身上了set(value){  //z的值被改变时mset执行，set中的this是vm,set会修改改变的值console.log('有人修改了z值，修改的值是:',value);},get(){  //z的值被读取的时候或z依赖的值，get执行。return 300;}}}    });</script>
</body>
</html>

(十二)、数据监视_watch

1.数据监视总结

        数据监视属性watch:1.当监视的属性变化时，回调函数自动调用，进行相关操作2.属性必须存在，才能进行监视3.监视的两种方法(1).new Vue时，出啊如watch配置(2).通过v,.$watch监视computed和watch之间的区别1.只要是computed能完成的功能，watch都可以完成2.watch能完成的功能，computed不一定能完成， 例如: watch可以进行异步操作,比如简单的姓更改之后，全名过一会再改变，使用了异步    备注: 1.所有被vue所调用(管理)的函数，都不要写箭头函数  列如: watch中的函数，computed中的函数2.所有不是被Vue所调用的函数，都要写成箭头函数     列如: 定时器的问题，ajax回调

2.数据监视的第一种写法 (精简版)

在此案列中: 我们对数据实现姓名案列，通过监视进行实现姓名案列

监视的是已经存在data的元素
当监视的属性发生变化的时候，会自动调用方法
有两个参数: 第一个是更改后的值，后一个是更改前的值
watch里面的this是vm

<!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><script src="../js/vue.js"></script>
</head><body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<input type="text" v-model="fullName"><br><br></div><script>var vm = new Vue({el: '#root',data: {    // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastNamefirstName: '李',lastName: '明',fullName: '李-明'  // -----太低级了},watch: {  // 我们监视的对象必须是已经拥有的属性，否则我们将监视不到数据的存在/*** 1.firstName 社么时候调用? data中的firstName被改变的时候会调用。会传递进来一个改变后的值和改变前的值**2.watch里面的this是vm, 千万别用箭头函数 ()=>{}*/// 监测姓: -----精简写法 firstName(newValue, oldValue) { //console.log('firstName 被监视到了.由原来的 ' + oldValue + ' 修改成了 ' + newValue)this.fullName = newValue + '-' + this.lastName;},lastName(newValue, oldValue) {this.fullName = this.firstName + '-' + newValue;},fullName(newValue, oldValue) {var arr = newValue.split('-');this.firstName = arr[0];this.lastName = arr[1];}}});</script>
</body>
</html>

3.数据监视的第二种写法 (完整版)

实际内涵着handler();这个方法。
里面存在着一个immediat: true; 假设为true ,那么handel立即调用
这里我们就可以在 fullName 初始值为 ’ ’

<!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><script src="../js/vue.js"></script>
</head><body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<input type="text" v-model="fullName"><br><br></div><script>var vm = new Vue({el: '#root',data: {    // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastNamefirstName: '李',lastName: '明',fullName: ''},watch: {  // 我们监视的对象必须是已经拥有的属性，否则我们  // 检测姓的完整写法firstName:{immediate: true,  // 若immediate为true则handle会在初始化时就会调用一次，以后就看firstName的改变了handler(newValue,oldValue){this.fullName = newValue + '-' + this.lastName;}}},lastName(newValue, oldValue) {this.fullName = this.firstName + '-' + newValue;},fullName(newValue, oldValue) {var arr = newValue.split('-');this.firstName = arr[0];this.lastName = arr[1];}}});</script>
</body></html>

4.watch的第二种写法（$watch）

<!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><script src="../js/vue.js"></script>
</head><body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<input type="text" v-model="fullName"><br><br></div><script>var vm = new Vue({el: '#root',data: {    // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastNamefirstName: '李',lastName: '明',// fullName: '李-明'   -----太低级了fullName: ''},watch: {  // 我们监视的对象必须是已经拥有的属性，否则我们将监视不到数据的存在/lastName(newValue, oldValue) {this.fullName = this.firstName + '-' + newValue;},fullName(newValue, oldValue) {var arr = newValue.split('-');this.firstName = arr[0];this.lastName = arr[1];}}});vm.$watch('firstName',{immediate: true,  // 若immediate为true则handle会在初始化时就会调用一次，以后就看firstName的改变了handler(newValue,oldValue){this.fullName = newValue + '-' + this.lastName;}})</script>
</body>
</html>

5.computed计算属性与watch监视区别

 computed和watch之间的区别1.只要是computed能完成的功能，watch都可以完成2.watch能完成的功能，computed不一定能完成， 例如: watch可
以进行异步操作,比如简单的姓更改之后，全名过一会再改变，使用了异步
备注: 1.所有被vue所调用(管理)的函数，都不要写箭头函数  列如: watch中的函数，computed中的函数2.所有不是被Vue所调用的函数，都要写成箭头函数     列如: 定时器的问题，ajax回调

定时器要用箭头函数

<!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><script src="../js/vue.js"></script>
</head><body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<input type="text" v-model="fullName"><br><br></div><script>var vm = new Vue({el: '#root',data: {    // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastNamefirstName: '李',lastName: '明',// fullName: '李-明'   -----太低级了fullName: ''},watch: {  // 我们监视的对象必须是已经拥有的属性，否则我们将监视不到数据的存在lastName(newValue, oldValue) {this.fullName = this.firstName + '-' + newValue;},fullName(newValue, oldValue) {var arr = newValue.split('-');this.firstName = arr[0];this.lastName = arr[1];}}});vm.$watch('firstName',{immediate: true,  // 若immediate为true则handle会在初始化时就会调用一次，以后就看firstName的改变了handler(newValue,oldValue){setTimeout(()=>{  // 此处定时器的函数一定要用箭头函数，否则我们拿不到vm.因为箭头函数没有this,会自动去找临近的实列充当其thisthis.fullName = newValue + '-' + this.lastName;},1000);}})</script>
</body>
</html>

(十三)、绑定样式

1.原生状态绑定样式

我们的class里面的类可以写多个，但是每一个都要进行空格处理

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><div id="root"><!-- 1.我们原生情况下也可以绑定多个样式，即类可以设置多个 用空格进行隔开--><h1 class="Jsxs classA classB classC">{{title}}1</h1>      </div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

2.class样式绑定 (字符串)

我们可以通过字符串的形式，进行绑定数据;

适应于类名不确定，要动态进行获取。

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><div id="root"><!-- 2.class的字符串写法，适应于类名不确定，要动态进行获取。--><h1 class="Jsxs" :class="myStyle">{{title}}2</h1></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

3.class样式绑定 (类绑定:不加引号)

利用类进样式绑定，类的key值是一个字符串可以省略不写

适应于: 类名确定(类名实际都是字符串’classB’==>可以简写为 classB)，但不确定用不用.
{{}} 只解析表达式，将表达式转换成字符串。如果已经是字符串就不进行解析，原样输出。

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><div id="root"><!-- 3.class的对象写法，适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用.为什么在这里会自动去找data区域找hasB,而不是找classB？（1）.因为找的是 变量 不是 字符串--><h1 class="Jsxs" :class="{classB:hasB,classC:hasC}">{{title}}3</h1>      </div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

4.class样式绑定 (类绑定:加引号)

可以不用添加引号数据

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><div id="root"><!-- 4.class类名加上小括号--><h1 class="Jsxs" :class="{'classB':hasB,'classC':hasC}">{{title}}4</h1></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

5.class样式绑定 (三元表达式)

适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用.

这里面是否hasB被调用，假如说调用就使用classB,否则输出为空

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><!-- 1.绑定class样式:class="xxx" xxx可以是字符串 对象 数组2.绑定style样式:style='{color: activeColor. fontSize: fontsize +'px'}'其中activeColor/fontSize 是data属性    --><div id="root"><!-- 5.class三元表达式:   适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用 这里面是否hasB被调用，假如说调用就使用classB,否则输出为空--><h1 class="Jsxs" :class="hasB ? 'classB' : '' ">{{title}}5</h1></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

6.数组绑定样式

数组里面的变量如果不加引号，就是表达式。如果加上引号就是字符串

如果不添加引号，我们就要去寻找data区间
如果添加引号，我们就不用解析表达式，直接原样输出

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><!-- 1.绑定class样式:class="xxx" xxx可以是字符串 对象 数组2.绑定style样式:style='{color: activeColor. fontSize: fontsize +'px'}'其中activeColor/fontSize 是data属性    --><div id="root"><!-- 6.class数组的写法，适应于: 同时应用多个class. 数组里面的是变量.(1).如果是变量，那么我们就需要仅data进行查找，然后帮助我们解析成字符串(2).如果自己是字符串，那么我们就不需要进行解析，直接返回字符串的信息--><!-- <h1 class="Jsxs" :class="[classA,classB,classC]">{{title}}6</h1> --><!-- 转变为字符串 --><h1 class="Jsxs" :class="['classA','classB','classC']">{{title}}6</h1></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

7.绑定style样式

绑定style,我们也需要借助对象的形式

Vue不知道’-'.我们需要转换成驼峰形式
我们需要使用对象的形式

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><!-- 1.绑定class样式:class="xxx" xxx可以是字符串 对象 数组2.绑定style样式:style='{color: activeColor. fontSize: fontsize +'px'}'其中activeColor/fontSize 是data属性    --><div id="root"><!-- 7.绑定style(CSS)样式   (1). 切记我们要使用对象的形式，并且原本的font-size 要进行驼峰命名==》 fontSize 否则读取不出来--><h1 class="Jsxs" :class="['classA','classB','classC']" :style="{fontSize:size+'px'}">{{title}}6</h1></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

8.全部样式信息

<!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><script src="../js/vue.js"></script><style>.Jsxs {/*  设置盒子模型 */border: 3px solid rgb(4, 3, 4);}.classA {/*  背景颜色 */background-color: blueviolet}.classB {/*  字体颜色 */color: rgb(233, 20, 20);}.classC {/*  字体阴影 */text-shadow: 2PX 2PX 3PX yellow;}</style>
</head><body><!-- 1.绑定class样式:class="xxx" xxx可以是字符串 对象 数组2.绑定style样式:style='{color: activeColor. fontSize: fontsize +'px'}'其中activeColor/fontSize 是data属性    --><div id="root"><!-- 1.我们原生情况下也可以绑定多个样式，即类可以设置多个 用空格进行隔开--><h1 class="Jsxs classA classB classC">{{title}}1</h1><!-- 2.class的字符串写法，适应于类名不确定，要动态进行获取。--><h1 class="Jsxs" :class="myStyle">{{title}}2</h1><!-- 3.class的对象写法，适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用.为什么在这里会自动去找data区域找hasB,而不是找classB？（1）.因为找的是 变量 不是 字符串--><h1 class="Jsxs" :class="{classB:hasB,classC:hasC}">{{title}}3</h1><!-- 4.class类名加上小括号--><h1 class="Jsxs" :class="{'classB':hasB,'classC':hasC}">{{title}}4</h1><!-- 5.class三元表达式:   适应于: 类名确定(类名实际都是字符串'classB'==>可以简写为 classB)，但不确定用不用 这里面是否hasB被调用，假如说调用就使用classB,否则输出为空--><h1 class="Jsxs" :class="hasB ? 'classB' : '' ">{{title}}5</h1><!-- 6.class数组的写法，适应于: 同时应用多个class. 数组里面的是变量.(1).如果是变量，那么我们就需要仅data进行查找，然后帮助我们解析成字符串(2).如果自己是字符串，那么我们就不需要进行解析，直接返回字符串的信息--><!-- <h1 class="Jsxs" :class="[classA,classB,classC]">{{title}}6</h1> --><!-- 转变为字符串 --><h1 class="Jsxs" :class="['classA','classB','classC']">{{title}}6</h1><!-- 7.绑定style(CSS)样式   (1). 切记我们要使用对象的形式，并且原本的font-size 要进行驼峰命名==》 fontSize 否则读取不出来--><h1 class="Jsxs" :class="['classA','classB','classC']" :style="{fontSize:size+'px'}">{{title}}6</h1></div><script type="text/javascript">var vm = new Vue({el: '#root',data: {title: 'Hello, World!',myStyle: 'classA',hasB: true,   // 是否用BhasC: true,    // 是否用Csize: 50}});</script>
</body></html>

(十四)、Vue实现前端背景色的改变

1.如何让div充满整个屏幕?

    <style>/*  如下的内容让css占据整个电脑屏幕 */* {margin: 0;padding: 0;}div {width: 100%;height: 100%;background: rgb(246, 139, 25);position: absolute;}</style>

2.如何实现对下拉框数据的监听?

 var mySelect = document.getElementById("bjing");var index = mySelect.selectedIndex;// 拿到下拉框的值(value)mySelect.options[index].value;// 拿到下拉框的的文本值textmySelect.options[index].text;

  selectedRed() {setTimeout(() => {var mySelect = document.getElementById("bjing");var index = mySelect.selectedIndex;// 拿到选项中的值mySelect.options[index].value;if(mySelect.options[index].value==='blue'){this.msg='blue';}if(mySelect.options[index].value==='red'){this.msg='red';}if(mySelect.options[index].value==='yellow'){this.msg='yellow';}console.log(mySelect.options[index].value);// 拿到选项中的文本值mySelect.options[index].text;console.log(mySelect.options[index].text);}, 1)}

3.背景色的改变

这里我们实现单向数据的绑定，即data的改变导致视图的改变。这里我们如何实现?借助于点击按钮触发的方法

<!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><script src="../js/vue.js"></script><style>/*  如下的内容让css占据整个电脑屏幕 */* {margin: 0;padding: 0;}div {width: 100%;height: 100%;background: rgb(246, 139, 25);position: absolute;}</style>
</head><body><div id="root" :style="{background:msg}"><select name="背景颜色" id="bjing"><option value="red">红色</option><option value="yellow">黄色</option><option value="blue">蓝色</option></select><button id="bttn" @click="selectedRed">确定选择此颜色</button></div><script type="text/javascript">new Vue({el: '#root',data: {msg: 'orange'},methods: {selectedRed() {setTimeout(() => {var mySelect = document.getElementById("bjing");var index = mySelect.selectedIndex;// 拿到选项中的值mySelect.options[index].value;if(mySelect.options[index].value==='blue'){this.msg='blue';}if(mySelect.options[index].value==='red'){this.msg='red';}if(mySelect.options[index].value==='yellow'){this.msg='yellow';}console.log(mySelect.options[index].value);// 拿到选项中的文本值mySelect.options[index].text;console.log(mySelect.options[index].text);}, 1)}}});</script>
</body>
</html>

版本2

<!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><script src="../js/vue.js"></script><style>/*  如下的内容让css占据整个电脑屏幕 */* {margin: 0;padding: 0;}div {width: 100%;height: 100%;background: rgb(246, 139, 25);position: absolute;}</style>
</head><body><div id="root" :style="{background:option}"><select name="背景颜色" id="bjing"  v-model="option"><option  disabled value="1">请选择颜色</option><option >red</option><option >yellow</option><option >blue</option></select></div><script type="text/javascript">new Vue({el: '#root',data: {option:'1'}});</script>
</body></html>

(十五)、条件渲染

1.配置methods手动改变天气

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1><button id="bttn" @click="change">点击切换天气</button></div><script>var vm = new Vue({el: '#root',data: {isHost: true,},methods:{//  进行可以手动的改变天气change(){if(this.isHost){this.isHost = false ;}else{this.isHost = true ;}}}});</script>
</body>
</html>

2.表达式直接取反改变天气

这里不用配置methods方法

<!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><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1><button id="bttn" @click="isHost = !isHost">点击切换天气</button></div><script>var vm = new Vue({el: '#root',data: {isHost: true,},methods:{}});</script>
</body>
</html>

3.利用v-show做条件渲染

        条件渲染: v-if:适用于:切换频率很低的场景特点:不展示Dom结点直接被删除v-show:适用于: 切换频率很高的场景特点: 不展示Dom结点没有被删除,仅仅是样式隐藏了备注: 使用v-if的时候,Dom结点可能无法取到,使用v-show Dom结点一定能被获取

正常情况下两个div都会显示出来
但是我们利用v-show.可以通过条件进行判断。假如说为true,那么就展示。否则就进行隐藏不展示
实质是节点隐藏，不是干掉
有缓存

<!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><script src="../js/vue.js"></script><style>#myPicture{width: 100%;height: 100%;;}</style>
</head>
<body><div id="root"><h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1><button id="bttn" @click="isHost = !isHost">点击切换天气</button><!-- 使用v-show做条件渲染 --><!-- 只有天气炎热才会展示下面的这个图片 --><div v-show="isHost">  //假如说v<img src="https://p8.itc.cn/q_70/images03/20210708/9dc29d4072a44f93b12ed4387bfccd85.jpeg" alt="好热啊"><br><span>建议: 心静自然凉</span></div><!-- 只有天气凉爽才会展示下面的这一张图片 --><div v-show="!isHost"><img src="https://img95.699pic.com/photo/40018/3976.jpg_wh860.jpg%21/fw/562" alt="凉爽" id="myPicture"><br><span>建议:多喝热水</span></div></div><script>var vm = new Vue({el: '#root',data: {isHost: true,},methods:{//  进行可以手动的改变天气change(){if(this.isHost){this.isHost = false ;}else{this.isHost = true ;}}}});</script>
</body>
</html>

4.利用v-if/v-else做条件渲染

无缓存

<!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><script src="../js/vue.js"></script><style>#myPicture{width: 100%;height: 100%;;}</style>
</head>
<body><!-- 条件渲染: v-if:适用于:切换频率很低的场景特点:不展示Dom结点直接被删除v-show:适用于: 切换频率很高的场景特点: 不展示Dom结点没有被删除,仅仅是样式隐藏了备注: 使用v-if的时候,Dom结点可能无法取到,使用v-show Dom结点一定能被获取--><div id="root"><h1>今天天气很{{isHost ? '炎热' : '凉爽'}}</h1><button id="bttn" @click="isHost = !isHost">点击切换天气</button><!-- 使用v-show做条件渲染 --><!-- 只有天气炎热才会展示下面的这个图片 --><!-- <div v-show="isHost">  //假如说v<img src="https://p8.itc.cn/q_70/images03/20210708/9dc29d4072a44f93b12ed4387bfccd85.jpeg" alt="好热啊"><br><span>建议: 心静自然凉</span></div> --><!-- 只有天气凉爽才会展示下面的这一张图片 --><!-- <div v-show="!isHost"><img src="https://img95.699pic.com/photo/40018/3976.jpg_wh860.jpg%21/fw/562" alt="凉爽" id="myPicture"><br><span>建议:多喝热水</span></div> --><!-- ----------------------------------------------------------------------- --><!-- 只有天气炎热才会展示下面的这个图片 --><div v-if="isHost">  //假如说v<img src="https://p8.itc.cn/q_70/images03/20210708/9dc29d4072a44f93b12ed4387bfccd85.jpeg" alt="好热啊"><br><span>建议: 心静自然凉</span></div><!-- 只有天气凉爽才会展示下面的这一张图片 --><div v-else><img src="https://img95.699pic.com/photo/40018/3976.jpg_wh860.jpg%21/fw/562" alt="凉爽" id="myPicture"><br><span>建议:多喝热水</span></div></div><script>var vm = new Vue({el: '#root',data: {isHost: true,},methods:{//  进行可以手动的改变天气change(){if(this.isHost){this.isHost = false ;}else{this.isHost = true ;}}}});</script>
</body>
</html>

85.【Vue-细刷-01】相关推荐

Github项目分享——Vue随机刷装备小游戏
Vue随机刷装备小游戏项目地址 https://github.com/Couy69/vue-idle-game 游戏设计通过副本获得装备与金币装备分为四个等级:破旧.普通.神器.史诗主角默认每 ...
vue快速学习01、环境与常用属性标签
vue快速学习01.环境与常用属性标签 1.MVVC MVVM 设计模式是由 Model (模型). View (视图)和 ViewModel (视图模型)三部分组成,是 MVC 设计模式的进化版,即 ...
菜鸟学习----前端vue.js学习01
菜鸟学习----前端vue.js学习01 项目使用vue.js脚手架,构建项目 1.vue.js构建登录框登录框架构使用element ui Tabs 标签页,构建基础样式.用户登录,二维码查询,编 ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...
Vue学习笔记01：准备开发与调试环境
文章目录一.安装Vue.js (一)使用独立版本 1.开发版本 2.生产版本 3.案例演示 (二)使用CDN方式 1.采用 Staticfile CDN 2.案例演示 (三)使用NPM方式 1.安装 ...
【Vue教程】01：入门前的概述：关于VUE那些事儿
从去年开始,在各大论坛技中,与 Vue.js 这一相关词语的内容爆炸式增长,在前端技术增速中独领风骚,迅速成为前端三巨头之一.记得在某个社区中有人这样介绍三巨头"来自 Google 的 An ...
【vue练手01之点击选中】
vue练手点击选中代码图示点击选中代码 <!DOCTYPE html> <html lang="en"> <head><meta ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
【狂神说Java】Vue学习笔记01：前端知识体系
本文根据B站[狂神说Java]vue系列视频整理,如需观看视频,请点击链接跳转 [狂神说Java]Vue视频 2.前端知识体系想要成为真正的"互联网Java全栈工程师"还有很长的 ...

85.【Vue-细刷-01】

Vue