Vue疾速入門

2019年8月24日 116次阅读 来源: 答案在風中飄着

Vue.js 的目的是經由過程盡量簡樸的 API 完成相應的數據綁定和組合的視圖組件。

vue單文件組件

<template>
  <pagetitle  title="vue入門" :sub-title="a"></pagetitle>
</template>
<script>
export default {
  mixins: [],
  comments: {
    // 引入部分組件
  },
  data() {
    return {
      a: ''
    }
  },
  computed: {
    // 盤算屬性 a 變了 newa 才變
     newa() {
        return a * 2;
      }
  },
  created(){
    // 頁面初始化一些處置懲罰
    this.fetchData();
  },
  watch: {
    a(newVal, oldVal) {
      // a轉變后觸發
    }
  },
  methods: {
    fetchData() {
      //要求數據
    }
  }
}
</script>

模板數據綁定

<!-- 文本插值 -->
<span>Message: {{ msg }}</span>
<!-- 單次插值 -->
<span v-once>這個將不會轉變: {{ msg }}</span>

<!-- 原始html -->
<span v-html="rawHtml"></span>

<!-- 特徵 -->
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>

<!-- 表達式 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>


<!-- 過濾器 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

表單輸入綁定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

更多拜見：https://cn.vuejs.org/v2/guide…

computed 與 watch

<template>
  <div id="example">
      a={{a}}, b={{c}}, c={{c()}}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        a: 1,
        d: 1
      }
    },
    computed: {
      // 一個盤算屬性的 getter
      b: function() {
        // this 指向實例
        return this.a + 1;
      },
      c: function() {
        return Data.now();
      },
      e: function() {
        return this.a + 2;
      }
    },
    watch: {
      a: function() {
        this.d = this.a + 2;
      }
    }
  }
</script>

款式 class與style綁定

class

<!-- 對象語法 -->
<div class="static"
  v-bind:class="{ 'class-a': isA, 'class-b': isB}"
>
</div>

<!-- 數組語法 -->
<div v-bind:class="[classA, classB]"></div>
<script type="text/javascript">
  data: {
    classA: 'class-a',
    classB: 'class-b'
  }
</script>

style

<!-- 對象語法 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
<script>
   data: {
     styleObject: {
        color: 'red',
        fontSize: '13px'
     }
   }
</script>
<!-- 數組語法 -->
<div v-bind: style="[baseStyles, overridingStyles]"></div>

前提襯着

<!-- if -->
<h1 v-if="ok"> Yes </h1>

<!-- if else-->
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div

<!-- if else v-else-if-->
div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<!-- template -->
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

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

列表襯着

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({  
   el: '#example-1',  
   data: {   
      items: [      
         { message: 'Foo' },      
         { message: 'Bar' }    
       ]  
  }})

在 v-for 塊中，我們具有對父作用域屬性的完整接見權限。v-for 還支撐一個可選的第二個參數為當前項的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

效果：
《Vue疾速入門》

v-for 經由過程一個對象的屬性來迭代。


<div v-for="(value, key, index) in object" :key="item.id">  {{ index }}. {{ key }}: {{ value }}</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

發起盡量在運用 v-for 時供應 key，除非遍歷輸出的 DOM 內容異常簡樸，或者是銳意依靠默許行動以獵取性能上的提拔。

效果：

《Vue疾速入門》

變動檢測

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是相應式的
vm.b = 2
// `vm.b` 不是相應式的

關於已建立的實例，Vue 不能動態增加根級別的相應式屬性。然則，能夠運用 Vue.set(object, key, value) 要領向嵌套對象增加相應式屬性。比方，關於：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

能夠增加一個新的 age 屬性到嵌套的 userProfile 對象：

Vue.set(vm.userProfile, 'age', 27)

還能夠運用 vm.$set 實例要領，它只是全局 Vue.set 的別號：

vm.$set(vm.userProfile, 'age', 27)

事宜綁定

<template>
   <button v-on:click="greet">Greet</button>
   <!-- 簡寫 -->
  <button @click="greet">Greet</button>
  <!-- 內聯 -->
  <button v-on:click="say('hi')" > Say hi </button>
  <!-- 阻撓單擊事宜冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事宜不再重載頁面 -->
  <from v-on:submit.prevent="onSubmit"></from>
  <!-- 修飾符串連 -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只要修飾符 -->
  <from v-on:submit.prevent></from>
  <!-- 增加事宜偵聽器時運用捕捉形式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只當事宜再該元素自身時才觸發（比方不是子元素） 觸發時觸發還調-->
  <div v-on:click.self="doThat">...</div>
  <!-- 只要在keyCode 是 13 時挪用 vm.submit() -->
  <input @key.enter="submit">
</template>
<script>
export default {
  data() {
     return {
       name: 'vue.js'
     }
   },
  methods: {
     greet: function(event) {
        alert('greet');
     },
     say: function(msg) {
         alert(message);
     }
  }
}
</script>

Mixins

// 定義一個夾雜對象
var myMixin = {
   created: function() {
      this.hello()
   },
   methods: {
      hello: function() {
         console.log('hello from mixin!')
      }
   }
}

// 定義一個組件， 運用這個夾雜對象
var Component = Vue.extend({
   mixins: [myMixin]
})

插件

《Vue疾速入門》

MyPlugin.install = function (Vue, options) {
  // 1. 增加全局要領或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }
  // 2. 增加全局資本
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
  // 4. 增加實例要領
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}

註冊組件

部分註冊組件

<template>
  <my-component></my-component>
</template>
<script>
import MyComponent  from './myComponent';
export default {
  component: {
    // 部分註冊
    MyComponent
  }
}
</script>

全局註冊組件

// a.vue
<template>
   <my-component></my-component>
</template>

// myComponent.vue
<template>
   <div>my-component</div>
</template>

// main.js
import MyComponent from ./myComponent''
// 全局註冊
Vue.component('my-component',  MyComponent);
// 建立根實例
new Vue({
   el: '#example'
})

Props

<child msg="hello!"></child>
// 動態props
<child :msg="hello!"></child>
// 雙向綁定
<child :msg.sync="hello!"></child>
// 單次綁定
<child :msg.once="hello!"></child>
Vue.component('child', {
  // 聲明 props
   props: ['msg'],
  // prop 能夠在模板內
  // 能夠用 `this.msg` 設置
  template: '<span> {{msg}}</span>'
})

slot

  <h2>我是子組件的題目</h2>
  <slot>
    只要在沒有要分發的內容時才會顯現。
  </slot>
</div>
// 父模板
<div>
  <h1>我是父組件的題目</h1>
  <my-component>
    <p>這是一些初始內容</p>
    <p>這是更多的初始內容</p>
  </my-component>
</div>
// 襯着效果
<div>  
  <h1>我是父組件的題目</h1>  
  <div>    
    <h2>我是子組件的題目</h2>    
    <p>這是一些初始內容</p>    
    <p>這是更多的初始內容</p>  
  </div>
</div>

簽字插值

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
    原文作者：答案在風中飄着
    原文地址: https://segmentfault.com/a/1190000014633497
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