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