配置webpack及vue腳手架工具：
  npm install webpack webpack-cli -g
  npm install vue-cli -g
  搭建腳手架 vue init webpack 專案資料夾名字
  cd 專案資料夾名字
  安裝腳手架所需的npm包 npm install
  在本地伺服器執行該專案 npm run dev/npm start
  打包上線 npm run build

轉譯html <span v-html="rawHtml"></span>

v-bind繫結那些後來需要更改的屬性:

v-bind:class="{ active: isActive }" v-bind:style v-bind:id v-bind:href 縮寫 :href
三元運算子不好使 用這一種格式 :class="{active:index==ins}" 或"{ active: isActive }"

v-bind單項資料繫結 <input v-bind:value="picked">

v-model雙向資料繫結 <input v-model="picked">同步更改data裡面的picked值(只能運用在表單元素中)  v-model相當於value的效果

利用ref獲取dom <input type="text" ref="input1"/>  this.$refs.input1.value 用ref代替獲取dom的消耗,可以獲取可以賦值

v-on 指令它用於監聽 DOM 事件 v-on:click 縮寫@click
對自身使用 @click.stop阻止冒泡 .prevent阻止預設行為
對影響到的父元素使用 .capture捕獲(從影響到的節點上的事件從上往下觸發) .self當點選自身時才觸發
點選時繫結的dom元素 e.currentTarget 點選時直接點選的dom元素 e.target

v-if/v-show條件渲染

<h1 v-if="ok">Yes</h1> <h1 v-else-if="error">B</h1> <h1 v-else>No</h1>
新增一個具有唯一值的 key 屬性來表達“這兩個元素是完全獨立的，不要複用它們”
<input v-if="" placeholder="Enter your username" key="username-input">
<input v-else placeholder="Enter your email address" key="email-input">
如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

v-for迴圈 <li v-for="item in items">{{item.text}}</li>

vue物件的屬性  data(){}資料  computed:{}實時計算data的某個屬性  watched:{}當data的某個屬性變化執行的函式  methods頁面的函式

vue生命週期函式
beforeCreate（建立前）,
created（建立後）,
beforeMount(載入前),
mounted（載入後）,
beforeUpdate（更新前）,
updated（更新後）,
beforeDestroy（銷燬前）,
destroyed（銷燬後）

子模板solt的用法  <el-main><slot></slot></el-main>  子模板加入slot就允許在子模板中插入想要的內容
父元件中直接在子模板的中間插入<Header><span>xxxx</span></Header>  內容就顯示在slot中了

元件之間的傳值
父元件向子元件傳值    父元件頁面部分引入子元件<Son :val="im value"></Son>
子元件的js部分

陣列形式
export default{
data(){},
props:['val']}能直接在頁面上用{{val}} 在js中使用this.val
物件形式
props: {
data1: {
type: String,
required: true,
default: 'default value',
validator (value) {
return (value.length < 5)
}},
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}
}

子元件向父元件傳值
子元件頁面部分<input @change='setVal'></input> 方法部分setVal(){this.$emit('loadVal',this.val)}
父元件頁面部分<Son @loadVal="getVal"></Son> 資料部分data(){return name:""} 方法部分getVal(val){this.name=val}
props的雙向繫結 在data上新建屬性 用watch和props繫結 然後watch監聽數值的變化 傳給父元件

元件的跳轉 <router-link to="/myRegister">註冊</router-link>
函式內的跳轉 router.go 已經被用來作為 後退/前進導航，router.push 用來導向特殊頁面。
跳轉：this.$router.push({name: '元件的名字', params: {obj: paicheNo}}) 獲取引數：this.$route.params.obj
跳轉：this.$router.push({path: '/元件的地址', query: {obj: paicheNo}}) 獲取引數：this.$route.query.obj