1、vue 指令 -v-model 修饰符
语法:
v-model. 修饰符 =”vue 数据变量 ”
.number 以 parseFloat 转成数字类型
.trim 去除首尾空白字符
.lazy 在失去焦点时触发更改而非 inupt 时 2、计算属性
计算属性有缓存，进步渲染性能。
如果在页面上须要用到 对现有的数据进行加工失去新数据，则时要应用计算属性。
写法：
computed: {
"属性名": {set( 值){ },
get() {return "值"}
}
}3、vue 监听器
能够监听数据（data/computed 等）的值的扭转。数据的值有类型：根本数据类型，援用数据类型
深度监听
watch: {
"要监听的属性名": {
immediate: true, // 立刻执行
deep: true, // 深度监听简单类型内变动
handler (newVal, oldVal) {}}
}4、scoped 实现组件的公有款式
<stype scoped>
h2 {} // 款式只会在以后组件内失效
</style>5、父传子
父组件
<template>
<div>
<child :users="user"></child> <!-- 子组件绑定 users 变量 -->
</div>
</template>
<script>
import {child} from "./child";
export default {components: { child},
data() {
return {user: '张三'};
}
};
</script>子组件
<template>
<div>{{users}}</div>
</template>
<script>
export default {props: ["users"] // 接管 user 值
};
</script>6、子传父
子组件
<template>
<div>
<button @click="datas"></button>
</div>
</template>
<script>
export default {
methods: {datas() {this.$emit("info", value); //$emit 的第一个参数是父组件自定义事件的办法名，后边的“value”是子组件要给父组件传递的数据
}
}
};
</script>父组件
<template>
<div>
<child @info="getInfo"></child>
</div>
</template>
<script>
import {child} from "./child";
export default {components: { child},
methods: {getInfo(value) {// value 就是子组件传递过去的数据}
}
};
</script>7、组件进阶 – props 校验
props: {// 根底的类型查看 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {return { message: 'hello'}
}
},
// 自定义验证函数
propF: {validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}8、组件进阶 – 动静组件
<component :is="comName"></component> //comName 是变量, 值为须要切换的几个组件名 9、组件进阶 – keep-alive 组件
用 keep-alive 内置的 vue 组件, 让动静组件缓存而不是销毁
<keep-alive>
<!-- vue 内置的组件 component, 能够动态显示组件 -->
<component :is="comName"></component>
</keep-alive>组件进阶 -keep-alive 组件 - 指定缓存
语法
include="组件名 1, 组件名 2...":include="[' 组件名 1'，' 组件名 2']"
<keep-alive include="name1,name2">
<!-- vue 内置的组件 component, 能够动态显示组件 -->
<component :is="comName"></component>
</keep-alive>10、组件进阶 – 具名插槽
格局
定义：<slot name="xxx">
应用：<template #xxx></template>;
<template v-slot:xxx></template>11、自定义指令 – 根本应用
{data(){},
methods: {},
directives: {
focus: { // 自定义指令名
inserted(el){ // 固定配置项 - 当指令插入到标签主动触发此函数
el.focus()}
},
},
}12、自定义指令 – 传值和更新
指标: 应用自定义指令, 传入一个值
需要: 定义 color 指令 - 传入一个色彩, 给标签设置文字色彩
main.js 定义处批改一下
directives: {
"color":{inserted(el, binding){ // 插入时触发此函数
el.style.color = binding.value;
},
update(el, binding){ // 更新绑定的变量时触发此函数 =》手动更新
el.style.color = binding.value;
}
}
}Direct.vue 处更改一下
<p v-color="theColor" @click="changeColor"> 应用 v -color 指令管制色彩, 点击变蓝 </p>
<script>
data() {
return {theColor: "red",};
},
methods: {changeColor() {this.theColor = 'blue';},
},
</script>总结: v-xxx, 自定义指令, 获取原生 DOM, 自定义操作
13、axios 申请
async loadData(){const res= await axios.get("http://.......")
// console.log(data);
},
created(){this.loadData()
}