【vue.js】文档解读【day 1】

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

在这里插入图片描述

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

文章目录

模板语法
- JavaScript表达式
- - 仅支持表达式
  - 调用函数？
  - 受限的全局访问
- 指令
- - 参数
  - 动态参数
  - - 动态参数中值的限制
    - 动态参数中语法的限制

模板语法

JavaScript表达式

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

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

仅支持表达式

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

 <p>{{ return ok ? 'YES' : 'NO' }}</p>

该代码并没有报红，在删除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

<template>
 <p>{{ myName  }}</p>
</template>

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的例子：

<p v-if="seen">Now you see me</p>

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

参数

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

<template>
 <img :src=imgSrc >
 <button :disabled = disableEmpty>123</button>
 <p>{{ myName  }}</p>
</template>

<script>
  export default{
    data(){
      var imgSrc = "/src/components/icons/newImg.gif";
      var disableEmpty = "";
      return {
        imgSrc,
        disableEmpty
      }
    }
  }
</script>

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

  <p v-on:click="console.log(1)" >{{ myName }}</p>

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

动态参数

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

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

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

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

<img :[orderSrc]="imgSrc" />

<script>
export default {
  data() {
    var orderSrc = "src"
    return {
      orderSrc
    };
  },
};
</script>

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

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

 <p @[orderClick]="console.log(1)" >{{ myName }}</p>

<script>
export default {
  data() {
    var orderClick = "click"
    return {
      orderClick
    };
  },
};
</script>

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