vue
- 前端渐进式框架
指令
- 文本 {{}} ,v-text , v-model
- 条件渲染 v-if v-else-if v-else v-show
- 事件 @/v-on:事件名,$event事件参数
- 属性v-bind / :属性名
- 表单 v-model 修饰符.number .lazy
参数对象
- el指定模板
- data指定数据
- methods 存储方法
- computed 计算属性 从现有数据计算新数据
- watch 监听 handel 处理函数 deep深度监听,
- filters 管道,过滤 常用数据格式化
- directives 自定义指令
directives: {
img: {
inserted(e, binding) {
console.log(e, binding);
//随机色
let color = Math.floor(Math.random() * 1000000);
e.style.backgroundColor = "#" + color;
var img = new Image();
img.src = binding.value;
img.onload = () => {
e.append(img);
};
},
},
},
修饰符
- 事件修饰符
- stop 阻止冒泡
- once 执行一次
- prevent 阻止默认事件
- 按键修饰符
- enter
- esc
- down left right top
获取DOM
this.$refs.name
动画
- transition组件
- 类 v-enter-active v-enter v-enter-to v-leave-active v-leave v-leave-to
组件
- 全局组件
Vue.component("Counter", {
template: `<div>
<button @click="btn()">点我</button>
</div>`,
methods: {
btn() {
console.log(this);
},
},
});
- 局部组件 需在父组件注册
- props 父传子
data() {
return {
num: 1,
};
},
created() {
this.num = this.count;
},
props: {
count: {
type: Number,
default: 0,
},// 指定传入数据的默认值和类型
},
- 子传父 this.$emit(‘name’,{})