Vue 语法-Vue 的动态绑定 style 相关操作

🎉Vue 绑定 style 的对象语法？

style 后面跟的是一个对象类型

对象的 key 是 CSS 属性名称

对象的 value 是具体赋的值，值可以来自于 data 中的属性

1
2
3
<h2 :style="{fontSize : '50px'}">{{message}}</h2>
<h2 :style="{fontSize : finalsize}">{{message}}</h2>
<h2 :style="{fontSize : finalsize + 'px'}">{{message}}</h2>

🎉Vue 绑定 style 的数组语法？

style 后面跟的是一个数组类型

多个值以，分割即可

1
2
3
4
<h2 :style="[baseStyles, overridingStyles]">{{message}}</h2>
<!--省略代码-->
baseStyles: {backgroundColor:'red'},
 overridingStyles: {fontSize:'100px'},

Vue 语法-Vue 的计算属性

🎉Vue 中的计算属性？

计算属性是写在实例的 computed 选项。

1
2
3
4
5
6
<h2>{{fullname}}</h2>
<!--省略代码-->
computed:{
  fullname: function () {
    return this.firstname + ' ' + this.lastname
  }

🎉Vue 中的复杂的计算属性？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data:{
  books:[
    {id:110,name:'大学生物',price:113},
    {id:111,name:'大学语文',price:140},
    {id:112,name:'大学化学',price:112},
    {id:113,name:'大学地理',price:130}
  ]
},
computed:{
  totalprice:function () {
    let result = 0 ;
    for(let i=0; i< this.books.length;i++){
      result += this.books[i].price
    }
    return result
  }
}

🎉Vue 中的计算属性的 getter 和 setter？

1
2
3
4
5
6
7
8
9
10
11
12
computed:{
   //fullN:function f() {
// return this.firstN + " " + this.lastN
   // }
   //计算属性一般没有set方法，只读属性。
   fullN:{
     set:function f() {},
     get:function f() {
       return this.firstN + " " + this.lastN
     },
   }
 }

🎉Vue 中的实现计算的方法？

1.直接拼接

2.定义 methods

3.通过 computed

Vue 语法-Vue 中的需要掌握的 ES6 语法？

🎉 为什么要用 let 而不是 var？

事实上 var 的设计可以看成 JavaScript 语言设计上的错误. 但是这种错误多半不能修复和移除, 以为需要向后兼容。大概十年前, Brendan Eich 就决定修复这个问题, 于是他添加了一个新的关键字:let。我们可以将 let 看成更完美的 var。

参考阅读：从 var 到 let，JS 用了整整 18 年！

🎉 什么是块级作用域？

变量作用域：变量在什么范围内是可用的

JS 中使用 var 来声明一个变量时, 变量的作用域主要是和函数的定义有关。

针对于其他块定义来说是没有作用域的，比如 if/for 等，这在我们开发中往往会引起一些问题。

🎉 有无块级作用域会产生什么问题？

① 没有：if 的块级影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var func;
if(true){
  var name ="kobe"
  func = function(){
    console.log(name)     //此处打印的是kobe
  }
}
<!-- 在其他模块调用 -->
name ="why"
func()                   //此处调用的目的是打印出kobe
console.log(name)        //但此处打印的是why
<!--
该模块具有相同的name赋值变量，
会作用于func()，
改变func()中的name赋值
-->

② 没有：for 的块级影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
  var btns = document.getElementsByClassName("button");
  for (var i=0; i<btns.length;i++){
    btns[i].addEventListener("click",function () {
      console.log("第" + i + "个按钮被点击" )
      //此处打印的是5
      //因为在打印前执行了5层次循环，i已变为5
    })
  }
</script>

③ 有：function 的块级影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

<script>
  var btns = document.getElementsByClassName("button");
  for (var i=0; i<btns.length;i++){
   (function(num){
       btns[num].addEventListener("click",function () {
          console.log("第" + num + "个按钮被点击" )
       })
   })(i)
   //此处通过匿名函数建立了一个闭包，
   //在执行时，将i作为function的参数num立即传入
  }
</script>

③ 有：let 的块级影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

<script>
  let btns = document.getElementsByClassName("button");
  for (let i=0; i<btns.length;i++){
    btns[i].addEventListener("click",function () {
      console.log("第" + i + "个按钮被点击" )
      //let有独立的作用域
    })
  }
</script>