vue监听和webpack基本使用

vue监听

1. 使用keyup监听
2. 使用watch监听文本框变化，watch 使用这个属性可以监视data中的数据变化然后触发这个watch中对应的function处理函数

            +
            =
            

watch:{,
                    'firstname':function(newVal,oldVal){
                        this.fullname=newVal +'-'+ this.lastname
                    },
                    'lastname':function(newVal){
                        this.fullname=this.firstname +'-'+ newVal
                    }
                }

3. watch监视路由地址的改变

                    watch:{
                        '$route.path':function(newVal,oldVal){
                            if(newVal==='/login'){
                                console.log("进入登录页面")
                            }else{
                                console.log("进入注册页面")
                        }
                    }
                }

4. computed中可以定义一些属性，这些属性叫做计算属性，计算属性本质就是一个方法，不过在使用这些计算属性的时候是把它的名称直接当作属性来使用的，不会当作方法去调用，它的结果会被缓存，除非它以来的属性发生变化才会重新计算，此时fullname不再会在data中定义

computed:{
                    'fullname':function(){
                        return this.firstname+'-'+this.lastname
                    }
                    
                }

                data:{
                    firstname:'',
                    lastname:'',
                    //fullname:''
                },

---

webpack使用

1.网页会引用常见的静态资源
js: .js .jsx .coffee .ts
css: .css .less .sass .scss
images: .jpg .png .gif .svg
fonts: .svg .ttf .eot .woff .woff2
模板文件: .ejs .jade .vue

2. 网页引入静态资源太多的问题：
   • 加载速度慢，因为要发起多次二次请求
   • 处理复杂的依赖关系
3. 如何解决：
   • 合并，压缩，精灵图，图片的Base64编码
   • 使用requireJS，webpack
4. webpack是前端的一个项目构建工具，它是基于node.js开发出来的前端工具
5. main.js 是项目的js入口文件，导入jquery,import-from-是es6中导入模块的方式

import $ from 'jquery'

6. ES6代码浏览器无法解析,所以要通过webpack解析

import $ from 'jquery'
// const $ = require('jquery')
$(function(){
    $('li:odd').css('backgroundColor','aqua')
    $('li:even').css('backgroundColor','red')

})

7. 使用webpack，打开终端webpack .\src\main.js .\dist\bundle.js
8. webpack能够处理js文件的依赖关系，能够处理js的兼容问题把浏览器不能识别的语法转化成浏览器识别的语法
9. 创建一个配置文件webpack.config.js直接输入webpack命令运行

const path=require('path')
module.exports={
    entry:path.join(_dirname,'./src/main.js'),
    output:{
        path.join(_dirname,'./dist'),
        filename:'bundle.js'
    }
}

10. 当我们通过控制台直接输入webpack命令执行时，webpack会发现我们没有通过命令的形式指定入口出口，就回去根目录中查找webpack.config.js的配置文件，然后解析配置文件，完成后就会得到配置对象就会得到指定的入口和出口最后打包构建
    
11. entry:path.join入口表示要使用webpack打包的那个文件，output:指定打包好的文件输出到哪个目录上去， filename:指定输出的文件名称

---