詳解Vue-基本標(biāo)簽和自定義控件

更新時(shí)間：2017年03月24日 08:26:13 作者：王亟亟

本篇文章主要介紹了Vue-基本標(biāo)簽和自定義控件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

按照國(guó)際慣例先安利：Useful-Open-Source-Android_jb51.rar

上一篇把環(huán)境搭完了，然后把默認(rèn)的8080內(nèi)容跑通了，這一片嘗試把常用的一些標(biāo)簽給學(xué)習(xí)一下（按鈕啊，列表，圖片啥的）

整篇都是跟著官方教程學(xué)，只是加入一系列自己的理解和分析，方便以后溫故

默認(rèn)環(huán)境已經(jīng)幫我們把包結(jié)構(gòu)建好了，如下

這里寫圖片描述

index.html是我們的頁面

main.js是讓App.vue和頁面產(chǎn)生關(guān)聯(lián)的“掛載js文件“（不知道這么描述合適不合適，有問題歡迎提出）

App.vue就是我們具體的vue代碼

vue本身對(duì)實(shí)際DOM進(jìn)行了一層封裝，我們的渲染等一系列行為其實(shí)都是在一個(gè)”虛擬dDOM”上進(jìn)行操作，然后會(huì)刷新你需要刷新的地方，而不是整體刷新（這也就是性能相對(duì)好點(diǎn)一部分原因）

像React的render函數(shù)內(nèi)渲染ui控件一樣，vue是在一個(gè)<template></template>的便簽下寫自己的內(nèi)容，像這樣

<div id="app2">
 {{ msg }}
</div>

有學(xué)過js 的小伙都知道，這里的msg是一個(gè)帶值的引用而不是一個(gè)'msg'而他的值來源于data{}下的屬性 msg

完整代碼如下

<template>
<div id="app2">
 {{ msg }}
</div>
</template>

<script>
export default {
 name: 'app2',
 data () {
 return {
  msg: 'Hello wjj!'
 }
 }
}
</script>

這就會(huì)在頁面上打出 Hello wjj!了，不信你悄悄看

你的值屬性都在data{}內(nèi)，而一些諸如method,component則是和data{}平級(jí)的（這部分之后會(huì)有一個(gè)例子）
vue使用v-加上一些特殊屬性形成指令，諸如v-bind就可以響應(yīng)式的讓數(shù)據(jù)和DOM發(fā)生綁定，只要數(shù)據(jù)變了頁面就會(huì)刷新,普通的文本試過了接下來我們?cè)囋嚢粹o

按鈕

<template>
<div id="app2">
 <p>{{ message }}</p>
 <button v-on:click="showlog">查看log</button>
 </div>
</template>

<script>
export default {
 name: 'app2',
 data () {
 return {
  message: 'Hello Vue.js!'
 }
 },
 methods: {
  showlog: function () {
  console.log(this.message)
  }
 }
}
</script>

這邊用 v-on來響應(yīng)onclick事件

把時(shí)間交由一個(gè)方法 showlog來處理，這個(gè)方法也沒干啥事打了一句log

這里寫圖片描述

列表

普通的h5做一個(gè)列表需要<ol> <li>配合的組合拳，Vue幾乎一致，值也是從data{}里返回來的，像這樣

<template>
 <div id="app2">
 <ol>
  <li v-for="list in items">
  {{ list.text }}
  </li>
 </ol>
 </div>
</template>

<script>
export default {
 name: 'app2',
 data () {
 return {
  items:[
  { text : '123'},
  { text : '234' },
  { text : 345 },
  { text : 10086}
  ]
 }
 }
}
</script>

用v-for來修飾列表，這個(gè)命名也不是瞎取的 in前是集合體 in后是集合屬性（也就是item具體屬性的key,這里是text,不信你 v-for后面隨便改鐵定報(bào)錯(cuò)）

這里寫圖片描述

這個(gè)也是綁定數(shù)據(jù)的，不信你控制臺(tái)改改list的數(shù)據(jù)就知道了，結(jié)果一定會(huì)變

邏輯判斷

有v-for那也一定有v-if,看了看api還真有當(dāng)v-if的值為false時(shí)，這個(gè)標(biāo)簽將不可見

<template>
 <div id="app2">
 <p v-if="isTrue">10086</p>
 </div>
</template>

<script>
export default {
 name: 'app2',
 data () {
 return {
  isTrue: true
 }
 }
}
</script>

你把 isTrue改成false 10086就不顯示了(這里還能使用表達(dá)式，這部分知識(shí)點(diǎn)以后講到)

用戶輸入

<template>
 <div id="app2">
 <p>{{ message }}</p>
 <input v-model="message">
 </div>
</template>

<script>
export default {
 name: 'app2',
 data () {
 return {
  message: hi wjj
 }
 }
}
</script>

api提供了v-model 指令提供了控件與數(shù)據(jù)的雙向綁定，讓我們很輕松的能獲取輸入內(nèi)容此處message的值會(huì)根據(jù)輸入變化而變化，并不是一個(gè)常量

第一個(gè)自定義控件

首先我們?cè)?src目錄下新建一個(gè)目錄叫”component”,建一個(gè)mycomponent.vue文件，然后也讓他打2句話吧

<template>
 <div id="mycomponent">
 <h1>我是第一個(gè)自定義控件</h1>
 <p>{{ msg }}</p>
 </div>
</template>

<script type="text/javascript">
 export default{
 data(){
  return{
  msg : "hi i am wjj"
  }
 }
 }
</script>

然后在我們的app.vue里調(diào)用他

<template>
<div id="app2">
 <p>{{ message }}</p>
 <input v-model="message"></input>
 <mycomponent></mycomponent>
</div>
</template>

<script>
import mycomponent from './component/mycomponent.vue'
export default {
 name: 'app2',
 data () {
 return {
  message: 'Hello Vue.js!'
 }
 },
components: { mycomponent }
}
</script>

這里有幾個(gè)知識(shí)點(diǎn)

1.Vue的導(dǎo)入操作是在<script></script>標(biāo)簽里。

2.如果存在子/父控件的概念的話，一定要先初始化/加載子控件。

效果如下：

這里寫圖片描述