vue的基本代碼以及常見指令

時間 2019-12-09

標籤 vue 基本代碼以及常見指令简体版

原文原文鏈接

當咱們在頁面當中引入vue.js的時候，這時候咱們就能夠調用vue的構造函數，來建立一個vue的實例，vue使用的基本代碼結構以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <!-- view視圖 -->
    <div id="id">
        <p>{{msg}}</p>
    </div>
    <script>
        // 當引入vue.js，頁面就有一個vue的構造函數
        // view-model
        var vm=new Vue({
            el:'#id',
            // m模塊，存儲數據
            data:{
                msg:'哈哈哈'
            }
        })
        // vue不建議咱們直接操做dom元素，而是交給vue實例
    </script>
</body>
</html>

Vue的實例就是view-model部分，而其中的data就屬於model部分，被vue實例綁定的html區域，則是view部分vue

上面例子當中，{{}}這個是插值表達式，咱們能夠將data中定義的數據插入當中，這樣頁面就會在對應的位置，渲染出變量的值，在變量先後，咱們能夠添加任意的字符串，或是表達式dom

而常見的vue指令有v-text，v-bind，v-html，v-on函數

他們的使用語法都是在綁定範圍內的標籤中用於綁定標籤屬性或定義標籤內的內容,例如ui

<p v-text='msg'></p>
<p v-html='h'></p>
<input type="button" v-bind:value="value" v-bind:title="title" v-on:click="show">

其中，v-text和v-html都是會將所賦值的變量的內容渲染到對應的標籤中去，而且會覆蓋掉標籤中所寫有的內容，可是v-html能寫入html代碼並解析渲染spa

v-cloak指令能夠用來解決閃爍問題，閃爍問題就是指在網速很慢的狀況下，vue相關文件未徹底加載，此時html的內容就已經被渲染出來，這是插值表達式{{}}中的變量名就會直接顯示出來，等到文件加載完畢，插值表達式纔會顯示本應正確顯示的內容code

給具備插值表達式的標籤添加v-cloak指令，而後在style中使用屬性選擇器，加上display ：none就能夠解決問題htm

事件修飾符：blog

.prevent ,.stop,.captrue,.once,.self事件

.prevent就是用來阻止默認事件的，好比a標籤的跳轉

.stop就是用來阻止事件冒泡

.self則是表示元素的事件沒法經過冒泡或者捕獲觸發

.once表示元素的修飾符只能觸發一次

.captrue則將元素的事件冒泡改成事件捕獲

v-if和v-show用於判斷某個標籤是否應該被渲染或者是否應該被顯示

v-if是決定這個元素是否被渲染，所以對於可能不會出如今用戶面前的標籤，建議使用v-if

v-show是決定這個元素是否被顯示，所以對於頻繁切換顯示狀態的元素，建議使用v-show

v-model指令，v-model和上面的全部指令不一樣，它是雙向數據綁定的指令，常和表單元素結合使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。