记录继续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的属性,作为后端的人来说还是很熟悉的,先学到这里,明天继续,下班了..~

---------------------------------------------------------------------------------------

Vue 初学指南二

Mustache

v-bind v-on

计算属性

猜你喜欢

Vue 初学指南 二

Mustache

v-bind v-on

计算属性

猜你喜欢

Vue 初学指南二