Vue 初学指南二

时间 2019-11-17

标签 vue 初学指南繁體版

原文原文链接

记录继续vue的学习html

Mustache

<span v-bind:title="msg">
   {{ message }}
</span>

数据绑定“Mustache”语法 (双大括号{{xxx}}) 的文本插值,就了解一下他的名字Mustachevue

<span v-bind:title="msg" v-once>
   {{ message }}
</span>

若是在span上加了v-once属性,那么Mustache的插值只能被执行一次,包括该节点上的其余Mustache,若是span节点里面还嵌套着其余的节点,也是只能被执行一次java

Mustache中能够出现javasricprt的表达式,例如: {{num+1}},{{a==1?b:c}},{{str.split(',').reverse().join(',')}}<=这好像是js的函数,反正这些都是支持的,不能够在Mustache中访问定义的全局变量,能够访问全局变量的一个白名单(这句还不懂:mark,回补)npm

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 --> @clickapp

计算属性

仍是围绕着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 初学指南二