一.什么是vue
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二.vue的安装部署
第一步：安装vue：打开cmd输入：npm install vue
第二步：安装全局vue-cli：npm install --globle vue-cli
第三步：安装一个基于 webpack 模板的新项目：vue init webpack 创建项目的文件名
第四步：找到刚才创建的这个项目名文件夹安装依赖：1.cd 创建项目的文件名 2.npm install
第五步：跑起来：npm run dev
三.创建一个vue组件
第一部分：
页面部分用标签包裹（注意：此标签内只能存在一个根容器，然后一个跟容器内可以嵌套多个div标签）
第二部分：
1.js部分用标签包裹（如果这个组件需要引入另一个组件那么这样写：import 组件名 from "./组件文件名" 当然这部分是写在script标签内,且组件名首字母必须大写）
2.引入组件后另起一行写 export default{
name:"组件文件名",
data(){
return{
键名：键值
}
}
components:{
引入的组件名（ES6写法）
}
methods:{
用ES6的写法写事件方法 如 getinfo(event){
如果要用上述键值那么 这样如改变上述一个键名的值：this.上述键名=一个新的值
}
}
}
第三部分：
css样式 用style标签包裹
四.vue的一些指令理解
1.v-html 用法举例：<div v-html="web"></div> web:" <h1>哈哈哈</h1> "
2.v-bind 用法举例：<div v-bind:class=" sammu">{{1+1==2?'正确':'错误'}}
sanmu:"sanmus" 此时div的类名是sanmus
3.v-if 用法举例：<div v-if="flag"> (flag:true(显示)/false(不显示) 这个状态写在data中 ，如果需要改变，可通 过this调用改变)
</div>
4.v-else 如果上面的显示则此不显示，如果上面的不显示则此显示
5.v-show 用法举例：<div v-show="flag">我是show渲染</div>
flag:true(显示)/false(不显示)
6.v-for 用法举例: <ul>
<li v-bind:key="index" v-for="(item,index) in arrName">
<p>{{item}}-{{index}}</p>
</li>
</ul>
arrName:["小明","小红","小黑","小白"] (在data中定义)
五.Vue事件操作
vue的事件操作：v-on:click="事件名"，然后在methods:{
事件名（event）{
事件名括号里可以跟参数 也可以监听键盘事件 比如keyup等
}
}
六.vue的路由操作router
vue的路由router操作：第一步 首先需要在项目文件夹下安装
cmd下 安装 npm install --save vue-router
第二步 安装完成之后开始编写代码
1.引入import VueRouter from "vue-router"
2.Vue.use(VueRouter)
第三步 创建一个router
1.const router = new VueRouter({
routes:[
{
path:"", //指路由跳转的路径（自定义一个如：/hello）
component:"" //指路由的组件（如创建的组件：HelloWorld,就相当于通过path的路径跳转到这个组件）
},
{
path:"",
component:""
}
]
})
第四步：注入router
new Vue({ el: '#app', router, components: { App }, template: ''</App>" })
第五步：显示路由组件
<router-view></router-view>
.重定向：
{
path:"/",
redirect:"/index"
}
七.数据双向绑定
数据双向绑定 v-model="msg" 然后在给msg一个初始值，然后{{msg}}显示出来就可以了（一般输入框使用）
给数组添加数据 可以用.push 删除pop
