做网站新闻移动动态网络服务提供者收集和使用个人信息应当符合的条件有

v-model

原理：v-model本质上是一个语法糖。例如应用于输入框，就是value属性和input事件的合写。

作用：提供数据的双向绑定

1. 数据变，视图跟着变 :value
2. 视图变，数据跟着变 @input

注意：$event用于在模板中，获取事件的参数

<template><div class="app"><input v-model="msg" type="text"><br><input :value="msg1" @input="msg1 = $event.target.value" type="text"></div>
</template>

表单类组件封装$v-model简化代码

表单类组件 封装 实现子组件和父组件数据的双向绑定

1. 父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
2. 子传夫：监听输入，子传夫值给父组件修改

父元素：

<template><div id="app">
<HelloWorld :citiyId="selectId" @changeId="selectId = $event"></HelloWorld></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {data(){return{selectId: '101'}},components:{HelloWorld}
}
</script><style></style>

子元素：

<template><div class="app"><select :value="citiyId" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">深圳</option><option value="105">广州</option></select></div>
</template><script>
export default {props:{citiyId: String},methods:{handleChange(e){this.$emit('changeId',e.target.value)}}
}
</script><style></style>

父组件 v-model简化代码，实现子组件和父组件数据双向绑定

1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接绑数据

父组件：

<template><div id="app">
<HelloWorld v-model="selectId">
</HelloWorld></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {data(){return{selectId: '105'}},components:{HelloWorld}
}
</script><style></style>

子组件：

<template><div class="app"><select :value="value" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">深圳</option><option value="105">广州</option></select></div>
</template><script>
export default {props:{value: String},methods:{handleChange(e){this.$emit('input',e.target.value)}}
}
</script><style></style>

表单类基础组件封装思路

1. 父传子：父组件动态传递prop数据，拆解v-model，绑定数据
2. 子传父：监听输入，子传父值给父组件修改

本质：实现了实现子组件和父组件的双向绑定

v-model简化代码的核心步骤

1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接绑数据

.sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码

特点：prop属性名，可以自定义，非固定为value

ref和$refs

作用：利用ref和$refs可以用于获取dom元素或组件实例

特点：查找范围：当前组件内（更精确稳定）

获取组件：

1.ref：

1. 在vue模板中，可以使用ref特性来标识子组件或DOM元素
2. 通过ref可以访问子组件实例或DOM元素
3. 一般在组件内部使用ref来获取子组件实例或DOM元素，并只能在组件内部使用

<template><child-component ref="myComponent"></child-component>
</template><script>
export default {mounted() {this.$refs.myComponent.doSomething();}
}
</script>

2.$refs

1. $refs是vue实例上的一个对象，用来存储所有拥有ref特性的子组件或DOM元素引用。

通过$refs可以直接访问子组件实例或DOM元素

<template><child-component ref="myComponent"></child-component>
</template><script>
export default {mounted() {this.$refs.myComponent.doSomething();}
}
</script>

调用组件内的方法：

<template><div><child-component ref="childRef"></child-component><button @click="callChildMethod">调用子组件方法</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {callChildMethod() {this.$refs.childRef.childMethod(); // 调用子组件的方法}}
}
</script>

vue异步更新，$nextTick

<template><div><p>{{ message }}</p><button @click="updateMessage">更新消息</button></div>
</template><script>
export default {data() {return {message: '初始消息'};},methods: {updateMessage() {this.message = '更新后的消息';this.$nextTick(() => {// 在 DOM 更新完成后执行的操作console.log('DOM 更新完成');});}}
}
</script>