一、指令
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" οninput="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