什么是vuejs

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

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

起步

嘗試 Vue.js 最簡單的方法是使用 JSFiddle 上的 Hello World 例子。你可以在瀏覽器新標簽頁中打開它，跟著例子學習一些基礎用法。或者你也可以創(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ù)渲染進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">
    鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
  </span>
</div>

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

以上代碼在app2中的span中，綁定了 title 功能，鼠標上移，顯示相關信息。

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

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

條件與循環(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 的值，當seen===true，就顯示節(jié)點，false則隱藏。
這個例子展示我們不僅可以渲染數(shù)據(jù)到dom上，還可以操作他的結(jié)構(gòu)。
如果 js中設置 app3.seen=false,節(jié)點就會 被去掉。
通常 v-if 都會被用在 tab 切換上面。

循環(huán)：v-for

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

<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: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
})

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

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

處理用戶輸入

當用戶與應用交互的時候，使用 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 點擊的時候 執(zhí)行 reserseMessage方法。
方法則寫在，vue中的methods中。

在 reserseMessage方法中我們更新了引用，但是沒有操作dom，因為所有的dom都會由 vue 自動來處理。

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

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

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

當我們在 input 中輸入刪除的時候， p標簽中的 message也會實時的輸入和刪除。

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

組件系統(tǒng)是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮陀玫慕M件構(gòu)建大型應用

在 Vue 里，一個組件本質(zhì)上是一個擁有預定義選項的一個 Vue 實例。

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

<ol>
  <!-- 創(chuàng)建一個 todo-item 組件的實例 -->
  <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)容，這并不是我們想要的，因為常常都是相同的模塊里面內(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>

④當父組件傳不同的值時，相應的子組件也會顯示不同的內(nèi)容。

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

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

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