vue.js基礎(chǔ)

使用vue,js第一步先是安裝(http://cn.vuejs.org/)
在官方文檔中就可以直接下載并用 <script>標(biāo)簽引入，記住本地的Vue.js的位置，通過會被注冊為一個全局變量。如：

     <script type="text/javascript" src="D:\軟件小組/vue.js"></script>
vue介紹

vue是一套構(gòu)建用戶界面的 漸進(jìn)式框架，Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

最基本的實(shí)現(xiàn)方法：

      <div id="app" >
          {{message}}        //輸出的純文本用雙大括號括著
      </div>
      <script type="text/javascript" >
        var vm=new Vue({
              el:'#app',    //元素的id
              data:{         //元素包含的數(shù)據(jù)
                  message:"good"
                  }
             })

Paste_Image.png

可以通過控制臺console改變數(shù)據(jù)
這樣的話可以多次改變數(shù)據(jù)，而通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會更新，另外一種就是在{{message}}改為{{*message}},同樣也只能賦值一次

    <div id="app" >
      {{*message}}
    </div>
    <script type="text/javascript" >
      var vm=new Vue({
      el:'#app',
      data:{
        message:"hello"
      }
  })
      vm.message="wonderful";
    </script>        //hello

如果要輸出真正的 HTML ，你需要使用v-html指令：

      <div id="app" >
        <div v-html="name"></div> //name為HTML代碼，直接可以輸出不需要雙大括號
      </div>
      <script type="text/javascript" >
          var vm=new Vue({
          el:'#app',
          data:{
          name:"Amy",
            }
        })
      </script>

注意，你不能使用 v-html來復(fù)合局部模板，因?yàn)?Vue 不是基于字符串的模板引擎。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元。

你的站點(diǎn)上動態(tài)渲染的任意 HTML 可能會非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值，絕不要對用戶提供的內(nèi)容插值。*

條件與循環(huán)
    <div id="app" >
        <p v-if="look">{{message}}       //v-if 語句的形式，通過look的布爾值決定是否執(zhí)行
        </p>
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
        el:'#app',
        data:{
          message:"good",
          look:true
              }
        })         //good

在通過控制臺輸出vm.look=false使得good的輸出消失

循環(huán)：

    <div id="app" >
        <div v-if="look" >
          <p v-for="item in items">{{item.message}}     相當(dāng)于 i in array的循環(huán)
          </p>
      </div>
    </div>
    <script type="text/javascript" >
      var vm=new Vue({
      el:'#app',
      data:{
         items:[               //數(shù)組和對象的要小心這些括號
              {message:"good"},
             {message:"study"},
             {message:"children"}
                  ],
        look:true
            }
         })

    </script>

Paste_Image.png

還可以在控制臺上增添新的message值

     vm.items.push({message:"better"})
Paste_Image.png
事件

v-on事件

     <div id="app" >
        <button v-on:click="hello">Hello</button>   v-on進(jìn)行連接click點(diǎn)擊函數(shù)
    </div>
    <script type="text/javascript" >
      var vm=new Vue({
       el:'#app',
      methods:{            //方法
       hello:function() {
         alert("hey,girl");
                        }
               }
        })

    </script>
Paste_Image.png


<a v-on:click="doSomething"></a>

<a @click="doSomething"></a>

Vue 也提供了 v-model 指令，它使得在表單輸入和應(yīng)用狀態(tài)中做雙向數(shù)據(jù)綁定變得非常輕巧。如：

    <div id="app" >
        {{message}}
        {{name}}
        <br>
        <input v-model="name">
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
        el:'#app',
        data:{
          message:"hello",
          name:''
        }
      })
      </script>
Paste_Image.png

v-bind指令綁定class

    <style type="text/css">
      .active{
          color:red;
        }
      .static{
          background:green;
        }
    </style>
    <div id="app" v-bind:class="{active:isActive,static:isStatic}">
        {{message}}
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
               el:'#app',
               data:{
                   isActive:true,
                   message:'beauty',
                   isStatic:true
                 },  
        })//class屬性的bind的

：

Paste_Image.png

//綁定Style屬性

    <style type="text/css">
      .active{
      font-family:'Comic Sans Ms';
      background:blue;
      }  
  </style>
    <div id="app">
        <div v-bind:class="{active:isActive}">
            <div v-bind:style="{color:activeColor,fontSize:fontSize}">
            {{message}}
            </div>
        </div>
    </div>
<script type="text/javascript" >

  var vm=new Vue({
       el:'#app',
       data:{
       activeColor:'orange',
       message:"dodo",
       isActive:true,
       fontSize:'50',
     }
})

Paste_Image.png

//如果是想同時(shí)綁定兩個東西，應(yīng)該要多個包裝，否則就會沒有什么效果直接忽略后面的綁定，例如不能在同一個div中用bind綁定兩個
bind語法

<a v-bind:href="url"></a>

<a :href="url"></a>

計(jì)算屬性

在模板中綁定表達(dá)式是非常便利的，但是它們實(shí)際上只用于簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護(hù)。如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>

computed例子：

 <div id="app">
   <p>{{message}}</p>
   <p>{{reverseMessage}}</p>
 </div>
<script type="text/javascript" >
    var vm=new Vue({
       el:'#app',
       data:{
       message:'live'

       },
       computed:{
       reverseMessage:function() {
       return this.message.split('').reverse().join('')
       }
       }
    })

結(jié)果：
live
evil
這個目的同樣可以用methods的形式實(shí)現(xiàn)，但是對于methods，是每次執(zhí)行都會重新調(diào)用一次函數(shù)，再從頭開始，而對于計(jì)算屬性來說，是基于它的依賴緩存，也就是說只要message的值不變，計(jì)算屬性會一下子就出現(xiàn)之前出現(xiàn)的結(jié)果，而method又要經(jīng)過冗長的過程

