一.什么是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 用法举例：

web:"

哈哈哈

2.v-bind 用法举例：

sanmu:"sanmus" 此时div的类名是sanmus

3.v-if 用法举例：

(flag:true(显示)/false(不显示) 这个状态写在data中，如果需要改变，可通过this调用改变)

4.v-else 如果上面的显示则此不显示，如果上面的不显示则此显示

5.v-show 用法举例：

我是show渲染

flag:true(显示)/false(不显示)

6.v-for 用法举例:

{{item}}-{{index}}

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: ''" })

第五步：显示路由组件

.重定向：

{

path:"/",

redirect:"/index"

}

七.数据双向绑定

数据双向绑定 v-model="msg" 然后在给msg一个初始值，然后{{msg}}显示出来就可以了（一般输入框使用）

给数组添加数据可以用.push 删除pop

关于vue的一些小心得基本用法详解