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() }