记录继续vue的学习
Mustache
<span v-bind:title="msg">
{{ message }}
</span>
数据绑定“Mustache”语法 (双大括号{{xxx}}) 的文本插值,就了解一下他的名字Mustache
<span v-bind:title="msg" v-once>
{{ message }}
</span>
如果在span上加了v-once属性,那么Mustache的插值只能被执行一次,包括该节点上的其他Mustache,如果span节点里面还嵌套着其他的节点,也是只能被执行一次
Mustache中可以出现javasricprt的表达式,例如: {{num+1}},{{a==1?b:c}},{{str.split(',').reverse().join(',')}}<=这好像是js的函数,反正这些都是支持的,不可以在Mustache中访问定义的全局变量,可以访问全局变量的一个白名单(这句还不懂:mark,回补)
v-html 对html输入真正的html,但是很不安全,了解即可
v-bind v-on
Mustache语法不能作用在HTML特性上,指南是这么说,但觉得有点瑕疵,个人更习惯的叫他标签的属性,比如<div xxx="">中的xxx
使用v-bind,v-on等指令来控制,v-bind 缩写成 :XXX ,v-on 缩写成 @XXX ,这两个指令是最频繁使用的,所以特例设置了简写
比如 v-bind : href --> :href , v-on : click --> @click
计算属性
还是围绕着Mustache,说是如果把表达式都写在Mustache中,会造成一长串,不容易维护,然后设计了一个计算属性 computed,用来计算复杂的逻辑,得到一个结果,然后再Mustache插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 第一步 引入环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 第二步 创建一个div -->
<div id="app">
<span v-bind:title="msg" v-once>
{{ message }}
<p>
{{getMsg}}
</p>
</span>
</div>
</body>
<!-- 第三步 Dom数据渲染 -->
<script>
var app=new Vue({
el: '#app',
data: {
message: 'data-message',
},
methods:{
getMessage(){
return this.message+"hi"
}
},
computed:{
getMsg(){
return this.message+"hello"
}
}
})
</script>
</html>
会发现使用methods和computed的时候,可以获取同样的效果,那么他们的区别是什么,了解到计算属性是基于他们的依赖进行缓存,不是很明白,但是缓存就是为了方便,速度,后面知道,刚才计算的getMsg(),依赖于message属性,只要该属性不发生变化,他的值就会被缓存,每次就可以不执行getMsg,直接缓存取值即可,methods里面的函数,每次渲染都会重新执行一次,对比之下就可以知道适当的不同环境使用不同的属性
侦听属性指南中有说到 watch ,然而我并不知道是什么,感觉像是监听回调检查一类的属性,用计算属性方式来代替重复性的侦听属性
对于getter和setter的属性,作为后端的人来说还是很熟悉的,先学到这里,明天继续,下班了..~
---------------------------------------------------------------------------------------