一、指令
1、 v-cloak 使用v-cloak 能够解决插值表达式闪烁的问题
[v-cloak] { display:none;}
2、 v-text 的属性值会替换元素内的内容
3、 v-html 的属性值会替换元素内的内容（能够识别html标签）
4、 v-bind 属性的绑定 可以简写为 “ : ” v-bind中可以写合法的js表达式
5、 v-on 事件的绑定 可以简写为 “ @ ”
5-1、事件修饰符：
① .stop 阻止事件冒泡(冒泡是从里到外)
② .capture添加时间侦听器时使用事件捕获模式（捕获是从外到内）
③ .prevent 阻止默认行为
④ .self 只有点击当前自己的时候才触发（点击子元素不会触发）
⑤ .once 只触发一次
6、 v-model 双向数据绑定
v-model 的原理是利用了h5 oninput 事件
<input type="text" oninput="myFunction()"> oninput 事件在用户输入时触发。
提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。
另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
<div id="app"> <div class="directives"> <input type="text" :value="text" @input="setValue" name="" value=""> {{text}} </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: function(){ return { text: 'hello World' }; }, methods:{ setValue:function($event){ this.text = $event.target.value; } } }); </script>
在@input事件中设置响应，在响应中修改text的值，然后再通过绑定属性v-bind绑定value同步value值，
7、v-for 循环数组、循环对象、迭代数字
注意：迭代数字是从1开始的
8、v-if
9、v-show
二、 vue中使用样式
1、 使用class样式
①、数组
<h1 :class="['box' , 'box1']"> </h1>
②、数组中使用三元表达式
<h1 :class="['box' , 'box1' , flag?'box2':'']"> </h1>
当flag为true时添加box2类名，为false时为空
③、 在数组中使用嵌套对象
<h1 :class="['box' , 'box1' , { 'box2' : flag }]"> </h1>
④、直接使用使用对象
<h1 :class="{red:true,active:true}"> </h1>
2、 内联样式
<h1 :style="{color:'red','font-weight':'bold'}"></h1>
过滤器：
全局过滤器
<div id="app"> <!-- 过滤器使用： 数据 | 过滤器名 --> {{uname | upper}} </div> <script> // 全局过滤器 Vue.filter("upper",function(value) { // 参数value是数据 // 返回值替换原数据 return value.toUpperCase(); }); let vm = new Vue({ el: "#app", data: { uname: "lily" } }); </script>
局部过滤器
<div id="app"> <!-- 过滤器使用： 数据 | 过滤器名 --> {{uname | upper}} </div> <script> let vm = new Vue({ el: "#app", data: { uname: "lily" }, // 定义局部过滤器 filters: { "upper" :function(value) { return value.toUpperCase(); } } }); </script>
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串：
eg : var hh = dt.getHours().toString().padStart(2, '0');
按键修饰符：
@keyup.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
自定义全局按键修饰符：
Vue.config.keyCodes.f2 = 113;
自定义指令：
全局：
Vue.directive('focus',{ bind:function(el){ el.focus(); } })
自定义私有指令：与data平级 ,定义时不用带前缀 v- 使用时要带上前缀 v-
使用：
<h3 v-fontweight = "'blod'" v-fontsize="'30px|30'">aaa</h3>
directives:{
'fontweight':{
bind: function(el,binding){
el.style.fontweight = binding.value
}
},
'fontsize':function(el,binding){ //等同于把代码写到了 bind和updata钩子 中去
el.style.fontsize= parseInt(binding.value) + "px";
}
}
自定义指令钩子函数：
1）bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
2）inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
3）update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
4）componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
5）unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数的参数 (包括 el，binding，vnode，oldVnode) 。
钩子函数被赋予了以下参数：
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive=”1 + 1”, value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive=”1 + 1” ，expression 的值是 “1 + 1”。arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。
如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
生命中周期函数：
- 创建期间的生命周期函数：
+ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+ created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
+ beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+ mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+ updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
+ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+ destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
大图
vue-resource： vue中数据的请求
还可以使用 `axios` 的第三方包实现实现数据的请求
1、jsonp
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
2、post
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
3、get
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
案例，品牌列表的增删改查
vue动画：
nrm：提供国内镜像地址
nmp i nrm -g 全局安装nrm包
nrm ls 查看当前多有可用的镜像源地址以及当前所使用的镜像源地址
nrm use npm 或者 nrm use taobao 切换不同的镜像源地址
webpack：
依赖node,安装node环境
## webpack安装的两种方式
1. 运行`npm i webpack -g`全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行`npm i webpack --save-dev`安装到项目依赖中
## 初步使用webpack打包构建列表隔行变色案例
1. 项目中运行`npm init -y`初始化项目，使用npm管理项目中的依赖包
2. 创建项目基本的目录结构
3. 使用`cnpm i jquery --save`安装jquery类库
4. 创建`main.js`并书写各行变色的代码逻辑：
```
// 导入jquery类库
import $ from 'jquery'
// 设置偶数行背景色，索引从0开始，0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');
```
5. 直接在页面上引用`main.js`会报错，因为浏览器不认识`import`这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
6. 运行`webpack 入口文件路径 输出文件路径`对`main.js`进行处理：
```
webpack src/js/main.js dist/bundle.js
```
自动打包：
cnpm i webpack-dev-server -D
cnpm i webpack@版本号 -D 项目本地 安装webpacak
## 使用webpack打包css文件
1. 运行`cnpm i style-loader css-loader --save-dev`
2. 修改`webpack.config.js`这个配置文件：
```
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
```
3. 注意：`use`表示使用哪些模块来处理`test`所匹配到的文件；`use`中相关loader模块的调用顺序是从后向前调用的；
## 使用webpack打包less文件
1. 运行`cnpm i less-loader less -D`
2. 修改`webpack.config.js`这个配置文件：
```
{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
```
## 使用webpack打包sass文件
1. 运行`cnpm i sass-loader node-sass --save-dev`
2. 在`webpack.config.js`中添加处理sass文件的loader模块：
```
{ test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
```
## 使用webpack处理css中的路径
1. 运行`cnpm i url-loader file-loader --save-dev`
2. 在`webpack.config.js`中添加处理url路径的loader模块：
```
{ test: /.(png|jpg|gif)$/, use: 'url-loader' }
```
3. 可以通过`limit`指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
```
{ test: /.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
```
## 使用babel处理高级JS语法
1. 运行`cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev`安装babel的相关loader包
2. 运行`cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev`安装babel转换的语法
3. 在`webpack.config.js`中添加相关loader模块，其中需要注意的是，一定要把`node_modules`文件夹添加到排除项：
```
{ test: /.js$/, use: 'babel-loader', exclude: /node_modules/ }
```
4. 在项目根目录中添加`.babelrc`文件，并修改这个配置文件如下：
```
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
```
5. **注意：语法插件`babel-preset-es2015`可以更新为`babel-preset-env`，它包含了所有的ES相关的语法；**
## 相关文章
[babel-preset-env：你需要的唯一Babel插件](https://segmentfault.com/p/1210000008466178)
[Runtime transform 运行时编译es6](https://segmentfault.com/a/1190000009065987)
webpack 使用 vue：
npm i vue -S
import Vue from 'vue'
var vm = new Vue({
data:{
msg:"123"
}
})
Mint_UI：
## 使用 饿了么的 MintUI 组件
[Github 仓储地址](https://github.com/ElemeFE/mint-ui)
[Mint-UI官方文档](http://mint-ui.github.io/#!/zh-cn)
## 使用 MUI 代码片段
> 注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
> 因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
> 从体验上来说， MUI和Bootstrap类似；
> 理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；
注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
[官网首页](http://dev.dcloud.net.cn/mui/)
[文档地址](http://dev.dcloud.net.cn/mui/ui/)
git： git推送前可以绑定仓库
git remote add origin git@gitee.com:zjzweb/heima.git