Vue.js基礎詳解

vue.js

vue介紹

Vue.js（讀音 /vjuː/，相似於 view） 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供驅動。
vue是一款簡單的mvvm（model-view-viewmodel）框架。

vue起步

vue的引入與javascript其餘庫的引入相同，經過一對閉合的script標籤包裹

<script src=""></script>

聲明式渲染

vue是一個容許採用簡潔的模板語法來聲明式的將數據渲染進DOM

<div id="box">{{msg}}</div> 
<!-- view 模板 -->
<!-- mustache語法{{}} -->

var data={
    msg:"世界舞王，尼古拉斯-趙四"
}
// model-模型  數據

var box = new Vue({
    el:"#box",
    data:data   
})
// viewmodel視圖模型 用來將數據渲染到模板上
// 用new Vue 建立一個 Vue 對象
// el：接選擇器 類選擇器，id選擇器等均可以

世界舞王，尼古拉斯-趙四

如今咱們就運用聲明式渲染生成了咱們第一個Vue應用。

除了給文本賦值，咱們還能夠利用Vue綁定DOM元素屬性

<div id="box">
    <span v-bind:title="msg">
        鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
    </span>
</div>
<!-- v-bind 動態綁定一個或多個屬性 -->

var box = new Vue({
    el:"#box",
    data: {
        msg: '頁面加載於' + new Date().toLocaleString()
        }  
})

鼠標懸停幾秒鐘查看此處動態綁定的提示信息！

這裏咱們遇到點新東西。你看到的 v-bind 屬性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行爲。簡言之，這裏該指令的做用是：「將這個元素節點的 title 屬性和 Vue 實例的 msg 屬性保持一致」。
再次打開瀏覽器的 JavaScript 控制檯輸入 box.msg = '新消息'，就會再一次看到這個綁定了 title 屬性的 HTML 已經進行了更新。
Vue更多的學習指令和組件。

條件與循環

Vue控制一個DOM元素的顯示和隱藏也很簡單，只需運用指令v-if就能夠了

<div id="box">
    <p v-if="seen">顯示模式</p>
</div>

new Vue({
    el: '#box',
    data: {
        seen: true
    }
})

顯示模式

當咱們將data數據裏的seen更改成false時，咱們會發現元素已經隱藏。

若是們須要將數據渲染到一個項目列表中，那麼咱們就須要使用到v-for指令

<div id="box">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<!-- todo 就是咱們自定義的變量 -->

new Vue({
    el: '#box',
        data: {
            todos: [
            { text: '學習 JavaScript' },
            { text: '學習 Vue' },
            { text: '整個牛項目' }
            ]
    }
})

1.學習 JavaScript
2.學習 Vue
3.整個牛項目

在控制檯裏，輸入 box.todos.push({ text: '新項目' })，你會發現列表中添加了一個新項。

處理用戶事件

v-on能夠綁定一個事件監聽器。

<div id="box">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆轉消息</button>
</div>

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

v-model能夠實現模板和數據之間的雙向綁定，咱們既能夠經過改變數據改變值，還能夠經過改變模板內的值改變數據

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

new Vue({
    el: '#box',
    data: {
        message: 'Hello Vue!'
    }
})

組化應用構建

組件系統是 Vue 的另外一個重要概念，由於它是一種抽象，容許咱們使用小型、獨立和一般可複用的組件構建大型應用

首先咱們須要註冊一個組件

Vue.component('EXPle', {
    template: '<li>這是個待辦項</li>'
})

而後咱們須要爲組件建立一個模板

<ol>
    <EXPle></EXPle>
</ol>

咱們能夠用上面剛剛學到的v-for來爲幾個不一樣的標籤防止不一樣的值
因此組件咱們應當這樣

Vue.component('todo-item', {
  // todo-item 組件如今接受一個
  // "prop"，相似於一個自定義屬性
  // 這個屬性名爲 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

咱們還要運用v-bind將指令穿如不一樣的值，因此html應當這樣修改

<div id="box">
    <ol>
    <!--
    如今咱們爲每一個 todo-item 提供 todo 對象
    todo 對象是變量，即其內容能夠是動態的。
    咱們也須要爲每一個組件提供一個「key」，晚些時候咱們會作個解釋。
    -->
    <todo-item
    v-for="item in groceryList"
    v-bind:todo="item"
    v-bind:key="item.id">
    </todo-item>
    </ol>
</div>

最後，咱們須要爲box賦值

var app7 = new Vue({
    el: '#box',
    data: {
    groceryList: [
    { id: 0, text: '世界舞王' },
    { id: 1, text: '尼古拉斯' },
    { id: 2, text: '趙四' }
    ]
    }
})

1.世界舞王
2.尼古拉斯
3.趙四

Vue 初學就到這裏了，相信你已經在腦子裏肯定了Vue的原理
model-view-viewmodel的概念也已經很是清楚了，但願你可以在學習Vue的道路上越走越遠，最後感謝你的瀏覽。

喜歡的點個讚唄！