vue

1. 修改器: @click.stop 阻止冒泡
   @keydown.enter 回车键按下触发的事件

2.父子组件之间的传值 :
点击事件(@click=”变量名”) –> 在组件里面的methods写方法(变量名的函数) –> this.$emit(‘事件名’,传递的数据)
–> 父组件接收(@事件名=’新的变量名’) –> 在methods里面写方法(新的变量名函数,函数的括号里面数据是传递的数据)

3.表单的数据绑定: v-model= ‘myValue’,myValue需要在data里面注册.引入的变量需要在data里面注册,不然报错;

4.chexkbox 多选 radio 单选

5.可以在data里面设置数组,数组包含对象,用v-for循环分发,value等于一个变量的时候需要动态绑定,不然报错,在value前面加冒号;

6.延迟绑定(当输入完成之后更新 ) : v-model.lazy (当输入完成后更新)
7.强制值是数字: v-model.number 输出的类型是number

8.trim()方法去掉输入框前后的空格

9.计算属性是跟着input输入框的值更新的(根据myValue更新而更新,时间只是第一次的,死时间)
computed:{myValue() {this.myValue.replace(/\d/g,”)}}

10.methods调用方法 (无论什么时候去调用都会更新,每次调用方法的时间)
methods:{ myValue() {this.myValue.replace(/\d/g,”)}}

11.watch:{myValue:function (val,oldVal){ },myList:function(){ this.tellUser()}}

12.this.tellUser() : 调用方法

13.computed 选项 -计算属性 -有缓存
调用方法(methods)操作,每次调用都会计算
watch监听属性的变化

14.非父子组件通讯 : https://segmentfault.com/a/1190000009982434

15.引入变量: import ComA from ‘./components/a’

16.注册组件: export default { components : {ComA}} (es6简写)

17.template里面标签需要烤串式,需要一个共同的根元素.

18.动态引入模板 : 在data里面进行动态的绑定组件 (:is = ‘BBB’) 跟router-view相似

19.props验证 : ‘my-value’: [String,Number]

20.需要烤串式写法(template props验证 this.$emit()的事件名 )

21.模板插槽: slot标签 (应用场景: 比如你写了一个对话框组件，发布后，你的使用者想自定义标题部分的样式或内容，比如显示很多自己定义的按钮。此时，你就需要使用这个功能了。其实这个功能，就是做到了更灵活。 ),在template模板中
<slot name="head"> no head </slot>
在父组件中 :
任意标签 : <p slot="head"></p> 根据对应的slot显示相应的内容

22.keep-alive包裹的标签: 当访问过后,将会存储起来

23.使用组件树设计项目,配置文件链接各个组件- 命名转换,动态组件(is)
父组件向内传递属性 - 动态属性
子组件向外发布事件
slot插槽传递模板 - 具名slot (默认slot)

高级功能

1. 过渡 自定义至两天 mimixs混合 插件

transition标签(内置组件) 条件 v-show name命名
css 过渡 : v-enter(完全不显示 Opacity:0) –> v-enter-active(显示) v-leave(显示) –> v-leave-active (完全不显示) 改变的是Opacity透明度 v代表是变量名

2.name=”变量名” 过渡效果: transition: all 0.5s ease-out;(在相应的阶段设置效果)

transform : translateX() translateY() rotate()

两个组件之间的切换: 一个按钮设置一个点击事件,变量接收.
变量的方法: 用if 判断 设置的变量相等于原来的模板,是的切换另一个模板,else 切换原来的模板,实现两个模板之间的切换.

transition中设置mode=”out-in”: 多元素之间的切换,当前元素完全消失的时候,进来的元素才会显示.

mode=”in-out”: 会同时显示两个元素,同时出现执行
同样的标签名不显示效果,需要在标签里面添加key属性来区分,才会显示.