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的屬性,做爲後端的人來講仍是很熟悉的,先學到這裏,明天繼續,下班了..~

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