Vue与webpack基本使用介绍
MVVM
View id=app的div
VM new Vue({})
Model Vue实例中的data:{}
Vue的指令
基本概念:
Vue中指令都是以v-xx开头，指令的作用，最终
都是拿着数据，渲染我们指令标签里面的内容
{{}}插值表达式
v-text/v-html 直接显示文本，显示网页
v-bind 数据绑定 让我们页面上显示的值动态化(单向
数据流的体现)
单向数据流:当模型发生更改之后，我们的视图
跟着变化
注意:
v-bind可以简写成`:`
举例:
v-bind:href="xxx"
:href="xxx"
v-on:事件处理
当我们触发了某个事件之后，要有对象的处理函数
注意:
1、当我们触发的事件处理函数中没有参数的时候，在v-on里
面直接写函数名称可以(加上()调用也可以)
2、如果我们触发事件的处理函数中有参数，不能省略我们
(形参列表)
3、v-on: 可以简写成 @
4、事件不只是click，可以参考事件类型一表：
https://developer.mozilla.org/zh-CN/docs/Web/Events
v-model 双向数据绑定
模型 ---> 视图
视图 ---> 模型
注意点:
1、不是所有html元素都可以使用v-model，一般是带有value
值的html元素才可以用
2、双向数据绑定的原理
Angular ： 脏值检查
Vue : 属性检查/劫持
http://www.cnblogs.com/kidney/p/6052935.html
https://segmentfault.com/a/1190000006599500
v-if/v-show 条件渲染
注意:
1、v-else 元素必须紧跟在 v-if 或者v-else-if 元素的后面——
否则它将不会被识别。
v-if&v-show
区别:
v-if 如果为假，不会创建dom元素
v-show 如果为假，会创建dom元素，通过样式隐藏了
v-show 初始化的渲染效率要低，但是v-if有更高的切换效率更高
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内
的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做
——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元
素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始
渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较
好；如果在运行时条件不太可能改变，则使用 v-if 较好。
v-for 列表渲染
作用于谁身上，我们就把v-for写在谁身上
不带索引 v-for="person in persons"
带索引 v-for="(person,index) in persons"
Vue组件（Component）
基本概念:
组件可以扩展 HTML 元素，封装可重用的代码。
抽离相同功能的代码到一个单独的组件中，不要把所有的
代码都写在id=app的div中
组件是自定义元素
Vue组件定义的方式:5种
1、先定义，再注册
2、定义、注册一步到位
3、把定义我们组件内容代码抽离到
<template></template>标签中去
4、把定义我们组件内容代码抽离到
<script type="x/template"></script>中去
5、三大部分（常用）：
<template>写html元素，Vue指令</template>
<style>修饰html元素</style>
<script>业务逻辑</script>
注意点:
1、组件必须要有个根元素
2、组件的模型data，必须是函数
过滤器（filter）
作用：对服务器返回的数据，先过滤，再渲染
时间:momentjs
私有过滤器
只有在当前Vue实例中使用
filters:{
toUC:function(input){
return input.toUpperCase()
}
}
```
全局过滤器
在所有的Vue实例中都可以使用
Vue.filter('toUC',function(input){
return input.toUpperCase();
})
```
注意点:
filters定义，和methods比，filters里面的函数必须要有返回值
路由（vue-router）
前端的路由(Angular，Vue，React)
作用:当触发了某个路由之后，决定将哪个组件，显示在当前的页面上
官方文档:
https://router.vuejs.org/zh-cn/essentials/getting-started.html
要点:
1、肯定要有对应的跳转的组件（先定义组件，不要注册）
2、组件要有一个呈现的地方
ng-view / router-view
3、设置我们路由和组件对应关系(注册组件和设置路由与组件的对象关系)
4、设置我们路由和Vue实例的关系
5、触发我们的路由，router-link
步骤:
1、必选先导入 vue.js，然后再导入vue-router.js
2、分两大块
html
1、跳转的超链接
2、呈现组件的占位符
js
1、定义组件或是导入外部组件
2、设置路由与组件的对应关系(设置路由规则)
3、把创建好的路由注入到Vue实例中(将路由对象纳入到Vue实例中管理)
注意点:
1、一定别忘记，把我们创建好的路由，注入到我们的根
实例 new Vue({router:xxxx})
2、一定得有我们组件呈现的地方
引申:
1、打开我们应用就让他显示一个默认的组件?
在我们设置路由规则的地方，设置以下/让它重定向
到指定的路由中去
{path:'/',redirect:'/newslist'},
```
------------------
##### 网络请求（vue-resource）
Vue
vue-resource
参考:
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
步骤:
1、先导入vue.js,在导入vue-resource.js
2、使用
this.$http.get
this.$http.post(url,body,{emulateJSON:true})
this.$http.jsonp
注意点:
post请求第三个参数设置为:emulateJSON:true
this.$http.post(url,
{username:'afdaf',password:'lisi'},
{emulateJSON:true})
```
Vuex的基本概念
1、对我们项目中的全局共享的数据，来操作
2、在多个组件之间进行数据的传递(间接的)，但是和中央事件总线的区别是，Vuex不是直接把数据传给另外一个组件，
而是把更改之后的数据，放入到公共的仓库中，另外一个组件需要使用的时候去仓库中取
Vuex的核心概念
state:数据，相当于自定义组件中局部数据 data(){return {}}
getters: 从state中获取值，建议这样使用
Mutations : 同步更改state中的数据，建议这样使用
Actions: 异步更改state中的数据，建议这样使用
注意点
1、即使用了Vuex也能保留组件内部(局部)的数据
export default{
data(){
return {}
}
}
```
2、如果该数据只在单个组件中使用，就不需要放入Vuex中的state
3、Vuex所有的数据都是放在内存中的
### 代码步骤
1、安装或是导入
在网页中使用CDN，但是必须先导入Vue
Webpack使用npm安装
2、使用
demo(html)
### 计算属性
参考:
https://cn.vuejs.org/v2/guide/computed.html
Vue实例中一个属性，和methods很相似
computed:{
函数
}
计算属性的特点（和methods不太一样的地方）
1、计算属性中，所有的函数必须要返回值，没有返回值则没有意义
2、methods中，函数可以有返回值，也可以没有返回值
3、计算属性使用的值，发生更改会自动去取，如果没变，不会取，这个是methods中函数做不到的
4、计算属性能做到有缓存，如果引用的值没变，直接从缓存中取出来之后返回回去
## Vue.js devtools谷歌调试Vue的插件
作用：用来监控我们的Vue中数据及页面元素，方便调试
注意点:
必须要使用开发版本，否则不起作用
参考:
https://stackoverflow.com/questions/43781351/vue-js-is-detected-on-this-page-devtools-inspection-is-not-available-because-it
## Webpack的使用
##### 基本概念
Webpack 是当下最热门的前端资源模块化管理和打包工
具。它可以将许多松散的模块按照依赖和规则打包成符合
生产环境部署的前端资源。还可以将按需加载的模块进行
代码分隔，等到实际需要的时候再异步加载。通过
loader 的转换，任何形式的资源都可以视作模块，比如
CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、
JSON、Coffeescript、 LESS 等。
开发阶段配合一个全局包和一个本地包，就可以实现所见及所
得的效果
最后项目做完了，只需要执行一个话 webpack，把所有源代
码，进行压缩，打包，生成生产环境所需的代码
安装两个全局包
npm i webpack webpack-dev-server -g
注意点:
Webpack2.x开始，支持打包的时候，自动将es6转成es5
##### 基本使用
步骤及注意点:
1、webpack打包必须要有一个入口文件(一般来说入口文
件指定一个即可)，我们一般打包只会打包这个入口文件
2、在我们要打包文件的目录下 webpack 入口文件 打包
之后的文件(一般把它命名为bundle.js)
3、运行起来，需要借助一个html，我们一般创建一个
index.html，然后导入我们刚刚打包好的bundle.js
打包多个文件
1、在终端中使用 webpack打包 webpack 入口文件 输出
的文件(bundle.js) 同样只需要打包入口文件即可，因为入口文件
中已经包含了其它模块
打包css
1、安装两个本地包
npm i style-loader css-loader --save-dev
##### Webpack核心概念
入口文件
输出文件:
https://doc.webpack-china.org/concepts/output/
Loader:
让我们webpack支持打包非js文件，支持的Loade列表 https://doc.webpack-china.org/loaders/
比如：css: style-loader，css-loader
1.x 和 2.x 的区别
1.x 可以省略loader 必须 !style!css
2.x 不能省略 必须 !style-loader!css-loader
注意点:1.x和2.x在loader方面使用不一样
https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
plugins:
作用:利用插件帮我们做一些额外的事情
例子:
使用webpack本地包插件，来实现输出的文件头部添加注释信息。
使用步骤:
1、在你的项目本地，安装一个本地包 webpack
2、使用npm安装html-webpack-plugin
3、导入根据模版文件生成index.html的插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
4、在webpack.confi.js中配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', //以参数文件生成的最终的文件名称
template: './template.html' //参照文件的路径
})
```
注意点:上面几个在webpack.config.js中配置的时候，都是同级
的，千万不要嵌套，写在别人里面了
Webpack配置文件（webpack.config.js）
目的:减小我们在终端里面输入很长的打包指令，减少错误
使用:
1、在我们的项目根路径下创建一个js文件 webpack.config.js
2、配置entry【必须】,output【必须】
配置loader，
参考:https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
3、我们只需要在终端中，在项目根目录下输入我们 webpack指令即可
注意：
1、里面所有的代码都是写在
module.exports = {}
2、里面的代码只能是核心概念中的代码
Webpack其它的指令介绍
使用的时候在webpack后面接上一些指令
webpack --progress 【在控制台输出打包进度】
webpack -p【压缩js,这里只有一个_，后面我们在实际开发
中使用webpack本地包中自带uglify的压缩功能】
webpack --config 指定你webpack要打包的文件名称
注意点：
1、以上其它的指令，除了-p【压缩】，其它都是两个_
2、上面的--progree -p --config，没有先后顺序，可以接
一个也可以接多个
3、--progress -p --config，不能在webpack.config.js中配置
开发阶段如何提高打包效率
方式1、在我们执行webpack指令的时候，在后面加上 --watch
方式2、webpack-dev-server
注意事项:使用我们上面两种方式，不要放在中文目录下，路径中也不要特殊符号
webpack-dev-server
前提:
全局安装webpack-dev-server这个全局包：
npm i webpack-dev-server -g
最基本的用法:
1、执行webpack-dev-server --progress -p --config xxx
高级用法:(想换一个端口号、自动打开浏览器、热更新)
执行webpack-dev-server --progress --port 3008 --open
--hot --inline【热更新】
注意事项：
1、webpack-dev-server打包的bundle.js在内存中
2、我们运行的html文件，必须叫index.html
3、我们在index.html导入我们打包好的bundle.js必须这样写
<script type="text/javascript" src="bundle.js"></script>
```
4、不要把我们的项目目录放在中文路径下
##### webpack-dev-server和webpack有什么区别
1、使用阶段不一样
开发阶段:使用webpack-dev-server
生产阶段:webpack
2、产生的东西不一样
webpack-dev-server，打包出来的东西，在内存，不会生
成一个实实在在的bundle.js【效率高】
webpack打包，会生成一个实实在在的bundle.js
3、凡是webpack有功能，webpack-dev-server都有，并且还
提供了比webpack更牛逼的功能
`webpack --progress -p xxx`
`webpack-dev-server --progress -p xxx`
------------------
## 使用webpack构建Vue项目
##### 创建一些必备的文件夹和文件
src : 项目源代码目录
main.js 打包的入口文件(项目中需要打包的所有的文件都
在这里导入)
App.vue 项目的根组件，这个使我们项目一起动用户看到
的第一个组件(单文件组件)
package.json 描述我们项目文件，记录我们安装了哪些第三方包
package.json自动生成指令：` npm init -y `
##### 配置webpack.config.js中最基本的信息
entry: './src/main.js', //项目打包的入口文件 【必须】
output: {//打包输出文件【必须】
path: __dirname+'/dist',
filename: 'bundle.js'
}
```
在App.vue中写代码
<template>
<div>
我是根组件
</div>
</template>
```
##### 在main里面写代码
1、安装vue
npm i vue --save
2、导入vue
`import Vue from 'vue' //const Vue = require('vue')`
3、创建根实例，告诉我们根实例，我们渲染是App.vue这个组件
new Vue({
el:"#app",
render:function(createElement){
return createElement(App) //告诉我们Vue实例，到时候
启动项目，渲染的就是我们App.vue
}//根实例将那个组件渲染到id=app的div中去
})
```
让我们webpack支持.vue文件的打包
参考:https://doc.webpack-china.org/loaders/
1、安装 vue-loader
npm i vue-loader vue-template-compiler css-loader --save-dev
2、在webpack.config.js
module: { //Loader
rules: [
{
test: /\.vue$/, //匹配以.vue结尾的
use: [
{
loader: "vue-loader"
}
]
}
]
}
```
##### 运行
`webpack-dev-server --progress --port 6008 --open`
也可以配置到package.json中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --progress --port 6008 --open"
},
```
在命令栏使用 npm run dev 指令调用即可
