Vue.js的模板语法详解

跟着网课学vue,把一些感觉比较重要的相关的知识点记下来。

简单认识Vue.js

Vue是一个渐进式的框架,什么是渐进式的呢?

  • 渐进式意味着可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验。如果需要使用Vue重构项目,它的工程可以是一点一点来的,假如有多个非Vue技术栈页面,有的用jq,有的用原生,可以先改一部分,再改一部分,可以不全盘更换。
  • 如果希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统比如Core + Vue-router + Vuex,也可以满足各种各样的需求。如果是新项目使用Vue编写,则可以直接Vue全家桶,像隔壁后端的Spring Boot那样。

在ES6中,用let定义变量,const定义常量。

编程范式:命令式编程:

  1. 创建div元素,设置id属性
  2. 定义一个变量叫message
  3. 将message放在前面的div元素中显示

逐行执行,先做什么,再做什么,这就是命令式编程

编程范式:声明式编程:

只需要告诉实例去管理哪个div,在里面写什么东西,这就可以了。

vue使用的是声明式编程,这个思想有点类似于面向对象。这种操作可以做到数据与页面完全分离,页面只需要管页面,数据交给js解决。如果采用命令式编程,则还需要重新绑定,在数据修改后重新使用一次getElementByID(),但是使用vue的话,假如div里面显示的东西是message,此时开审查,在控制台修改message的值,数据会跟着变动。这种形式也被称为响应式。

不想让显示随着数据的改变而改变?那就在标签内加入v-once属性

展示更复杂的数据,比如要展示一整个列表,不需要像以前那样ul里套多个li,使用v-for可以把一整个数组的全部数据遍历输出,只需要一个li。不再需要在JavaScript里完成DOM拼接。它仍然是响应式的。

methods属性里面定义各种方法,在里面调用app对象的变量前面要加this,代表当前对象中的变量,如果不加则它会从全局找变量。

@clickv-on:click的一个语法糖。

开发中什么时候称之为方法,什么时候称之为函数?

方法:method 函数:function

在类中的成员函数称之为方法,在类外面的函数为函数。方法是和某一个实例或者对象挂钩的,是作为一个对象实例的属性的函数。

生命周期:事物从诞生到消亡的整个过程。

JavaScript中let和var的区别:参考https://www.jianshu.com/p/9f7f053f7204

模板语法

插值操作

Vue中常用的 {{ }} 双大括号叫做Mustache语法(单词原意:胡子,胡须),这个用的是最多的。需要注意mustache语法只能用于html内容,不能用于html属性。

mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式,复杂表达式可以使用computed属性。

使用v-html属性可以把字符串的内容以html形式解析。使用v-text=‘属性’也可以在页面上显示那个值,但是这样不够灵活,虽然标签内不再需要mustache语法,但是如果想加点什么这样就不行了, 内容会被v-text覆盖。

v-pre的功能与<pre></pre>类似,展示原来的mustache语法,不解析就输出。

v-cloak(单词原意:斗篷,遮蔽)执行的是这样的功能,有时候解析需要一些时间,在解析之前打印在屏幕上的内容是原生的mustache代码,这可能会给用户带来不好的浏览体验,即使它存在的时间很短。使用v-cloak可以让它在解析之前隐藏。实际上,v-cloak的官方功能是,在vue解析之前,div存在这个属性,在div解析之后,这个属性就将删除。刚才所述即是v-cloak的使用例子之一。顺带一提,对v-cloak使用CSS的语法规则是[v-cloak]: {},这是一个我以前不太常用的选择器。

绑定属性

这个东西用来修改html代码的属性,比如动态维护img标签的src属性,使其可以变换图片,这种叫做动态绑定img元素的src属性,还可以动态绑定a元素的href属性。可以使用v-bind指令,它可以用来动态绑定属性。动态的图片链接很可能是从服务器请求来的,使用vue将它放在data里面,再通过v-bind进行动态绑定属性。

使用例:<img v-bind:src="imgURL" alt="">,其中imgURL代表data中的属性,里面存着一个图片链接。

很多时候都是这样,从服务器传回数据到vue中转,vue再把这些数据处理后传给DOM,就能在页面里显示那些内容。

语法糖:<img :src="imgURL" alt="">,只在属性前面加一个冒号。

绑定属性也可以用来动态绑定CSS,即动态绑定class属性。class后接一个列表中的键值对,一个类名对应一个bool值,值为true表示有这个class,值为false表示没有这个class。这样写不妨碍正常加写死的class。

使用例:<h2 v-bind:class="{类名1: bool, 类名2: bool}">{{message}}</h2>

有时候这样的列表会让代码写的很长,看起来不方便,此时可以把这些属性绑定到一个method或者conputed里面。要注意放在里面的话使用变量需要加this.

可以绑定一个数组:class=[变量1, 变量2, ...],变量如果直接是名字则就是data后对应的值,如果是字符串则就是字符串的内容。

动态绑定style的时候,如果要设定某个数值是定死的,不能直接写数字,那样vue会把它认为是一个变量,此时需要加一个单引号括起来,直接按字符串解析,就ok。

例:<h2 :style="{font-size: '50px'}">{{message}}</h2>(这是一种key:value的写法)

计算属性

computed属性。用于数据的组合。本质上是属性而不是方法,当某些情况需要将一些数据组合显示的时候(比如组合显示姓和名,组合显示书籍名称编号价格等信息),使用计算属性可以让代码更简洁直观。

例:

1
2
3
4
5
6
7
8
9
10
11
12
<h2>总价格:{{allPrice}}</h2>
<script>
computed: {
allPrice: function() {
let sum = 0;
for (let i=0; i < this.books.length; i++) {
sum += this.books[i].price;
}
return sum;
}
},
</script>

计算属性有get和set方法,这一点和C#有点像,但是实际写的时候一般是没有set方法的,也就是说这个属性不可以被修改,即表明该属性为只读属性。如果需要修改属性则需要写上set,最好在函数里面传入一个变量,它代表修改的值,可以用它来执行一些操作。比如输入一个名字的话就可以传入后用split方法分割字符串,分割的结果保存在数组里,然后再把新的值传给原来的变量。

1
2
3
4
5
6
7
8
9
10
fullName: {
set: function(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function() {
return this.firstName + ' ' + this.lastName;
}
}

tips:不要在html代码里写过于繁琐的逻辑,这样不利于展示。

使用计算属性比普通方法还具有性能优势,因为计算属性具有一个缓存的特性。当同样的计算属性值被打印多次时,如果不发生修改,这个计算属性只会被调用一次。但是如果使用普通方法,则每次打印都会调用一次,这会增加开销。

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信