VUE學習筆記------奕長蘇

• 一、引言
• 二、視圖和資料的雙向綁定 - - - v-model
• 三、元件 - - - component
• 四、其它

一、引言

本文為個人在學習vue時總結的學習筆記，不得轉載，跳過對最基礎部分的總結，第一次編寫請多包涵，本人将在之後的學習時間裡持續更新。

二、視圖和資料的雙向綁定 - - - v-model

雙向綁定：當使用者再對視圖進行操作修改的時候，對應的資料部分也會改變，同時資料部分的改變也能夠改變視圖所渲染的内容。

注意: v-model 會忽略所有表單元素的value、checked、selected 特性的初始值而總是将Vue執行個體的資料作為資料來源。你應該通過JavaScript在元件的data選項中聲明初始值!

1. 視圖：可視化html元素生成的網頁

   

<div>
        <h1>Square inch chessboard is my world(方寸棋盤 便是我的天地)</h1>
        輸入的文本：<input type="text" v-model="message"> {{message}}
        <div>
            <h1>---請選擇---</h1>
            <input type="radio" name="sex" value="男" v-model="sex">男
            <input type="radio" name="sex" value="女" v-model="sex">女
            <br/>
            你選擇了：{{sex}}
        </div>
        <div>
            <select v-model="selected">
                <option value="" disabled>---請選擇---</option>
                <option>黑子深邃 為長夜蒼茫莫測</option>
                <option>白子耀眼 若恒星亘古不變</option>
                <option>舍棄 也是種取勝之道</option>
            </select>
            你選擇了：{{selected}}
        </div>
    </div>
           

1. 資料：将要展示的相關資訊

data () {
	    return {
	      message: '',
	      sex: '男',
	      selected: ''
	    }
	  }
           

三、元件 - - - component

元件：元件是可複用的vue執行個體，說白了就是一組可以重複使用的模闆，跟JSTL 的自定義标簽、

Thymeleaf 的 th:fragment等架構有着異曲同工之妙。通常一個應用會以一棵嵌套的元件樹的形式來組織

1. 建立元件的基本格式

Vue.component('元件名', {
  /*....*/
  template: 'html代碼'
})
           

1. 自定義元件的使用

1. 我的小“栗子”

   

import Vue from 'vue'

Vue.component('yichangsu', {
  props: ['taici'],
  template: '<li>{{taici}}</li>'
})

export default{
  data () {
    return {
      message: '',
      sex: '男',
      selected: '',
      items: ['Ten meetings in one effort(一力降十會)', 'What is familiar on the chessboard is Yin and Yang(棋盤上熟悉的 除去輸赢 還有陰陽)', 'The chess pieces will decide who will live to the end(棋子會決定 誰才是活到最後的存在)']
    }
  }
}
           

四、其它

附上b站學習視訊位址：https://www.bilibili.com/video/BV18E411a7mC?p=1

若文中出現錯誤，望各位批評指正！