【vue.js】文档解读【day 1】 | 模板语法2

如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！

模板语法

JavaScript表达式

除了前面的文本插值、绑定attr属性外，我们还可以直接在Vue中输入JavaScript表达式。就像下面这样：

{{ message.split('').reverse().join('') }}

仅支持表达式

但是有一个很重要的点，就是并非所有语句都可以，官方文档中说明声明语句和条件控制语句都不行，并且给了一个非常简单的测试方法：在{{}}中输入return + 你要使用的JavaScript表达式，如果没有报红（也就是合法）的情况下，你就可以使用。就像下面这样：

 
{{ return ok ? 'YES' : 'NO' }}

该代码并没有报红，在删除return之后就可以运行！

JavaScript通常用于以下两种场景：

• {{ }}中
• v-attr属性的值中，例如：:src=" ok ? 'YES' : 'NO'"

调用函数？

受限的全局访问

在上面讲到的JavaScript支持的表达式中，我们在访问变量时，能够访问的变量通常是有限的。官方文档中提供了能够访问到的全局对象列表，同时也提供了一个自行添加全局变量的方法：

main.js

//从vue中获取createApp方法
import { createApp } from "vue";
//引入组件
import App from "./App.vue";
//使用createApp方法创建vue实例
const app = createApp(App);
//在挂载前设置全局对象
app.config.globalProperties.myName = "Jing";
//将vue实例挂载在id=app的元素上。
app.mount("#app");

App.vue

tips：注意扩展全局对象要在挂载前设置，否则会收到vue的提示,并且无法使用该全局对象。

runtime-core.esm-bundler.js:47 [Vue warn]: Property “myName” was accessed during render but is not defined on instance.
at

指令

通过上面的学习，我们知道了vue中v-bind、v-html的使用方法。除此之外，vue提供了许多v-前缀的内置指令，这些只是一些vue提供的API，我们要通过文档了解其中的原理，就一直继续学习吧！

一个指令的任务就是可以在表达式的值变化时可以响应式的更新dom。例如文档中v-if的例子：

Now you see me

这里的v-if会根据seen的值响应式更新这个p标签。

参数

在前面使用v-bind时，我们设置了HTML标签中的src、disabled属性，该属性位于v-bind：的后面。这些属性其实就是v-bind的参数,回顾一下：

另外一个例子就是v-on，这个指令的任务是监听DOM时间，然后做出一些事情:

  
{{ myName }}

在点击这个p标签时控制台会输出1。该指令也有一个语法糖：使用@表示v-on指令。

动态参数

在学习动态参数时，回想以下JavaScript中对象的属性名表示有两个方法：

• 通过obj.attribute访问对象的属性
• 通过obj[attribute]访问对象的属性

其中第二种可以动态的访问对象的属性，也就是attribute可以是变量名。

在vue中同样可以动态的绑定指令的参数，和JavaScript类似，需要使用[ ]格式，例如：

上述代码中，orderSrc是动态参数，在vue实例中动态设置为src。

同样的，你也可以对一个事件名称使用动态参数，就像这样：

 
{{ myName }}

在这个代码中，orderClick可以是click focus mouseover等事件名称，具体使用参照自己的项目随机应变！

动态参数中 值 的限制

动态参数中表达式的值只能是一个字符串，或者是null，当值为null时意味这在该DOM中移除监听事件。

动态参数中 语法 的限制

动态参数中的表达式有一些语法限制，比如空格和引号等符号都是不合法的，例如官方文档中的一段示例代码：

 ... 

该代码中存在引号，不会通过编译器编译，而如果我们项目中确实需要这样的代码，我们可以使用vue中的计算属性（computed）来替换复杂的表达式。计算属性在后面将会解释。

同时，需要注意的是，在前文vue起步中的DOM 中的根组件模板板块，我们知道一种不使用vue组件，而是使用HTML文件里的模板，忘记的话可以移步至vue起步博文中回顾。在这种情况下，我们要避免使用大写字母，因为浏览器会把他强制转换为小写，例如下面这个代码：

 ... 

该代码中someAttr会被转换为someattr，而如果我们的vue实例中没有someattr这个属性，那么这段代码将无法正常工作。