vue基础（三）

1.vue中的路由传参

<router-link :to="{
path: 'yourPath',
    params: {
    name: 'name',
        dataObj: data
},
query: {
    name: 'name',
        dataObj: data
}
}"> </router-link>


path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
params -> 是要传送的参数,参数可以直接key:value形式传递
query -> 是通过 url 来传递参数的同样是key:value形式传递

通过query传参
使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })
    对应路由配置：
         {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

获取参数：this.$route.query.id
通过parmas传参
与query基本相同，需要将query改为parmas获取时也是将query改为parmas
路径后直接拼接参数

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

对应路由配置：

 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

注意:此方法需要修改对应路由配置,需要在path中添加/:id来对应 $router.push 中path携带的参数

获取传递的参数值：this.$route.params.id

2.使用children属性实现路由嵌套

例：

routes:[ { path: '/account', component:account,
                children:[  {path:'login', component:login},
                                 {path:'register', component:register}
                             ]}

注：使用children属性，实现子路由，同时，子路由的path前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

3.使用命名视图 (多个router-view使用）

例：

var xx=xxxx
在路由中配置：
path: ’ / ',component:{ ‘xxx’:xx}

4. 使用watch

使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
例：

 watch：{
            ‘firstname’ :function(newval,oldval){
         thie.fullname=newval+this.lastname
}
}

watch监视路由地址改变
例：

watch：{
            ‘$route.path’ :function(newval,oldval){
        console.log(newval)
}

}
computed计算属性的使用和三个特点
在computed中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把他们的名称当做属性来使用的，并不会把计算属性当做方法来调用
注意，计算属性在引用的时候一定不要加（）去调用，直接把他当做普通属性去使用就好
只要计算属性这个function内部所用的任何data发生变化，就会立即重新计算这个计算属性的值
计算属性的求值结果会被缓存起来，方便下次直接使用，如果计算属性方法中，来的任何数据都没有发生过变化，则不会重新对计算属性求值
watch computed methods的对比
简单说：methods侧重于业务逻辑处理，computed必须要有返回值，watch里没有
computed属性的结果会被缓存，除非依赖的响应属性变化才会重新计算。主要当做属性来使用
methods方法表示一个具体得操作，主要书写业务逻辑
watch可以监视路由地址改变，另外watch一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，
从而进行某些业务逻辑操作，可以看做是computed和methods的结合体

5.webpack

输入npm命令：【npm init -y】创建默认配置文件package.json;
在网页中会引用那些常见的静态资源：
js----.js .jsx .coffee .ts（typescript 类c#语言）
css---- .css .less .sass .scss（sass更新后）
images---- .jpg .gif .png .avg
字体文件（fonts）-----.svg .eot .woff .woff2
模板文件---- .ejs .jade .vue【这是在webpack中定义的组件，推荐】
当网页中引入的静态资源多了以后有什么问题
1.网页加载慢，因为要发起很多的二次请求 2.要处理错综复杂的依赖关系
如何解决上述问题：
1.合并、压缩、精灵图、图片的base64编码 2.可以使用之前学过的require.js，也可以使用webpack解决各个包之间的错综复杂的依赖关系
什么是webpack ？
webpack是前段的一个项目构建工具，他是基于node.js开发出的一个前段工具
如何完美实现上述的两种解决方案
1.使用Gulp，是基于task任务的：2.使用webpack，是基于整个项目进行构建的
借助于webpack这个前段自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆诸多功能。可以参考webpack官网
webpack基本使用（打包）：（4版本需全局安装webpack-cil配合使用）webpack filename -o filename
webpack能够处理js文件的互相依赖关系，webpack能处理js兼容问题，把高级的浏览器支持的语法转化为低级的浏览器能够正常识别的语法
webpack最基本配置文件使用

当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步：
1.首先webpack发现，我们并没有通过命令形式给它指定入口和出口
2.webpack就回去项目的根目录中查找一个叫做‘webpack.config.js’的配置文件
3.当找到配置文件后,webpack回去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象
4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
webpack-dev-server的基本使用：
使用webpack-dev-server这个工具可实现自动打包编译的功能
使用： 1.运行 npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
2.安装完毕后，这个工具用法和webpack命令的用法完全一样
3.由于我们是在项目中安装的webpack-dev-server所以无法把它当做脚本命令，在终端中直接运行（只有那些全局安装的工具才能在终端正常执行）
4.注意webpack-dev-server这个工具如果想要正常运行要求在本地项目中安装webpack
5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放在实际的物理磁盘上，而是直接托管到了电脑的内存中（可以提高运行速度，因为内存速度比硬盘快），所以，我们在项目根目录中，根本找不到这个打包好的bundle.js
6.我们可以认为，webpack-dev-server 把打包好的文件以一种虚拟的形式，托管到了项目的根目录中，虽然我们看不到他，但是可以认为，和dist src node_moudles平级，有一个看不见的文件叫做bundle.js
webpack- dev-server的常用命令参数：
在package.json中script中 写入 “dev”:"webpack-dev-server --open --port 3000 --contentBase src --hot(理解为运行dev命令自动打开浏览器，并浏览服务器3000端口，指定托管的根目录为src中的文件，并启动热更新
第二种方法： 在webpack.config.js中写
devServer{
opne ：true，自动打开浏览器
port ：3000，设置启动时运行端口
contentBase：‘src’ 指定托管的根目录
hot :true 启用热更新（注：需在webpack.config.js中导入webpack 并且配置插件 plugins【 new webpack.HotModuleReplacementPlugin（）//new一个热更新的模块对象】）
}
通俗理解webpack热更新：
通俗的讲，热更新就是应用里面某些模块和页面是用h5 js 来写的，就和网页一样，代码都在服务器上，更新只需要更改服务器上的代码就可以了，网站改变页面你需要更新浏览器吗？？当然不用！
所以热更新就是你没有更新，应用页面却改变了的情况，比如淘宝京东双十一还有最近的618，明明你没有更新，活动当天页面全变了还多了好多彩蛋，qq微信，携程还有今日头条之类的，随时可以改变首页内容。
使用html-webpack-plugin插件配置启动页面（作用，在内存中，根据index模板页面生成一个内存里的html页面）
使用和热更新类似，需要另写 template：path.join（_dirname,’./src/index.html’），指定模板页面路径 filename：‘xx.html’指定生成页面的名称
这个插件的作用 ：
1.自动在内存中根据指定页面生成一个内存的页面 2.自动把打包好的xx.js追加到页面中去
loader配置处理css样式：
注意：webpack，默认只能打包处理js类型的文件，无法处理其他的非js类型的文件，如果要处理非js类型的文件，我们需要手动安装一些合适的第三方loder加载器
1.如果想要打包处理css文件，需要安装 cnpm i style-loader css-loader -D
2.打开webpack.config.js这个文件，在里面新增一个配置节点，叫做module，他是一个对象，在这个module对象身上有一个rules属性，是个数组，在这个数组中存放了所有第三方文件的匹配和处理规则
例：

  在config.js中 module：{          //这个节点用于配置所有第三方模块加载器
                                                 rules：【        //所有第三方模块的匹配规则
                                                {test：/\.css$/,use:['style-loader','css-loader']} //配置处理.css文件的第三方loader规则
                                                           】       
                                                 }

注意：webpack处理第三方文件类型的过程
1.发现这个要处理的文件不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则
2.如果找到对应的规则，就会调用对应的loader去处理这种文件类型
3.在调用loader的时候，是从后往前调用的
4.当最后一个loader调用完毕会把结果交给webpack进行打包合并，最终输出到bundle.js中
配置less，sass，字体文件，图片url（url-loader 可用?limit=xx&name=[hash:8]-[name].[ext]传参）同理
补充：class关键字是es6中提供的新语法，是用来实现es6中面向对象的编程方式
所谓的静态属性就是可以通过类名，直接访问的属性，实例属性：只能通过类的实例，来访问的属性，叫做实例属性。 静态属性和实例属性挂载到内存的不同地方
例：class person{ static info={name: 'zs' ,age:20} }

webpack中babel设置

通过 Babel，可以帮我们将高级语法转换为低级的语法
需要装第一套包 babel-core babel-loader babel-plaugin-transform-runtime 第二套包：babel-preset-env babel-preset-stage-0
在webpack中添加

{test:/\.js$/,use:'babel-loader' ,exclude:/node_modules/}

在配置babel的loader规则的时候，必须把node_modules目录通过exclude选项排除掉，如果不排除，则Babel会把node_modules中所有的第三方js文件，都打包编译，这样会非常消耗cpu，同时打包速度会慢，而且项目也无法正常运行
在项目的根目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件，属于JSON格式，所以在写.babel配置的时候，必须符合json语法规则，不能写注释，字符串必须用双引号
在.babelrc写如下的配置：

{
                                   "presets":[“env”,"stage-0"],
                                   "plugins":["transform-runtime"]
                                    }

使用vue实例的render方法渲染组件

例：

 render: function(createElements){  //createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构
        return createElements(login) //注意：这里return的结果，会替换页面中el指定的那个容器
      }

在普通网页中如何 使用vue

1.使用script标签，引入vue的包 2.在index页面中，创建一个id为app的div容器3.通过new vue得到一个vm的实例
在webpack中尝试使用vue
在webpack中，使用import Vuue from ‘vue’导入的Vue构造函数，功能并不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式
回顾包的查找规则：1.找项目根目录中有没有node_modules的文件夹2.在node_modules中根据包名，找对应的Vue文件夹3.在vue文件夹中，找一个叫做package.json的包配置文件4.在package.json文件夹中，查找一个main属性【main属性指定了这个包在被加载的时候，的入口文件】
修改方法，可以使用下列两种导入完整的vue.js
1.import Vue from '…/node_modules/vue/dist/vue.js
2.在webpack.config.js中添加resolve属性：reslove：{alias：{‘vue$’:‘vue/dist/vue.esm.js’}}

webpack中如何使用vue

1.安装vue的包：cnpm i vue -s
2.由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader cnpm i vue-loader vue-template-complier -D
3.在main.js中，导入vue模块 import vue from ‘vue’
4.定义一个.vue结尾的组件，其中，组件有三部分组成：template script style
5.使用import login from './login.vue’导入这个组件
6.创建vm的实例 var vm = new Vue（{el: ‘#app’,render:c =>c(login) }）
7.在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域

结合webpack使用vue-router：

render会把el指定的容器中所有内容清空覆盖，所以不要把路由的router-view和router-link直接写到el所控制额元素中
app这个组件，是通过vm实例的render函数渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el:’#app’所指定的元素中
路由匹配监听到的组件，只能展示到属于路由的router-view中去
实现路由嵌套：
1.导入组件2.{path：‘father’，component：father，children：[{path：‘children’，component：children}]}

组件样式中lang和scoped使用

lang可以设置样式使用css或其他，scoped可以将style中的样式设为自己组件自己使用，只要是stlye标签，是在.vue组件中定义的，那么推荐都为style开启scoped属性，样式的scoped是通过css的属性选择器实现的

export default 和 export 的使用方式

export defult
1.向外暴露的成员，可以使用任意的变量来接受
2.在一个模块中，export default只允许向外暴露1次
3.在一个模块中，可以同时使用 export default和export向外暴露成员
export
1.使用export向外暴露的成员，只能使用{}的形式来接受，这种形式叫做【按需导出】
2.export 可以向外暴露多个成员，同时，如果某些成员，我们在import的时候不需要，则可以不在{}中定义
3.使用export导出的成员，必须严格按照导出时候的名称，来使用{}按需接受
4.使用export导出的成员，如果想换个名称来接受，则可以使用as来起别名
补充：在node中使用var 名称 =require（‘模块标识符’）来接受成员 module.exports和exports；来暴露成员