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

一、vue指令v-for

准备vue对象，data数据

<script>new Vue({el:"#lr",data:{likes:["唱","跳","rap"],user:{username:"用户",password:"123456",age:18},students:[{"name":"小明","age":18,"like":"篮球"},{"name":"小花","age":28,"like":"乒乓球"},{"name":"小白","age":38,"like":"羽毛球"},{"name":"小灰","age":48,"like":"rap"}]}});

遍历数组（元素 in 数据源）

<h1 v-for="like in likes">{{like}}</h1>

遍历数组加上索引（元素 in 数据源）
注意和参数名字无关，遍历的顺序是一定的，前面是值，后面是索引

<h1 v-for="(index,like) in likes">{{index}}----{{like}}</h1>

遍历普通对象
第一个参数是对象属性的值
第二个参数是对象属性
第三个是索引

<ul v-for="(value,property,index) in user">{{property}}=={{value}}=={{index}}</ul>

遍历对象集合填充表格数据

<table><thead><tr>姓名</tr><tr>年龄</tr><tr>爱好</tr></thead><!--遍历data中的数据这个数据以后应该是在后台拿的，这里是测试数据--><thead v-for="student in students"><td>{{student.name}}</td><td>{{student.age}}</td><td>{{student.like}}</td></thead></table>

测试效果

二、vue指令v-show

语法
<标签名 v-show=“表达式”></标签名>
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
会在标签的css中添加 display: none :
标签的值会自动转换为boolean类型的值

v-show=""中可以直接是true或者false
可以是data的属性值
可以是一个表达式的批判结果布尔值

<div id="lr"><!--v-show=""中可以直接是true或者false--><div style="color: peachpuff" v-show="true">我是谁</div><!--也可以是属性--><div style="color: green" v-show="showDiv">你好</div><!--可以是一个表达式的批判结果  布尔值  --><div style="color: aqua" v-show="90<5">wcnm</div>
</div>
<script>new Vue({el:"#lr",data:{/*以后可以是后台的数据判断的结果* 不能加引号，不是字符串* */showDiv:true}});

三、v-bind指令

为一个标签属性绑定一个值
注意不能直接引号""取属性值，需要绑定标签的属性再从data中取值，比如赋值给img标签的src
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式省去v-bind :
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>

<div id="lrtest"><!--第一种方式--><img  v-bind:src="img" v-bind:title="imgtitle"  ><!--第二种方式--><img :src="img" :title="imgtitle"><!--注意：第三种方式将一个对象键和值作为标签的属性的名字和值时,  在v-bind后不需要指定属性的名字--><img v-bind="property"></div>
<script>new Vue({el:"#lrtest",data:{img:"./img/1.jpg",imgtitle:"药水哥",property:{src:"./img/1.jpg",title:"水儿"}}});</script>

四、v-on指令

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

<div id="lrtest"><h1>num的值：：{{num}}</h1><!--表达式--><button v-on:click="num++">增加。。</button><!--绑定函数--><button v-on:click="add">增加。。</button><!-- 内联事件:回调函数名(参数列表)直接调用，并且传入参数--><button @click="eat('西瓜')">内联函数。。传参</button></div>
<script>new Vue({el:"#lrtest",data:{num:0},methods:{add(){this.num++;},eat(food){alert("我想吃"+food)}}});</script>

五、计算属性computed

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

  <div id="lrtest"><!--直接在标签中处理数据  臃肿--><h1>今天是：{{new Date(birthday).getFullYear() + '-'+ (new Date(birthday).getMonth()+1)+ '-' + new Date(birthday).getDate()}}</h1><h1>今天是：{{today}}</h1></div>
<script>/*获取当前时间戳*/var myDate = new Date().getTime();new Vue({el:"#lrtest",data:{birthday:1564233283355},computed:{today(){return  new Date(myDate).getFullYear() + '-'+ (new Date(myDate).getMonth()+1)+ '-' + new Date(myDate).getDate()}}});
</script>

六、watch监控数据

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

<div id="app"><input type="text" v-model="message"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""},watch:{message2(newVal, oldVal){console.log(newVal, oldVal);}}})
</script>

七、vue的全局组件

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

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

 <div id="app"><myhtm1></myhtm1><myhtm2></myhtm2></div><h1>====================================================================</h1><div id="app2"><myhtm1></myhtm1><myhtm2></myhtm2></div><!--在外面不能使用，只有在挂载标签中使用--><myhtm2></myhtm2>
