关于vue.js:Vue基础点梳理

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