最厲害的VUE指令,看完你就會了!!!

語言: CN / TW / HK

前言

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>

提示:新人小白一枚,如有不對請多多指教!希望給您帶來幫助!多謝。