如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!
文章目录
- 模板语法
- 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 isnot 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
等事件名称,具体使用参照自己的项目随机应变!
动态参数中 值 的限制
动态参数中表达式的值只能是一个字符串,或者是null,当值为null时意味这在该DOM中移除监听事件。
动态参数中 语法 的限制
动态参数中的表达式有一些语法限制,比如空格和引号等符号都是不合法的,例如官方文档中的一段示例代码:
<a :['foo' + bar]="value"> ... </a>
该代码中存在引号,不会通过编译器编译,而如果我们项目中确实需要这样的代码,我们可以使用vue中的计算属性(computed)来替换复杂的表达式。计算属性在后面将会解释。
同时,需要注意的是,在前文vue起步
中的DOM 中的根组件模板板块
,我们知道一种不使用vue组件,而是使用HTML文件里的模板
,忘记的话可以移步至vue起步博文
中回顾。在这种情况下,我们要避免使用大写字母
,因为浏览器会把他强制转换为小写
,例如下面这个代码:
<a :[someAttr]="value"> ... </a>
该代码中someAttr
会被转换为someattr
,而如果我们的vue实例中没有someattr这个属性,那么这段代码将无法正常工作。