前言

Vue.js 自身不是一個全能框架–它只聚焦于視圖層，因此它非常容易學習，非常容易與其它庫或已有專案整合，另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用，

一、vue.js是什么

Vue.js（讀音 /vju?/, 類似于 view）是一套構建用戶界面的漸進式框架，

與其它大型框架不同的是，Vue 的核心庫只關注視圖層，采用自底向上逐層應用的設計，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，

Vue 的目標是通過盡可能簡單的 API 實作回應的資料系結和組合的視圖組件，

提示：以下是本篇文章正文內容，下面案例可供參考

二、宣告式渲染

Vue.js 的核心是一個允許采用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統：

代碼如下（示例）：

<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>

三、什么是指令

在vue中提供了一些對于頁面 + 資料的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
類似于html頁面中的屬性 `
比如在angular中以ng-xxx開頭的就叫做指令
在vue中以v-xxx開頭的就叫做指令
指令中封裝了一些DOM行為, 結合屬性作為一個暗號, 暗號有對應的值,根據不同的值，框架會進行相關DOM操作的系結

1、v-clock的使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 對于MVVM的理解 -->
    <!-- 解放DOM -->
    <!-- 指令：就是vuejs為我們提供的方便操作的自定義屬性 -->

    <!-- VUE在mvvm的基礎上創立使用  M:model資料   V：view頁面顯示 -->
    <!-- View層，頁面顯示層 -->
    <div id="app">
        <!-- 1.在使用模板語法的標簽上添加v-cloak的指令 -->
        <p v-cloak>{{msg+1+1+1+1+1+1+1+1+1+1+1+1}}</p>
        <!-- 模板語法 -->
    </div>
    <!-- View end -->

    <script src="./js/vue.min.js"></script>
    <script>
        //創建一個vue環境，創建一個VM層
        let vm = new Vue({
            el: '#app',
            data: {//Model層
                msg: 'Hello world'
            }
        })
    </script>
</body>

2、v-text的使用

<body>
    <!-- 指令：標簽的自定義屬性 -->
    <div id="app">
        <!-- {{userName}} -->
        <div v-text="username"></div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>

3、v-html的使用

<body>
    <div id="app">
        <!-- {{myDiv}} -->
        <div v-html="myDiv"></div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                myDiv:'<h1>Hi</h1>'
            }
        })
    </script>
</body>

4、v-pre的使用

<body>
    
    <div class="wsx">
        <p v-pre>{{say}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'.wsx',
            data:{
                say:'ALL the best!'
            }
        })
    </script>
</body>

5、v-once的使用

<body>
    <div id="app">
        <p v-once>{{msg}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'最初的夢想：宇航員'
            },
            mounted(){
                this.msg='后來我成為了火箭工程編譯工程師'
            }
        })
    </script>
</body>

6、v-model的使用

<body>
    <!-- 雙向資料系結 -->
    <div id="app">
        <input type="text" value="" v-model="userName">
        <p>{{userName}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>

7、v-on的使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 解放DOM -->
    <div id="app">
       <input type="text" v-model="num"><br>
       <input type="button" value="+1" v-on:click="add">
       <input type="button" value="-1" @click="sub">
    </div>
    <!-- View end -->

    <script src="./js/vue.min.js"></script>
    <script>
        //創建一個vue環境，創建一個VM層
        new Vue({
            el: '#app',
            data: {
                num:1
            },
            //將num值進行操作
            //methods：用來寫頁面需要的方法的配置項
            methods:{
                add:function(){
                    this.num +=1
                    //this.num = this.num+1
                },
                sub:function(){
                    this.num -=1
                },
            }
        })
    </script>
</body>

8、v-bind的使用

<body>
    <!-- v-bind：用來系結屬性的 可以簡寫為：冒號 -->
    <div id="app">
        <img  v-bind:src="srcUrl" alt="">
        <img :src="srcUrl" alt="">
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                srcUrl:'./img/psb.jpg'
            },//這個逗號不可以省略
            mounted(){
                //this也必須要，它是指VM實體
                this.srcUrl='./img/psb (1).jpg'
            }
        })
    </script>
</body>

提示：新人小白一枚，如有不對請多多指教！希望給您帶來幫助！多謝，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/229827.html

標籤：其他

下一篇：阿里巴巴給全體Java程式員最好的“禮物”：Java架構成長筆記，由淺入深，從0到1

最厲害的VUE指令，看完你就會了！！！

前言