Vue2

Vue2

• createApp：每个应用都是通过createApp 函数创建的

• create：页面渲染前执行

• mount：页面渲染后执行

• v-bind：

  支持额外的值类型如字符串、对象或数组

  <button v-bind:disabled="isDisabled">Biwin</button>
  <!-- 简写 -->
  <button :disabled="isDisabled">Biwin</button>

  不使用 v-bind，属性的值将是表达式的字面量值，而不是 Vue 实例的里面数据属性、

• v-on：

  监听 DOM 事件

  <a v-on:click="doSomething"> ... </a>
  <!-- 简写 -->
  <a @click="doSomething"> ... </a>

• v-model：双向绑定

  v-model 在组件上都是使用 属性值 作为 prop，并以 update:属性值 作为对应的事件

  v-model 指定一个参数来更改这些名字

注：

1. v-bind主要用于绑定数据和属性以及表达式，使得vue中的数据能够同步到页面。这种绑定是单向的，意味着数据只能从Vue实例流向页面元素。v-bind可以给任何属性赋值，包括文本、属性、表达式和HTML。

2. v-model则是一种双向绑定，不仅可以将Vue实例中的数据同步到页面，还可以捕获用户的输入值，并将这些值赋值给Vue实例中的属性。v-model主要用于表单元素，如text、radio、checkbox和selected等，这些元素具有value属性。

• ref：用于注册一个引用信息

  <div ref="biwin">Biwin</div>

  在 Vue 实例中，你可以通过 this.$refs.biwin 来访问这个 div 元素。这允许你直接操作 DOM 元素，而不是只能通过数据绑定或方法来影响视图

• 类和样式：

  :style 和 style的区别：
  :style	允许动态地将样式绑定到特定的元素或组件
  style	允许直接在元素上应用 CSS 样式，不需要任何额外的 CSS 文件或样式表
  :class和class的区别：
  :calss	可以动态绑定一个或多个样式，可以实现条件的动态绑定、根据值列表进行动态绑定、根据类名长度进行动态绑定、根据绑定属性的个数进行动态绑定等
  class	只能声明静态样式

• v-if vs. v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；

如果在运行时绑定条件很少改变，则 v-if 会更合适

• v-for：

  情况1.
  <el-option
    v-for="dict in dictList"
    :key="dict.value"
    :label="dict.label"
    :value="dict.value"
  />
  情况2.
  <li v-for="(value, key, index) in prodList">
    {{ index }}. {{ key }}: {{ value }}
  </li>
  prodList:[] //里面内容是对象
  情况3.
  <ul>
    <template v-for="item in items">
      <li>{{ item.msg }}</li>
      <li class="divider" role="presentation"></li>
    </template>
  </ul>

一般不和v-if一起用，但是一起用时，v-if优先级大于v-show

• 事件 @click

• v-input：

v-model.lazy : 在默认情况下，是添加.lazy的，每次change都会改变输入框里面的值

v-model.number : 输入内容自动转换为数字

v-model.trim : 去掉输入内容前后空格

• 生命周期：初始化->销毁有八个阶段

  1. beforeCreate：初始化事件和生命周期，在实例初始化之后，在数据监听和事件配置之前触发。在这个事件中我们是获取不到data数据的。

  2. created：在实例创建后调用，此时已经完成了数据的观测，但是模板还未编译/挂载。

  3. beforeMount：钩子函数，在组件被挂载到页面之前触发。一般我们可以在这个函数中进行一些页面初始化的工作，比如通过ajax请求数据来对页面进行初始化。

  4. mounted：在实例被挂载后调用，此时模板已经编译/挂载。

  5. beforeUpdate：在响应式数据更新时触发，发生在虚拟 DOM 重新渲染和打补丁之前，这个时候我们可以对可能会被移除的元素做一些操作，比如移除事件监听器。

  6. updated：在数据更新后调用，此时组件已经重新渲染。

  7. beforeDestroy：在实例销毁前调用。

  8. destroyed：在实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

• 侦听器：

  用于观察和响应Vue实例上的数据变化。当你在Vue组件中需要对某些数据进行实时监控并在数据变化时执行某些操作时，可以使用侦听器

  <template>  
    <div>  
      <input v-model="inputValue" />  
      <p>{{ message }}</p>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        inputValue: '',  
        message: ''  
      };  
    },  
    watch: {  
      inputValue(newVal) {  
        // 当 inputValue 发生变化时，执行此函数  
        this.message = `你输入了: ${newVal}`;  
      }  
    }  
  };  
  </script>

• 模板引用：ref

  • 引用元素：

    <template>  
      <div>  
        <button ref="myButton">Click me</button>  
        <p>The button has been clicked {{ buttonClickCount }} times.</p>  
      </div>  
    </template>  
      
    <script>  
    export default {  
      data() {  
        return {  
          buttonClickCount: 0  
        };  
      },  
      mounted() { 
          //addEventListener使用js事件监听器
        this.$refs.myButton.addEventListener('click', () => {  
          this.buttonClickCount++;  
        });  
      }  
    };  
    </script>

  • 父组件调用子组件的方法以及属性值

    子组件：

    <template>  
      <div>  
        <button @click="showMessage">点击我</button>  
      </div>  
    </template>  
      
    <script>  
    export default {  
      data() {  
        return {  
          message: 'Hello from Child Component!'  
        };  
      },  
      methods: {  
        showMessage() {  
          alert(this.message);  
        }  
      }  
    };  
    </script>

    父组件：

    <template>  
      <div>  
        <ChildComponent ref="childRef" />  
        <button @click="callChildMethod">从父组件调用子组件方法</button>  
      </div>  
    </template>  
      
    <script>  
    import ChildComponent from './ChildComponent.vue';  
      
    export default {  
      components: { ChildComponent },  
      methods: {  
        callChildMethod() {  
          console.log(this.$refs.childRef.message); // 访问子组件的 message 属性值  
          this.$refs.childRef.showMessage(); // 调用子组件的 showMessage 方法  
        }  
      }  
    };  
    </script>

    组件基础

• 父组件传递值给子组件：

  父组件：

  <script setup>
  import { ref } from 'vue'
  import BlogPost from './BlogPost.vue'
    
  const posts = ref([
    { id: 1, title: 'My journey with Vue' },
    { id: 2, title: 'Blogging with Vue' },
    { id: 3, title: 'Why Vue is so fun' }
  ])
  </script>
  ​
  <template>
      <BlogPost
      v-for="post in posts"
        :key="post.id"
      :name="post.title"
      ></BlogPost>
  </template>

  子组件：

  <script setup>
  defineProps(['name'])
  </script>
  ​
  <template>
    <h4>{{ name }}</h4>
  </template>

• 组件，监听与触发

  目的：触发子组件的方法，父组件接收到子组件传来的值

  <!-- 子组件 -->  
  <template>  
    <button @click="handleClick">Click me</button>  
  </template>  
    
  <script>  
  export default {  
    methods: {  
      handleClick() {  
        this.$emit('custom-event', 'Hello from child component!');  
      }  
    }  
  };  
  </script>
  //点击按钮时，子组件会触发一个名为 custom-event 的自定义事件，并传递字符串 'Hello from child component!' 给父组件
  <!-- 父组件 -->  
  <template>  
    <ChildComponent @custom-event="handleCustomEvent" />  
  </template>  
    
  <script>  
  import ChildComponent from './ChildComponent.vue';  
    
  export default {  
    components: { ChildComponent },  
    methods: {  
      handleCustomEvent(eventData) {  
        console.log(eventData); // 输出 "Hello from child component!"  
      }  
    }  
  };  
  </script>

•