1、什么是vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。它的作者是位中国人–尤雨溪（EvanYou).
它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的API。
很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。2、Vue的优点
1、 小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合
2、只关注视图层， 它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
3、Vue封装了大量的组件,可以直接使用,简便而而美,省去了大量的Js代码.(有字体\主题\各种表单,表格,图标,按钮,提示
框,导航栏等等)
比如：Element antd vant3、vue中的 mvvm模式
MVVM - Model View ViewModel，数据，视图，视图模型
三者与 Vue 的对应：view 对应 template，vm 对应 new Vue({…})， model 对应 data
三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器4、vue创建项目
1、首先：先从nodejs.org中下载nodejs
2、安装vue-cli npm install vue-cli -g //全局安装 vue-cli （查看vue-cli是否成功，不能检查vue-cli,需要检查vue vue list）
3、vue init webpack ”项目名称“ vue init webpack dome
现在已经创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：
项目目录解析：
5、初试Vue.js
6、vue的基本指令
1、 v-model 在表单元素上实现双向绑定
2、v-if指令 条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值
3、v-show指令 条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有 当v-if 的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值
4、v-else指令 可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。
5、v-for指令 循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：
v-for = "（item，index ）in items"
6、v-bind指令 给DOM绑定元素属性，语法如下
v-bind:argument="expression" 简写 : 如 :class="expression"。
7、 v-on指令 用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"
v-on指令可以缩写为@符号。如：@click="doSth"。7、vue的生命周期
什么是生命周期?
简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
Vue实例有一个完整的生命周期，
开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程生命周期方法?
Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
生命周期钩子 = 生命周期函数 = 生命周期事件创建期间生命周期方法
beforeCreate:
created:
beforeMount
mounted运行期间生命周期方法
beforeUpdate
updated销毁期间的生命周期方法
beforeDestroy
destroyed
8、在vue中使用组件
基本组件四步骤
1、写好组件
2、在页面种引用组件
3、在components中声明组件
4、在页面上使用
组件间的传参
1、父组件传给子组件
父组件准备一个数据，通过自定义属性给子组件赋值，进行传递
在子组件中通过 props 属性来接收参数
2、子组件传给父组件
在子组件准备一个数据，通过 this.$emit('自定义事件', '参数'),进行传递。this.$emit 相当于
要执行子组件的自定义事 件 ，并且传入参数
在父组件中给子组件注册好自定义事件，并且实现这个方法，就可以得到参数了。3、 兄弟组件间传值（或者夸组件传值）
新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）
然后再mian.js 引入
import bus from './utlis/bus' //同组件传值
Vue.prototype.bus = bus;
传值
接收值：
9、vue2.0路由传参
vue-routerCDN地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
vue-router下载地址：https://github.com/vuejs/vue-router/tree/dev/dist
1、现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
<li v-for="item in items" @click="get(item .id)">方案一、
get(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/index/${id}`,
})路由对应配置
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}获取参数用
$route.params.id方案二、
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: ''Index",
params: {
id: id
}
})对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{
path: '/index',
name: 'Index',
component: Index
}获取参数用
$route.params.id方案三、
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/index',
query: {
id: id
}
})对应路由配置：
{
path: '/index',
name: 'Index',
component: Index
}对应子组件: 这样来获取参数
$route.query.id
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
