什么是vuejs

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架舀患。與其它大型框架不同的是朱灿，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手董济，還便于與第三方庫或既有項(xiàng)目整合。另一方面要门，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時虏肾，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

如果你已經(jīng)是有經(jīng)驗(yàn)的前端開發(fā)者欢搜，想知道 Vue 與其它庫/框架有哪些區(qū)別封豪，請查看對比其它框架。

起步

嘗試 Vue.js 最簡單的方法是使用 JSFiddle 上的 Hello World 例子炒瘟。你可以在瀏覽器新標(biāo)簽頁中打開它吹埠，跟著例子學(xué)習(xí)一些基礎(chǔ)用法〈埃或者你也可以創(chuàng)建一個 .html 文件缘琅，然后通過如下方式引入 Vue：

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產(chǎn)環(huán)境版本廓推，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

聲明式渲染

vuejs的核心是使用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進(jìn)dom中刷袍。

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

{{message}}渲染得到結(jié)果 hello vue
我們可以通過 app.message讀取message的值
也可以通過 app.message='hello world'修改他的值

除了以上的文本插值方式，我們還可以綁定元素的特性樊展。

<div id="app-2">
  <span v-bind:title="message">
    鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息呻纹！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面加載于 ' + new Date().toLocaleString()
  }
})

以上代碼在app2中的span中堆生，綁定了 title 功能，鼠標(biāo)上移雷酪，顯示相關(guān)信息淑仆。

這里我們遇到了一點(diǎn)新東西。你看到的 v-bind: 特性被稱為指令哥力。指令都是帶有 v- 前綴的糯景，來表示這是 vue提供的特性。簡寫為 : ,他會在渲染 dom 的時候應(yīng)用特殊的響應(yīng)式行為省骂。
例如：

v-bind:title="鼠標(biāo)懸停顯示"  //常規(guī)
:title="鼠標(biāo)懸停顯示"  //簡寫

條件與循環(huán)

條件：v-if

vue中控制一個元素的顯示和隱藏也非常簡單蟀淮。

<div id="app-3">
  <p v-if="seen">現(xiàn)在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

在 v-if 中綁定了一個 seen 的值，當(dāng)seen===true钞澳，就顯示節(jié)點(diǎn)怠惶，false則隱藏。
這個例子展示我們不僅可以渲染數(shù)據(jù)到dom上轧粟，還可以操作他的結(jié)構(gòu)策治。
如果 js中設(shè)置 app3.seen=false,節(jié)點(diǎn)就會 被去掉。
通常 v-if 都會被用在 tab 切換上面兰吟。

循環(huán)：v-for

v-for 指令可以綁定數(shù)組的數(shù)據(jù)來渲染一個項(xiàng)目列表：

<div id="app-4">
  <ol>
    <li v-for="(todo,index) in todos" :key="idx">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學(xué)習(xí) JavaScript' },
      { text: '學(xué)習(xí) Vue' },
      { text: '整個牛項(xiàng)目' }
    ]
  }
})

其中 v-for屬性中的 todo 代表 todos 這個數(shù)組中的每一個項(xiàng)通惫，即 {text："學(xué)習(xí)javascript"}等這三個的循環(huán)。
如果需要在列表中新增一個text和內(nèi)容混蔼，如下：app4.todos.push({ text: '新項(xiàng)目' })
使用數(shù)組的js操作刪增即可履腋。

注意：一般使用 v-for 的同時，都需要添加 key屬性惭嚣，否則會出現(xiàn)警告遵湖，key如果在數(shù)組中沒有id，可以使用index

處理用戶輸入

當(dāng)用戶與應(yīng)用交互的時候晚吞，使用 v-on:事件可以添加一個事件監(jiān)聽器延旧，簡寫為@事件
例如：

v-on:click="handleclick()"  //常規(guī)
@click="handleclick()"  //簡寫

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

這里是在 button 點(diǎn)擊的時候 執(zhí)行 reserseMessage方法。
方法則寫在槽地，vue中的methods中迁沫。

