⭐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实列为哪个容器服务，值是选择器字符串，选择的写法类似于 jQuery data :{ //data 是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state school:{ 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>
