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 组件了）
      },
   ]

})
--------------------------------------------------
请求方式另外一节附上