关于Vue

一：关于vue

1：vue是由饿了么ued团队开发并维护的一个渐进式js框架

2：vue是以数据作为驱动，既有angular中的数据双向绑定，也有react当中的框架，是mvm框架，也仅仅是view层，与它类似的框架有knockout.js ,avalon.js

3：vue中实现数据双向绑定的原理;getter和setter（但我们一般是用{{ }}和v-module来实现数据的双向绑定，跟angular中的数据双向绑定机制几乎是一样的）

4：如何使用vue去构建项目

　1）使用vue-cli脚手架工具进行整个项目的构建

　　2）使用vue-router来实现vue中的切换

　　3）使用vuex进行状态集的管理，axios或者是fetch或者是vue-resource来进行数据的交互

　　4）使用template模板引擎进行组件化的开发

5：常用指令;

　　v-if:条件渲染指令

　　v-for:循环遍历指令

　　v-bind:绑定指令，绑定属性的

　　v-html:替换dom内容指令

　　v-text:替换文本内容指令

　　v-on:监听事件指令;v-on：click="fn"

　　slot：分发属性，占位符，创建很多相似组件，用来提高组件的复用性，替换组件内部元素

　　component：购物车标签，切换标签，is属性，说明那个组件被渲染

6:vue中的表达式和计算属性（methods和computed）

　　1）methods中的方法必须要通过事件才要触发，不能在页面上直接显示

　　2）computed中的方法都必须要进行return,computed只要数据变更才会重新计算，可以降低对性能的消耗

vue组件中的作用域

　　1)每个组件都有自己的作用域，相互独立，互不干涉

　　2）自定义组建中，data必须是个函数

　　3）为避免组件声明的变量互相影响，所以必须使用函数声明局部变量。

7：vue的特性；

　　1）简洁，主要由HTML模板，json数据和vue的实例构成

　　2）数据作为驱动，自动计算属性，以及依赖构成

　　3）轻量，代码量少

　　4）组件化，复用性高，快速，使用虚拟dom，批量dom更新

　　5）对SEO友好，模板友好，

　　6）vue不能代替react

　　7）如果要搭建小并且快速简单的，习惯使用模板，选用vue

　　8）构建项目需要兼容web app,数据交互频繁，选用react

8：vue的生命周期

　　1）组件创建时：creating

　　　　beforeCreate：实例化对象后触发

　　　　created：组件接收data后触发

　　2）模板渲染时：mounting

　　　　beforemount：模板渲染之前最后一次触发

　　　　mounted：模板渲染之后触发，在这个函数中进行数据的请求，防止渲染多次，数据进行多次请求，在这个函数中数据只请求一次。

　　3）数据更新时：updating

　　　　beforeupdata：数据更新渲染之前最后一次执行的函数

　　　　updated:更新渲染之后第一次触发

　　4）组件卸载时：destroying

　　　　beforedestroy:销毁之前触发

　　　　destroyed：组件销毁之后触发销毁组件的方法是destroy（）

9：vue中的路由：import VueRouter from 'vue-router'

　　用<router-view></router-view>来充当路由切换的容器，用<router-link></router-link>配合path属性路径来进行路由的切换

　　以下是路由的详细用法；

　　安装

　　　　npm install vue-router --save

　　基本用法

　　在HTML文档中使用，只需要利用v-link这个directive就行了，如：

　　<a v-link="{path: '/view-a'}">Go to view-a</a>

　　 ps: v-link还支持activeClass用于指定链接活跃时的css样式。replace属性为true的时候可以让链接在跳转的时候不会留下历史记录。

　　而在ES5中使用，需要先创建路由器实例，随后传入配置参数即可，如：

　　var router = new VueRouter();

　　router.map({
 　　 '/view-a': {
   　　 component: ViewA
　　  },
　　  '/view-b': {
  　　  component: ViewB
 　　 }
　　});

router.start(App, '#app');

以上定义的路由器规则，采用映射到一个组件的方式，最后启动应用的时候，挂载到#app的元素上。

　　es6的写法：

