この記事は以下から転載されています: JS Daily Question
WeChat 公開アカウント: JS Daily Question
Vue のさまざまなコマンドと構文形式は覚えやすい
1.vueディレクティブ-v-model修飾子
構文: v-model.modifier="vue データ変数"
.number は parseFloat を使用して数値型に変換されます。trim は
先頭と末尾の空白文字を削除します。lazy
トリガーは、inupt ではなくフォーカスが失われたときに変更されます。
2. 計算されたプロパティ
計算されたプロパティは、レンダリングのパフォーマンスを向上させるためにキャッシュされます。
既存のデータを処理してページ上の新しいデータを取得する必要がある場合は、計算された属性を使用する必要があります。
よくある書き込み
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
完全な書き込み
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
3.vueリスナー
データ (data/computed など) の値の変化を監視できます。データの値には、基本データ型、参照データ型の種類があります
。
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
4.scoped はコンポーネントのプライベート スタイルを実装します。
<stype scoped>
h2 {
} // 样式只会在当前组件内生效
</style>
5. 父から息子へ
6.子传父
7.vueコンポーネントのライフサイクル
4つの段階:
初期化 => コンポーネントの作成 => beforeCreate
マウント => 表示コンポーネントのレンダリング => beforeMount マウントされた
更新 => 変数の変更 => ビューの更新のトリガー => beforeUpdate 更新
破壊 => ページの切り替え => コンポーネント オブジェクトはメモリから削除されます => beforeDestory 破壊されました
8. コンポーネントの高度なプロパティの検証
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
}
}
}
9. コンポーネントの進歩 - 動的コンポーネント
<component :is="comName"></component> //comName是变量,值为需要切换的几个组件名
10. コンポーネントの進歩 - キープアライブコンポーネント
キープアライブ組み込み Vue コンポーネントを使用して、動的コンポーネントを破棄する代わりにキャッシュできるようにします。
<keep-alive>
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
コンポーネント アドバンスト キープアライブ コンポーネント指定キャッシュ
構文:
1.
include="组件名1,组件名2..."
:include="['组件名1'， '组件名2']"
<keep-alive include="name1,name2">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
11. コンポーネントの進歩名付きスロット
フォーマット
定義:
<slot name="xxx">
使用：
<template #xxx></template>;
<template v-slot:xxx></template>
12. カスタム命令 - 基本的な使い方
{
data(){
},
methods: {
},
directives: {
focus: {
// 自定义指令名
inserted(el){
// 固定配置项 - 当指令插入到标签自动触发此函数
el.focus()
}
},
},
}
13. カスタム指示値の転送と更新
目標: カスタム命令を使用し、値を渡す
要件: 色の命令を定義する - 色を渡し、ラベルのテキストの色を設定し、
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 の取得、カスタム操作
14. アクシオスリクエスト
async loadData(){
const res= await axios.get("http://.......")
// console.log(data);
}
},
created(){
this.loadData()
}
この記事は以下から転載されています: JS Daily Question
WeChat 公開アカウント: JS Daily Question