乘着下班之前再来一篇，不知道为什么就是托着不让我走😔
1.插值
插入文本
就是简单的innerHTML的值绑定
<span>Message: {{ msg }}</span>
就是当Vue实例的msg属性发生变化的时候界面上的显示内容也会发生相应的变化。
也可以让界面上的值只绑定一次，后面msg变化时不随着改变。
<span v-once>This will never change: {{ msg }}</span>
加一个 v-once 指令即可
插入HTML节点
<div v-html="rawHtml"></div>
当指令执行结束后 div 会被替换成 rawHtml
插入属性
<div v-bind:id="dynamicId"></div>
同样适用于BOOL类型的值
<button v-bind:disabled="isButtonDisabled">Button</button>
插入JavaScript表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
下面两种写法是错的
<!-- 这是声明变量，不是表达式-->
{{ var a = 1 }}
<!--控制流语句不会工作，适用三元表达式 -->
{{ if (ok) { return message } }}
要注意的是只能访问到系统自带的全局数据，例如 split() reverse() Date() Math(),不能在表达式中访问自定义的全局变量
2.指令
Vue.js的指令都是以 v- 开头的，指令的作用是当和DOM相关的数据发生变化的时候对DOM进行的相应的操作。
例如：
<p v-if="seen">Now you see me</p>
当 seen == true 的时候 p 标签会被加载到父标签。反之就会从父标签删除。
指令传入参数
有些指令需要传入参数，参数加载" : " 后面例如：
<a v-bind:href="url"></a>
这里的表示的是 a 标签的 herf 属性会随着 url 的值变化而变化。使用 v-bind 可以很好的将系统的属性和Vue的变量绑定在一起。
另一个例子🌰
<a v-on:click="doSomething">
这里是将 a 标签的点击事件和 Vue 的 doSomething 函数绑定在一起
修饰符
修饰符是以 " . " 表示的。表示指令是以一种特殊的方式绑定的。
例如：
<form v-on:submit.prevent="onSubmit"></form>
.prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
.prevent 告诉 v-on 当submit被触发的时候调用 onSubmit 函数的同时调用 event.preventDefault()
3.过滤器
过滤器用 " | " 表示，常常放在JavaScript末尾。只能使用在 "{{}}" 和 v-bind 指令中
例子🌰
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
上面怎么理解，我现在就跟你讲讲
过滤器是一种接受一个值，返给你一个值的存在
例如：
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
" | " 前面一个是参数，后面一个数过滤器
{{ message | capitalize }}例子中 message 是传入的参数， capitalize 是表示过滤器
过滤器是可以连着起来玩得😀。例如：
{{ message | filterA | filterB }}
可以这样玩，完全是取决于过滤器是一种有输入有输出的特点。
解释一下上面的那个例子🌰吧，把message输入到filterA,产生一个结果，然后把结果输入到filterB，最后得到是最终结果。
filter 是一个JavaScript的函数，所以可以引用参数
例如：
{{ message | filterA('arg1', arg2) }}
message是filterA的第一个参数，字符串'arg1'是第二个参数，变量arg2是第三个参数。
4.简写
Vue.js给两个常用的指令提供了简写
例子🌰
v-bind
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
v-on
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
总结：
😁又下班啦，好吓人刚刚有个上级突然来问我问题。。。
网友评论