Vue.js 提供了一個方法 $watch ，它用于觀察 Vue 實(shí)例上的數(shù)據(jù)變動

    computed: {
      classObject:function() {
        return {
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type==='fatal',    //這是什么意思
            }
        }
    }
v-if條件渲染
    <div id="app">
    <div v-if="ok">{{message}}</div>
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
         el:'#app',
         data:{
             message:"dodo",
             ok:true
         }
    })
  </script>   //注意的是v-if不能直接寫在根元素上
template方法

<template>元素當(dāng)做包裝元素，并在上面使用 v-if，可以用來切換多個元素

    <div id="app" > 
      <template v-if="ok">
        <div  v-bind:style="{color:activeColor}">
          <h1>Title</h1>
          <p>Paragraph</p>
        </div>
      </template>
      {{message}}
     </div>
  <script type="text/javascript" >
      var vm=new Vue({
           el:'#app',
           data:{
           activeColor:'orange',
           message:"dodo",
           ok:true
         }
    })
  </script>
Paste_Image.png

可以用 v-else指令給 v-if 或 v-show添加一個 “else” 塊：
v-else元素必須緊跟在 v-if或 v-show 元素的后面——否則它不能被識別

  <div id="app" > 
    <template v-else>
        {{message}}
    </template>
  </div>
  <script type="text/javascript" >
      var vm=new Vue({
           el:'#app',
           data:{
               activeColor:'orange',
               message:"dodo",
               ok:true
           }
      })           //無效果

v-show另一個根據(jù)條件展示元素的選項(xiàng)是 v-show 指令
用法大體上一樣：

 <h1 v-show="ok">Hello!</h1>

與v-if不同的是有 v-show的元素會始終渲染并保持在 DOM 中。v-show
是簡單的切換元素的 CSS 屬性 display

注意： v-show不支持 <template>語法，但是不會報(bào)錯。

template v-for句式

    <div id="app" > 
      <ul>
         <template v-for="item in items">
             <li>{{item.message}}</li>
             <li v-bind:class="{active:isActive}"></li>
        </template>
      </ul>
    </div>
  <script type="text/javascript" >
        var vm=new Vue({
            el:'#app',
             data:{
                 isActive:true,
                 activeColor:'orange',
                 items:[
                    {message:"dodo"},
                    {message:"foolish"}
                   ]
               }
          })
    </script>
Paste_Image.png

列表渲染

      <style type="text/css">
        .active{
             font-family:'Comic Sans Ms';
             background:blue;
        }
      </style>
    <div id="app" > 
        <ul>
             <template v-for="(value,key) in items">    //遍歷
                 <li v-bind:class="{active:isActive}">      //綁定class
                   {{$index}}.{{key}}:{{value}}</li>        //輸出值
             </template>
        </ul>
      </div>
  <script type="text/javascript" >
       var vm=new Vue({
          el:'#app',
          data:{
             isActive:true,
             activeColor:'orange',
             items:{
                  wonder:"dodo",
                  message:"foolish"
                 }
             }
         })  
</script>
Paste_Image.png
    <div id="app" v-for="item in items">
        {{item.message}}
    </div>
    <script type="text/javascript" >
          var vm=new Vue({
              el:'#app',
              data:{
              items:[{message:"baby"}]
              }
          })
      </script>

結(jié)果：
baby
在控制臺輸入

    vm.items.push({message:"good"})
Paste_Image.png

再輸入

    vm.items.pop()

輸出：


Paste_Image.png

數(shù)組的變異方法手段還有

  • push()
  • pop()
  • shift() //從頭部開始刪除元素
  • unshift() //從頭部開始增加元素
  • splice()
  • sort()
  • reverse()

#########注意

由于 JavaScript 的限制， Vue 不能檢測以下變動的數(shù)組：

  • 當(dāng)你直接設(shè)置一個項(xiàng)的索引時(shí)，例如：
    vm.items[indexOfItem] = newValue
  • 當(dāng)你修改數(shù)組的長度時(shí)，例如：
    vm.items.length = newLength

解決第一個問題的方法：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

    var vm=new Vue({
          el:'#app',
          data:{
            items:[{message:"baby"},
                   {message:"hello"},
                   {message:"good morning"}
                  ]
              }
        })
    vm.items.splice(2,1,{message:'beauty'})  //改變數(shù)組中特定位置元素的值
Paste_Image.png

解決第二個問題的方法：

example1.items.splice(newLength)

對于所有的數(shù)據(jù)綁定， Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。然而這些表達(dá)式會在所屬 Vue 實(shí)例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達(dá)式，語句不會解析

    {{number+1}}    <!--把語句包含在雙大括號內(nèi)--!>

    <!-- 這是語句，不是表達(dá)式 -->
    {{ var a = 1 }}

    <!-- 流控制也不會生效，請使用三元表達(dá)式 -->
    {{ if (ok) { return message } }}
事件修飾符

通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符,處理 DOM 事件細(xì)節(jié)

  • stop
  • self
  • prevent
  • capture

  • <a v-on:click.stop="doThis"></a>

  • <form v-on:submit.prevent="onSubmit"></form>

  • <a v-on:click.stop.prevent="doThat"></a>

  • <form v-on:submit.prevent></form>

  • <div v-on:click.capture="doThis">...</div>

  • <div v-on:click.self="doThat">...</div>

#######按鍵修飾符
最常用例子：

    <input v-on:keyup.enter="submit">//用回車鍵進(jìn)行操作提交

其他的常用鍵

  • enter
  • tab
  • delete
  • esc
  • space
  • up
  • down
  • left
  • right
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容