Vue笔记

							Vue笔记

v-cloak、 v-text 、 v-html、
v-bind：（绑定）缩写 : 、
v-on：（指定命令）缩写：@

事件修饰符
.stop 阻止冒泡

.prevent 阻止默认事件 例如：a标签

.capture 添加事件侦听器使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）出发时触发回调 （阻止自身冒泡）

.once 事件只触发一次

v-model: 双向数据绑定 （只使用于表单元素）

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

使用class样式：
1.数组

xxxxx

2.数组中使用三元表达式

This is big big H1

3.数组中嵌套对象

This is big big H1

4.直接使用对象

This is big big H1

内联样式：

<!-- 第一种 直接使用-->
<!-- <h1 :style="{color:'red','font-weight':200}">this is big h1</h1> -->

<!-- 第二种 定义在data中引用 -->
<!-- <h1 :style="styleobj1">this is big h1</h1>  -->
<!-- 第三种   定在在data中，通过数组多次引用 -->
<h1 :style="[styleobj1,styleobj2]">this is big h1</h1> 

v-for 循环

索引值：{{i}}--------------值：{{item}}

v-if 的特点：每次都会重新删除或创建元素
v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式

forEach some filter findIndex 这些都属于数组的新方法 ，都会对数组中的每一项，进行遍历，执行相关的操作；

过滤器 Vue.filter(‘过滤器名字’，方法（msg，参数）) 过滤器使用

{{msg | 过滤器名字（可加参数）}}

可多个过滤器一起使用 执行顺序 左 ---->右

filters: 这里定义私有过滤器 过滤器名：function（参数） 写vm里操作

padStart(2，‘0’) 当数只有一位时，补充0在头部 例如： 1 =》 01
padEnd(2,‘0’) 当数只有一位时，补充0在尾部 例如： 1 =》 10

自定义按键修饰符
Vue.config.keyCodes.自定义名称 = 123 <= 按键代码编号
使用方式 ： Keyup.自定义名称=”方法“

自定义指令：
Vue.directive(‘指令名称’,{对象函数:function（el）{ 。。。。} }) 函数 : bind inserted updated

缩写方式 ： Vue.directive(‘指令名称’,function（el）{ 。。。。} )

自定义私有指令
directives: ‘指令名称‘：{指令函数：function（el,binding）{ …}} 在vm 里操作

常用三种请求方法
get Vue.$http.get{(}^{\prime }路径{名}^{\prime }).then{(}^{\prime }回调方{法}^{\prime })例如：Vue.$http.get(‘www.baidu.com’).then(function(result)){ console.log(result.boby.xxxx)}

post Vue.$http.post(‘路径’,参数对象,{emulateJSON:true}).then(‘回调方法’)

jonsp Vue.$http.jonsp(‘路径名’).then( (缩写) result=> { console.log(result.boby.xxx) })

全局配置数据接口的根域名
Vue.http.options.root = ‘http://vue.studyit.io/’

全局配置post的第三个参数 ： meulateJSON
Vue.http.options.emulateJSON = true; //写好之后post请求第三个参数就可以省略；