vue学习2，webpack,组件，路由

一、vue指令v-for

• 准备vue对象，data数据

四、v-on指令

使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”>
第一种：事件可以直接绑定一个表达式，比如赋值：num++
第二种：事件处理函数，绑定函数…可以直接是方法名字，
也可以方法名加上（）表示当场调用，并且还可以传入参数
简写方式语法
<标签 @事件句柄=“表达式或者事件处理函数”>
事件处理函数作为事件句柄的值不需要调用

        
num的值：：{{num}}
        
        增加。。
        
        增加。。
         
        内联函数。。传参
    

五、计算属性computed

计算属性就是要操作对象的属性，改变为想要的结果，比如一个字符串的操作，
一个时间戳格式化的操作，如果都在data中取值，在标签中操作数据，非常不方便，
使用计算属性简化页面

  

        
        
今天是：{{
               new Date(birthday).getFullYear() + '-'+ (new Date(birthday).getMonth()+1)+ '-' + new Date(birthday).getDate()
               }}
        
        
今天是：{{today}}
        
    

六、watch监控数据

watch可以让我们监控一个值的变化
v-model绑定的属性名，监控方法的名字都要和这个属性的名字一样不然监控不了
监控的方法中可以传入两个参数，新值，旧值

七、vue的全局组件

组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.vue中所有的都是组件

• 不管是全局组件还是局部组件 都是组件名和配置对象
  全局变量是 （组件名，配置对象{template：“代码”}）
  局部变量是 （组件名：配置对象）
• 定义方式：Vue.component(“自定义标签的名字”,{配置对象})
  配置对象中有一个template，自定义组件要在vue挂载的块级元素使用
• 全局组件可以在其他所有挂载标签中使用,定义在vue对象之外，一个一个的定义
  局部组件，定义在vue对象内部components，可以一次定义几个
• template中的html必须在一个标签中. 仅且只能有一个根节点

 

       
         
    
    
====================================================================
    

        
        
    
    
    

全局组件都能使用

八、局部组件

定义在vue对象的内部，只有该vue对象挂载的块级元素范围内可以使用
在components属性中定义
语法：

var app = new Vue({
        el: "#app",
        data: {},
        components : {
            "局部组件的名字1" : {组件的配置对象}
            "局部组件的名字2" : {组件的配置对象}
        }

测试

       
         
         
    
====================================================================
    

        
        
        
    
    

报错

九、组件使用两种HTML模板

组件_template模板的代码组织方式
1 直接在template属性写上html代码字符串或者变量指定 需要在js中拼接html代码段
2 把template的代码块(本身就是html)写到html
1)定义 template script 加了以后就不会再页面直接显示,而是给别人引入,所以要加id
2)引用 #Id
如果模板代码太多,导致当前html代码太多
3 外部js存放,导入进来使用

十一、webpack打包

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 将代码打包的同时进行混淆，提高代码的安全性。
• Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
  析，然后将这些模块按照指定的规则生成对应的静态资源。

创建web项目
进入这个项目初始化项目
npm init -y
相当于创建了一个maven项目

• 安装webpack
  全局安装：
  npm install -g webpack
  npm install -g webpack-cli

• a.js文件

var a  = "a模块";
var b = require("./b.js")
console.log(a+"00000000000000000000");
console.log(b);

• b.js文件

define(function () {
    var b = "b模块";
    return b
});

require导入 define导出
是从当前项目下开始的路径，比如项目的src文件夹下面的a.js 并且会把a,js的依赖b.js一起打包到项目下的xx文件夹下的xx.js
指定到项目下的dist文件夹，命名规范bundle.js

terminal中输入打包指令：webpack src/a.js -o dist/bundle.js

• 新建测试index.html

    
    
    
    


    
打包测试
    
打包测试
    
打包测试

查看结构变化

打包文件导入成功：

快捷方式，指令只需要执行webpack就可以
新建webpack.config.js ，该文件与项目根处于同级目录

var path = require("path");
module.exports = {
//要打包的文件处于项目的相对路径
entry: './src/a.js',
//打包到哪个地方
output: {
    打包到项目的dist文件夹下
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}

• 以上都是打包js，如何打包css
• 使用各种加载器
  webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
  比如：需要打包css就需要css的loader
  loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 -
  传统引入css方式是
  
  但是只要将需要打包的css样式引入到需要打包的bundle.js文件中，一起打包
  然后使用的时候在页面引入就可以使用打包的资源
  
  先下载需要的插件
  npm install style-loader --save-dev
  npm install css-loader --save-dev

然后在webpack.config.js加入一个module

var path = require("path");
module.exports = {
    entry: './src/a.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,	 //匹配文件规则
                use: ['style-loader', 'css-loader']	//匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            },
        ]
    }
}

十二、热更新web服务器

案例中，每次修改任何js或css内容，都必须重新打包，非常麻烦,而且都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务，加载页面内容，并且修改js后不需要重新加载就能看到最新结果
1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script

      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    
  }
 

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1

然后执行指令npm run dev
如果报错：
错误

推荐帖子https://www.cnblogs.com/gqx-html/p/10756388.html
https://www.cnblogs.com/laraLee/p/9174383.html

如果配置成功，可以访问服务器
http://localhost:8080/index.html

测试手动搭建打包环境很麻烦，开发的时候
需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli