//來自 https://www.cnblogs.com/lhl66/p/8021730.html 侵刪el:element 需要獲取的元素，一定是HTML中的根容器元素 data:用於數據的存儲 methods:用於存儲各種方法 數據綁定字面量只載入一次{{* msg}} data裡面可以進行簡單 ...
//來自 https://www.cnblogs.com/lhl66/p/8021730.html 侵刪
el:element 需要獲取的元素，一定是HTML中的根容器元素
data:用於數據的存儲
methods:用於存儲各種方法
數據綁定字面量只載入一次{{* msg}}
data裡面可以進行簡單的運算；
methods:{
getHome(){
return "早上好"
}
}
--------------------------------------------------
HTML中渲染{{getHome()}} //得到的結果是--->早上好
v-bind綁定屬性簡寫就是一個冒號 如
data{
id:12
}
<p :id="id">123</>
--------------------------------------------------
動態綁定dom元素
data{
websiteTag:"<a href='http://www.baidu.com'>百度</a>"
}
html中 <p v-html="websiteTag"></p>
--------------------------------------------------
單擊事件：v-on:click="方法" @click="方法"(簡寫)
雙擊事件：v-on:dblclick="方法" @dblclick="方法"(簡寫)
data:{
x:0,
y:0
}
updataXY(event){
console.log(event) //js滑鼠事件預設的
this.x = event.offsetX;
this.y = event.offsetY;
}
HTML渲染:
<div id="canvas" @mousemove="updataXY">
{{x}}-----{{y}}
</div>
事件還有很多，用法都一樣；
--------------------------------------------------
阻止冒泡：
data:{
x:0,
y:0
}
updataXY(event){
console.log(event) //js滑鼠事件預設的
this.x = event.offsetX;
this.y = event.offsetY;
}
updataStop(evevt){
event.stopPropagation();
}
HTML渲染:
方法一：
<div id="canvas" @mousemove="updataXY">
{{x}}-----{{y}}
<span @mousemove="updataStop">移到我這裡不會改變xy坐標</span>
</div>
方法二:
<div id="canvas" @mousemove="updataXY">
{{x}}-----{{y}}
<span @mousemove.stop="">移到我這裡不會改變xy坐標</span> //vue中加stop修飾符即可阻止冒泡
</div>
--------------------------------------------------
阻止預設行為:
<a href="http://www.baidu.com" @click.prevent="">百度</a>
--------------------------------------------------
鍵盤事件：
changeName(){
console.log("你正在輸入名字")
}
<input type="text" @keyup="changeName">
<input type="text" @keyup.enter="changeName">
<input type="text" @keydown="changeName">
其他鍵盤事件類似，用法一致
--------------------------------------------------
數據雙向綁定：
data:{
name:""
}
<input type="text" v-model="name" ref="name">
補充一個知識點：獲取vue獲取input的value的方法--->this.$refs.name.value;
--------------------------------------------------
計算屬性：
data:{
a:0,
b:0,
age:10
}
methods:{
addA(){
console.log("add to a")
return this.a+this.age;
}
addB(){
console.log("add to B")
return this.b+this.age;
}
}
法一：用方法實現這個功能
<button @click="a++">Add to A</button>
<button @click="b++">Add to A</button>
<p>A-{{a}}</p>
<p>A-{{b}}</p>
<p>Age-A={{addA()}}</p>
<p>Age-B={{addB()}}</p>
法二：用計算屬性實現
computed:{
addA(){
console.log("add to a")
return this.a+this.age;
}
addB(){
console.log("add to B")
return this.b+this.age;
}
}
<button @click="a++">Add to A</button>
<button @click="b++">Add to A</button>
<p>A-{{a}}</p>
<p>A-{{b}}</p>
<p>Age-A={{addA}}</p>
<p>Age-B={{addB}}</p>
--------------------------------------------------
動態css
data:{
changeColor:false
}
<h1 @click="changeColor!=changeColor" :class="{changeColor:changeColor}">
<span>你好</span>
</h1>
<style>
.changeColor span{
background:#f2f1f1;
}
</style>
--------------------------------------------------
v-if指令（後面可以跟v-else-if v-else）
v-show指令
區別在於v-if 判斷dom結構是否存在，v-show是使用的display屬性來是否顯示
--------------------------------------------------
v-for指令數組遍曆數組、對象
data:{
arr:["bob","wow","pop"],
list:[
{name:"bob",age:18}
{name:"wow",age:19}
{name:"pop",age:20}
]
}
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in list">{{item.name}}</li>
<li v-for="(item,index) in list">{{item.age}}</li>
<li v-for="(item,index) in list">{{index}如果下標需要從一開始如排行榜{{index+1}}</li>
</ul>
註意如果用div渲染會直接渲染div包著的結構；（3個div）
<div v-for="(item,index) in list">
<h3>{{item.name}}</h3>
<p>{{item.age}}</p>
</div>
改用template的話可以去掉不必須要的空元素div （1個div）
<template v-for="(item,index) in list">
<h3>{{item.name}}</h3>
<p>{{item.age}}</p>
</template>
--------------------------------------------------
index.html-->main.js（實例化vue對象）-->app.vue
html（template）--->js---->style三部分內容
--------------------------------------------------
全局註冊組件在main.js寫上Vue.component("自定義名字",組件名)
調用組件<自定義名字></自定義名字>
局部組件：
data(){
return{
}
},
components:{組件名}
--------------------------------------------------
組件css作用域 scoped限定
組件預處理器<style lang="預處理器" scoped></style>
--------------------------------------------------
組件傳值（父組件-->子組件（props）/子組件--->父組件（自定義事件））
需要用的數據放置父組件的data裡面
假定在app.vue
data:{
list:[
{name:"bob",age:18}
{name:"wow",age:19}
{name:"pop",age:20}
]
}
<header><header>
<content :list="list"></content>
<footer><footer>
在content組件內props接收
法一: props["list"]
法二（官方推薦）:
props{
list:{
type:Array
required:true
},
}
法三:vuex狀態管理倉庫
傳值：string、number、boolean （單個變）
傳引用：array、object （整個變）
子--->父
changeTitle(){
this.$emit("titleChange","子到父傳東西")
}
父組件@titleChange="方法名($event)"
methods:{
//做的事情
方法名(形參){
//做什麼事情
}
}
--------------------------------------------------
路由：（寫法routes數組裡麵包著對象）
import 自定義名字 from "組件路徑"
const router = new VueRouter ({
model:"history",
routes:[
{
pateh:"xxx",
meta:{單頁面配置標題}, //---->該欄位也可以校驗路由
components:{組件} //---->該方法component: resolve => require(['組件路徑'], resolve)路由懶載入（不用import組件了）
},
]
})