<script type="text/javascript">Vue.component("myhtm1",{template:"<div style='color: aquamarine' >我是自定义组件11111</div>"})/* 配置对象定义在外面*/var myConfig={template:"<div style='color: peachpuff' >我是自定义组件222222</div>"}Vue.component("myhtm2",myConfig)new Vue({el:"#app"})new Vue({el:"#app2"})
</script>

全局组件都能使用

八、局部组件

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

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

测试

<div id="app"><myhtm1></myhtm1><myhtm2></myhtm2><myhtm3></myhtm3></div>
<h1>====================================================================</h1><div id="app2"><myhtm1></myhtm1><myhtm2></myhtm2><myhtm3></myhtm3></div><myhtm2></myhtm2>
<script type="text/javascript">//局部组件只能够在所挂载的标签中使用// 在局部组件的绑定标签之外使用直接报错Vue.component("myhtm1",{template:"<div style='color: aquamarine' >我是全局组件11111</div>"})new Vue({el:"#app",components:{"myhtm2":{template:"<div style='color: aquamarine' >我是app中的局部组件22222</div>"},"myhtm3":{template:"<div style='color: grey' >我是app中的局部组件33333</div>"}}})new Vue({el:"#app2"})
</script>

报错

九、组件使用两种HTML模板

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

<template id="mytemplate1"><h3 onclick='javascript:alert(`我是组件222222`)' style='color: pink'>我是组件2222</h3>
</template>
<script id="mytemplate2" type="text/template"><h3 onclick='javascript:alert(`我是组件222222`)' style='color: pink'>我是组件2222{{name}}{{test}}</h3>
</script>
<div id="lrtest"><myhtml></myhtml><myhtml2></myhtml2><myhtml3></myhtml3>
</div>
<script>var tmplateStr = "<h3 style='color: aquamarine' onclick='javascript:alert(`我是组件模板1`)' >我是组件111111</h3>"var componentConfig = {"template":tmplateStr}new Vue({el:"#lrtest",components:{"myhtml":componentConfig,"myhtml2":{/*通过id引用页面中的模板*/"template":"#mytemplate1",//"template":"#mytemplate2",/*模板中如果要使用数据，必须用函数返回*/data(){return {name:"组件2",test:"组件2"}}},//es6语法  在浏览器中不能直接运行"myhtml3":() => import("./js/myhtml3.js")}})

第一种方式在自定义组件template属性直接写html代码字符串或者定义一个字符串变量来引用当作模板，使用的时候在组件中调用，缺点如果代码太多需要拼接
第二种方式，引用页面中的标签或者script 写好的HTML当作模板通过id引用
第三种方式，外部引入 es6的语法不能直接运行
js中拼接html代码段

十、路由

安装路由
在当前项目下执行命令
3. 然后查看package.json查看是否安装成功

使用步骤

头部引入路由
js中
启用路由功能: Vue.use(VueRouter)
定义路由对象：var router = new VueRouter({routes:[{},{}]})
定义组件;自定义组件的方式
将自定义组件绑定到路由对象：{
routes路由资源，是一个数组可以绑定多个组件
每个route都有path（路径）和component（组件）属性
代表了路径和这个路径的组件，然后渲染到页面中的router-view
}
将路由对象绑定到vue对象并且只能在vue对象绑定的块级区域内才可以使用这个绑定的路由

 <div id="lrtest"><!-- 路由的功能已经实现了  这里只是方便跳转看到效果      访问产品的路径    --><router-link to="/product" >产品介绍</router-link><!--访问关于我们的路径--><router-link to="/about" >关于我们</router-link><!--路由的路径资源渲染的页面--><router-view></router-view></div><script>/*启用路由*/Vue.use(VueRouter)/*定义组件*/var index = Vue.component("index",{template:"<h3 style='color: greenyellow'>这是首页</h3>"})var product = Vue.component("product",{template:"<h3 style='color: greenyellow'>产品介绍</h3>"})var about = Vue.component("about",{template:"<h3 style='color: greenyellow'>这是关于我们</h3>"})var router = new VueRouter({/*路由资源，是一个数组*/routes:[{/*路由访问的路径*/path:"/",/*路由的组件* 自定义标签* */component:index},{path:"/product",component:product}, {path:"/about",component:about}]})new Vue({el:"#lrtest",/*如果是router默认名字，可以只写router*/router:router})</script>

十一、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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="dist/bundle.js"></script><!--<link rel="stylesheet" type="text/css" href="./css/index.css">-->
</head>
<body><div>打包测试</div><div>打包测试</div><div>打包测试</div>
</body>
</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