Vue實例與模板語法

時間 2019-11-17

標籤 vue 實例模板語法简体版

原文原文鏈接

VUE基礎使用方法

1、安裝

一、NPMhtml

在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。vue
```
# 最新穩定版
$ npm install vue
```

二、CDNpython

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

三、將vue.js下載到當前項目，並經過<script>標籤引入，Vue 會被註冊爲一個全局變量。webpack

2、vue.js介紹

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。ios

3、Vue實例

一、建立一個Vue實例git

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：github

var vm = new Vue({
  // 選項
})

一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成。web

二、數據與方法ajax

//2.實例化對象
new Vue({
    el:'#app', //綁定標籤
    data:{
        //數據屬性，在vue的根組件中，data對應的能夠是一個對象，也能夠是一個方法，可是在其餘組件中只能是一個方法，而且返回一個實例對象
        msg:'黃瓜',
        person:{
            name:'wusir'
       },
        msg2:'hello Vue'
   }
});

三、實例生命週期鉤子npm

beforeCreate
created 組件建立完成，能夠發起ajax（XMLHttpRequest 簡稱XHR axios fetch $.ajax()）請求,實現數據驅動視圖
beforeMount
mounted DOM掛載完成
beforeUpdate 獲取原始DOM
updated 獲取更新以後的DOM
beforeDestory 組件銷燬以前
destoryed 組件銷燬以後
activated 激活當前組件 vue提供的內置組件<keep-alive></keep-alive>
deactivated 停用當前組件

直接上詳細代碼

 let Test = {
       data() {
           return {
               msg: 'alex',
               count:0,
               timer:null
           }
       },
       template: `
               <div id="test">
                    <div id="box">{{ msg }}</div>
                    <p>{{ count }}</p>
                    <button @click = 'change'>修改</button>
               </div>
           `,
       methods: {
           change() {
               this.msg = 'wusir';
               //querySelector爲通用的標籤選擇器
               document.querySelector('#box').style.color = 'red';
           }
       },
       beforeCreate() {

           // 組件建立以前,取不到data中的數據
           console.log('組件建立以前', this.msg);

       },
       created() {
//               ********最重要
           // 組件建立以後
           this.timer = setInterval(()=>{
               this.count++
           },1000);

           // 使用該組件，就會觸發以上的鉤子函數，
           // created中能夠操做數據，發送ajax，而且能夠實現數據驅動視圖
           // 應用：發送ajax請求
           console.log('組件建立以後', this.msg);

       },
       beforeMount() {

           // 裝載數據到DOM以前會調用,此時DOM尚未被渲染,mount爲掛載的意思

           console.log(document.getElementById('app'));


       },
       mounted() {
//           *******很重要*****

           // 這個地方能夠操做DOM,掛載子組件以後,DOM已經渲染完畢

           // 裝載數據到DOM以後會調用 能夠獲取到真實存在的DOM元素，vue操做之後的DOM

           console.log(document.getElementById('app'));
           //jsDOM操做

       },
       beforeUpdate() {

           // 在更新以前，調用此鉤子，應用：獲取原始的DOM,只有在內容發生更新或者改變時纔會調用此方法

           console.log(document.getElementById('app').innerHTML);

       },
       updated() {

           // 在更新以後，調用此鉤子，應用：獲取最新的DOM

           console.log(document.getElementById('app').innerHTML);

       },
       beforeDestroy() {
           //組件在銷燬以前調用,勇v-if控制組件的建立和銷燬
           console.log('beforeDestroy');

       },
       destroyed() {
           //注意： 定時器的銷燬 要在此方法中處理
           console.log('destroyed',this.timer);
           clearInterval(this.timer);

       },
       activated(){

           //與緩存有關
           console.log('組件被激活了');
       },

       deactivated(){
           console.log('組件被停用了');
       }
   };
   let App = {
       data() {
           return {
               isShow:true
           }
       },
       //將子組件放在keep-alive標籤中,當v-if=True時,組件被激活,當v-if=False時,組件被停用,但該組件保存在緩存中,
       //能保留住緩存以前的狀態,激活與停用此時調用activated方法和deactivated方法
       template: `
               <div>
                   <keep-alive>
                     <Test  v-if="isShow"/>
                  </keep-alive>
                    <button @click = 'clickHandler'>改變test組件的生死</button>
               </div>
           `,
       methods:{
         clickHandler(){
             this.isShow = !this.isShow; //取反
         }
       },
       components: {
           Test
       }

   }
   new Vue({
       el: '#app',
       data() {
           return {}
       },
       components: {
           App
       }

   })

4、模板語法

一、文本{{ 雙大括號}}

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

二、HTML

雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>好好學習，每天向上</h1>'
 }
})
</script>

三、屬性

HTML 屬性中的值應使用 v-bind 指令。如下實例判斷 class1 的值，若是爲 true 使用 class1 類的樣式，不然不使用該類：

<div id="app">
  <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
   v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
 }
});
</script>

四、表達式

Vue.js 都提供了徹底的 JavaScript 表達式支持。

<div id="app">
   {{5+5}}<br>
   {{ ok ? 'YES' : 'NO' }}<br>
   {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">python</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
 }
})
</script>

五、指令

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

<div id="app">
    <p v-if="seen">如今你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
 }
})
</script>

這裏， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

5.一、參數

參數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：

<div id="app">
    <pre><a v-bind:href="url">百度一下</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
 }
})
</script>

在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

另外一個例子是 v-on 指令，它用於監聽 DOM 事件：

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

在這裏參數是監聽的事件名。

5.2修飾符

修飾符是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

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

六、雙向數據綁定（v-model）

在 input 輸入框中咱們可使用 v-model 指令來實現雙向數據綁定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '請輸入用戶名：'
 }
})
</script>

你能夠用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

按鈕的事件咱們可使用 v-on 監聽事件，並對用戶的輸入進行響應。

如下實例在用戶點擊按鈕後對字符串進行反轉操做：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反轉字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
 },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
   }
 }
})
</script>

6.1修飾符

.lazy .number .trim

七、過濾器

Vue.js 容許你自定義過濾器，被用做一些常見的文本格式化。由"管道符"指示, 格式以下：

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

過濾器函數接受表達式的值做爲第一個參數。

7.1 局部過濾器

如下實例對輸入的字符串第一個字母轉爲大寫：

<div id="app">
 {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
 },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
   }
 }
})
</script>

過濾器能夠串聯：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函數，所以能夠接受參數：

{{ message | filterA('arg1', arg2) }}

這裏，message 是第一個參數，字符串 'arg1' 將傳給過濾器做爲第二個參數， arg2 表達式的值將被求值而後傳給過濾器做爲第三個參數。

7.2 全局過濾器

 <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        //Vue聲明的過濾器爲單數,爲全局過濾器,第一個參數爲過濾器的名字,第二個參數爲過濾器要處理的邏輯代碼
        //全局過濾器能夠在頁面的任意位置使用
        Vue.filter('myTime',function (val,formatStr) {
            return moment(val).format(formatStr)
       })
        let App = {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
               }
           },
            template:`

               <div>我是一個APP {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>

               </div>
            `,
       }
        new Vue({
            el:'#app',
            data(){
                return {

               }
           },
            components:{
                App
           }

       })

    </script>

八、縮寫

v-bind 縮寫

Vue.js 爲兩個最爲經常使用的指令提供了特別的縮寫：

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

相關標籤/搜索

每日一句

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