vue基礎

hello Vue.

模板語法-文本語法

文本

模板語法-屬性

使用 JavaScript 運算式

條件指令 v-if

v-show指令

串列渲染

基本用法

物件回圈輸出

key

事件處理方法

事件修飾符

偵聽器

物件變化監聽

自定義指令

vue基礎

Vue.js的定位是一個漸進式框架前端三大mvvm框架 vue , react ,angular

Vue.js受到越來越多關注的一個重要原因：你只需要具備基本的HTML/JavaScript/CSS 基礎，就可以快速上手，讓你用上這些現代Web開發中的先進技術來提高你的生產力：

vue官網

與Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）

hello Vue.

1.引入vue.js庫

<script src="vue.js"></script>

2.創建vue實體

<script>
   new Vue({
      el：'#app',
      data: {msg:'Hello,Vue.js 2'}
   })
</script>

3.完整html導

<div id="app">
   hello Vue!
</div>

4.完整的helloWorld代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

模板語法-文本語法

文本

資料系結最常見的形式就是使用{{}}語法 (雙大括號)

<span> {{message}}</span>

也可以使用v-text方法

<span v-text="message"></span>

html文本

雙大括號會將資料解釋為普通文本，而非 HTML 代碼，為了輸出真正的 HTML，你需要使用 v-html

<div id="app">
       <div v-html="rawMsg"></div>
   </div>
   <script type="text/javascript">
       var app=new Vue({
           el:'#app',
           data:{
               message:'hello Vue!',
               rawMsg:'<h1>你好vue</h1>'
           }
       })
   </script>

模板語法-屬性

給html標簽系結一個屬性值應該使用 v-bind:屬性名稱

以下代碼給h1系結一個新的id和title屬性

<div id="app">
  <h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快樂的標題</h1>
</div>
 <script type="text/javascript">
     var app=new Vue({
         el:'#app',
         data:{
             dyId:'best',
             dyTitle:'看見我的人一生平安'
         }
     })
 </script>

渲染結果是：

<h1 id="best" title="花開富貴邀請您加入相親相愛一家人">看到我的人一生平安</h1>

系結屬性也是可以直接簡寫：

<h1 :id="dyId" :title="dyTitle">我是一行快樂的標題</h1>

使用 JavaScript 運算式

在我們的模板中，我們一直都只系結簡單的屬性鍵值，但實際上，對于所有的資料系結，Vue.js 都提供了完全的 JavaScript 運算式支持，

{{4+6}} 
{{ ok ? 'YES' : 'NO' }}
{{['飛飛','馬飛飛'].join('--')}}
<!-- 這是陳述句，不是運算式 -->
{{ var a = 1 }}
 
<!-- 流控制也不會生效，請使用三元運算式 -->
{{ if (ok) { return message } }}

條件指令 v-if

指令用于條件性地渲染一塊內容，這塊內容只會在指令的運算式回傳真值的時候被渲染，

<div v-if="isLogin">你好，同學！</div>

<div id="app">
    <div v-if="isLogin">你好：同學</div>
    <div v-else="">請登錄后操作</div>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
           isLogin:false
        }
    })
</script>

v-show指令

另一個用于根據條件展示元素的選項是 v-show 指令

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

v-show 只是調整css中display屬性，DOM已經加載，只是CSS控制沒有顯示出來，

v-if：判斷是否加載，可以減輕服務器的壓力，在需要時加載，
v-show：調整css dispaly屬性，可以使客戶端操作更加流暢，

串列渲染

我們用 v-for 指令根據一組陣列的選項串列進行渲染，v-for 指令需要使用 item in items 形式的特殊語法，items 是源資料陣列并且 item 是陣列元素迭代的別名，

基本用法

<li v-for="item in items">
   {{item}}
</li>


var app=new Vue({
  el:'#app',
  data:{
      items:['angular','react','vue',jquery]
  }
})

物件回圈輸出

<li v-for="item in items">
   {{item.name}}--{{item.age}}
</li>
var app=new Vue({
  el:'#app',
  data:{
      items:[
         {name:"feifei", age:28},
         {name:"mf", age:22},
         {name:"馬飛飛", age:20},
      ]
  }
})

key

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性，理想的 key 值是每項都有的唯一 id，

<li v-for="(item,index) in items" :key="index">
   {{item}}
</li>
var app=new Vue({
  el:'#app',
  data:{
      items:['飛飛','馬飛飛','feifei','mafei']
  }
})

如果不系結tip 重復的'mumu' 再串列回圈在串列回圈會報錯

監聽事件

可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼，

<div id="app">
<button v-on:click="counter += 1">加 1</button>
<p>按鈕被點擊了 {{ counter }}次.</p>
</div>

var example1 = new Vue({
el: '#ap',
  data: {
    counter: 0
  }
})

事件處理方法

<div id="app">        
   <button v-on:click="greet">問候</button>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         name:'Vue.js'
      },
      methods:{
         greet:function(event){
            // 'this' 在方法里指向當前 Vue 實體
            alert('你好'+this.name+'!');
            // 'even' 是元生 DOM事件
            if(event){
               alert(event.target.tagName)
            }
 
         }
      }
   })
   // 也可以用JavaScript 直接呼叫
   app.greet();
</script>

事件修飾符

在事件處理程式中呼叫 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符，之前提過，修飾符是由點開頭的指令后綴來表示的，

.stop
.prevent
.once

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再多載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
  
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

偵聽器

Vue 通過 watch 來回應資料的變化，當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的，

<div id="app">
    <p>計數器: {{ num }}</p>
    <button @click="num++">點我</button>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: 1
    },
    watch:{
      'num': function(nval, oval) {
        console.log('num變化 :' + oval + ' 變為 ' + nval + '!');
      },     
    }
});
 
</script>

物件變化監聽

我們需要監聽物件的屬性值是否發生改變用

<div id="app">
<p>計數器: {{ num }}</p>
<button @click="num.age++">點我</button>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: {age:1}
    },
    watch:{
      'num':{
        handler:function(nval, oval) {
          console.log('num變化 :' + oval.age + ' 變為 ' + nval.age + '!')
          },
        deep:true     
        }
    }
});
</script>

自定義指令

除了默認設定的核心指令( v-model 和 v-show ), Vue 也允許注冊自定義指令，下面我們注冊一個全域指令 v-focus, 該指令的功能是在頁面加載時，元素獲得焦點

<div id="app">
  <p>頁面載入時，input 元素自動獲取焦點：</p>
  <input v-focus="">
</div>
  
<script>
// 創建根實體
new Vue({
  el: '#app',
  directives: {
    // 注冊一個區域的自定義指令 v-focus
    focus: {
      // 指令的定義
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

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

標籤：其他

上一篇：JavaScript學習筆記（1）

下一篇：事件回圈（搞懂異步各任務的執行順序）

Vue基礎知識(1)

vue基礎

hello Vue.

模板語法-文本語法

文本

模板語法-屬性

使用 JavaScript 運算式

條件指令 v-if

v-show指令

串列渲染

基本用法

物件回圈輸出

key

事件處理方法

事件修飾符

偵聽器

物件變化監聽

自定義指令