在 reserseMessage方法中我們更新了引用，但是沒有操作dom捌蚊，因?yàn)樗械膁om都會由 vue 自動來處理集畅。

Vue還提供了 v-model 指令，可以輕松的實(shí)現(xiàn)表單和應(yīng)用的雙向綁定逢勾。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

當(dāng)我們在 input 中輸入刪除的時候牡整， p標(biāo)簽中的 message也會實(shí)時的輸入和刪除。

組件化的應(yīng)用和構(gòu)建

組件系統(tǒng)是 Vue 的另一個重要概念溺拱，因?yàn)樗且环N抽象逃贝，允許我們使用小型谣辞、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用

在 Vue 里沐扳，一個組件本質(zhì)上是一個擁有預(yù)定義選項(xiàng)的一個 Vue 實(shí)例泥从。

// 定義名為 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>這是個待辦項(xiàng)</li>'
})
現(xiàn)在你可以用它構(gòu)建另一個組件模板：

<ol>
  <!-- 創(chuàng)建一個 todo-item 組件的實(shí)例 -->
  <todo-item></todo-item>
</ol>

自定義組件都是在vue中的 components中描述的，一般如下
①在新建的vue文件中寫一個組件
②在需要組件的頁面中引入該組件沪摄，import ...
③在components中注冊自定義組件使用躯嫉。這里的components中是使用了es6的語法。

components:{
  vueCropper:vueCropper  //屬性為自定義的組件名字杨拐，值是import引用組件的變量祈餐。
//組件的使用：<vueCropper></vueCropper>
}

components:{
  yes:vueCropper  
  //如果這樣寫，那么組件使用的時候就是 <yes></yes>
}

但是一般都是選擇 es6的簡寫方式哄陶，等同于 案例1

image.png

如果我們在一個div中引入 2個 <todo-item></todo-item>,那他就會渲染2次相同的文本內(nèi)容帆阳，這并不是我們想要的，因?yàn)槌３６际窍嗤哪K里面內(nèi)容是不同的屋吨。

<ol>
  <todo-item></todo-item>
  <todo-item></todo-item>
</ol>

解決方法蜒谤，我們可以在組件中，接收一個 props

父組件//
<template>
  <tips :msg="tipsmsg" ></tips>
  <tips :msg="tipsmsg2" ></tips>
</template>

<script>
    import tips from '../components/tips/tips';
    export default{
        data(){
              return{
                    tipsmsg:' '
              }
        },
        components:{
            tips
        }
  }
</script>


子組件//
<template>
    <div :class="['tips',{'tipsoff':tipsoff}]">
        <p class="p1">{{msg}}</p>
    </div>
</template>

<script>
    export default{
        props:['msg','msgshow'],
        data(){
            return{
                tipsoff:true
            }
        },
        created(){
            setTimeout(()=> {
                this.tipsoff=false
            }, 3000);
        }
    }
</script>

①首先父組件中引用<tips :msg="tipsmsg" ></tips>,
綁定屬性msg至扰，然后tipsmsg是需要傳給msg的內(nèi)容鳍徽，在data中定義，可以后續(xù)修改敢课。
②子組件中定義props:['msg']阶祭，接收msg，這時候拿到的msg是父組件中的msg傳過來的值翎猛，也就是把tipsmsg賦給了msg再傳給子組件胖翰，這樣 子組件就能獲取父組件的內(nèi)容或者狀態(tài)了接剩。
③如下子組件中包含的{{msg}}就是props中獲取的msg

    <div :class="['tips',{'tipsoff':tipsoff}]">
        <p class="p1">{{msg}}</p>
    </div>

④當(dāng)父組件傳不同的值時切厘，相應(yīng)的子組件也會顯示不同的內(nèi)容。

<template>
  <tips :msg="tipsmsg" ></tips>
  <tips :msg="tipsmsg2" ></tips>
</template>

⑤同樣的懊缺，我們獲取到了父組件的msg疫稿，也能通過msg的不同，來改變子組件的狀態(tài)鹃两。

這只是組件的vue內(nèi)容的一小部分遗座。
其余部分請見后面的筆記。