博客

获取到用户点击或者勾选的值

<li @click=“clici(


item


)” v-for=”


item


in data” :key=”id”> {

{item}}</li>

<script>

clici(item){

}

</script>

v-model        实现数据的双向绑定

v-model.lazy        只有当用户提交或enter键后才触发，去同步数据

v-model.trim        自动过滤用户输入的首位空白字符

组件化开发

1、开发步骤：

组件引入

组件挂载

组件显示

2、组件的组织——嵌套的组件树

<div id="app">
  <component1></component1>
  <component1></component1>
</div>
<script>
  //根组件
  const app = Vue.createApp({})
  app.component("component1",{
    template:`
    <h1>hello component</h1>
    <component2></component2>
  `
  })
  app.component("component2",{
    template:`
      <h2>i am component2</h2>
    `
  }
  app.mount("#app") //注意这里要写在最后，不然组件无法生效
</script>

3、组件交互 数据传递

3.1 ◉子组件从父组件取值 数据 从父组件传递到子组件

◉非动态

传递数据类型不限，注意子组件接收数组时的写法：


数组和对象必须使用函数形返回

数组

3.2 ◉父组件从子组件取值 数据从子组件传递到父组件        使用自定义事件 $emit

同时父组件想要显示子组件传递过来的数据，则

点击按钮前

点击后

4、组件生命周期

页面一启动就会自动调用该函数

◉创建时：beforeCreate、created（组件创建完成不代表，已显示）

◉ 渲染时：beforeMount、mounted

一般把网络请求放在mounted 函数中，做数据渲染

◉更新时：beforeUpdate、updated

◉卸载时：beforeUnmount、unmounted

一般把 定时器和性能消耗的组件 放在beforeUnmount 函数中销毁，处理掉。