先建立一个路由器模块，主要进行配置和绑定相关信息

　　import Vue from 'vue';
　　import VueRouter from 'vue-router';

　　Vue.use(VueRouter);

　　const router = new VueRouter(); //这里可以带有路由器的配置参数

　　router.map({
　　  '/view-a': {
  　　  component: ViewA
 　　 },
 　　 '/view-b': {
 　　   component: ViewB
 　　 }
　　});

export default router; //将路由器导出暴露

在app.js入口启动文件中启用该路由器

　　import Vue from 'vue';
　　import router from './routers';

　　router.start(App, '#app');

　　嵌套路由

　　如果想要使用嵌套路由，如/a/b则可以更新路由配置

　　router.map({
　　  '/a': {
 　　　   component: A,
   　　 subRoutes: {
    　　  '/b': {
      　　  component: B
     　　 }
  　　  }
　　  }
　　});

同时，你需要在组件A和组件B中使用<router-view>，如：

<div id="app">
  <router-view></router-view>
</div>

组件A中，使用嵌套的外链

<div id="A">
  <h1>
    This is component A
  </h1>
  <router-view></router-view>
</div>

路由器将自动渲染对应的组件以及更新路由信息。

其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。

es6写法：使用children　　

const routes = [
　　{　　//父路由
　　　　path: '/',
　　　　component: Info,//默认显示info
　　　　//两个子路由
　　　　children:[
　　　　{
　　　　　path: '/',
　　　　　component:List //默认显示list
　　　　},
　　　　{
　　　　　　path:'/Info/List',
　　　　　　component:List
　　　　},
　　　　{
　　　　path:"/Info/List2",
　　　　component:List2
　　　　}
　　　　]
　　}

]

路由对象和路由匹配

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如

属性	说明
$route.path	当前路由对象的路径，如'/view/a'
$rotue.params	关于动态片段（如/user/`:username`)的键值对信息,如{username: 'paolino'}
$route.query	请求参数，如`/foo?user=1`获取到query.user = 1
$route.router	所属路由器以及所属组件信息
$route.matched	数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name	当前路径名字

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

全匹配片段的语法是使用通配符* 如，/user/*any就会匹配到任何以/user为开头的路径，并给params对象中赋值一个属性any

动态片段的语法就是使用:作为标志。

使用路径名称

在定义路径规则的时候，如果你给它提供了一个name属性，则可以在后续使用这条路径规则的时候，直接引用。

router.map({
  '/user/:userId': {
       name: 'user',
    component: {...}
  }
});

在v-link中使用

<a v-link="{name: 'user', params: {userId: 1}">This is a user whose id is 1</a>

还可以使用router.go()

router.go({name: 'user', params: {userId: 1}});

最终都会匹配到/user/1这条路径上

10：vue中的组件通信

　　1)子组件向父组件传参，需要emit（）方法　

　　子组件中:　

　　//mounted，等页面渲染完成后去推送
　　mounted:function(){
　　console.log(this.$route.params.id)//获取id值，获取对象，一般都在params下
　　this.$emit("to-parent",this.msg)
　　}

　　父组件中：

　　<router-view @to-parent="getChildDate"></router-view>添加@to-parent的属性

　　2）父组件向子组件传参

　　　props　　　

<Child v-bind:tulongdao="msg" :yitianjian="msg2"></Child>

　　　　在子组件中添加props:["tulongdao"]的一个变量

　　3）父组件获取子组件的所有信息

　　　　ref属性

　　　　子组件：添加ref属性 <v-child ref="myson"></v-child>

　　　　父组件调用方法，获取子组件的信息：<button @click="getAll">获取子组件的所有信息</button>
　　　　父组件下的方法

　　　　getAll:function(){
　　　　　　console.log(this.$refs.myson) //获取子组件信息的方法
　　　　}

posted @ 2018-01-10 17:53 无花即无果阅读(243) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

无花即无果

关于Vue

安装

基本用法

嵌套路由

路由对象和路由匹配

使用路径名称

公告

　　安装

　　基本用法

　　嵌套路由