VUE常见知识疑点问题总结

目录

• 1.vue.js @click和v-on:click有什么区别？
• 2.v-on和v-bind的区别
• 3.v-if和v-show对比：
• 4.关于<template>
• 5. 认识Vue 的 export、export default、import
• 7.Options API vs Composition API
• 8.VUE3中watch和watchEffect的用法
• 9.VUE3中ref和reactive的区别
• 10.defineProps、defineEmits、defineExpose  

Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url" rel="external nofollow"  rel="external nofollow" ></a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow"  rel="external nofollow" ></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
 

<a :href="{undefined{url}}" rel="external nofollow" >aa</a>

<a @click="get()">aa</a>

<div id="app">
    <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
    <template>
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<!--因为template标签天生不可见，它设置了display:none;属性-->
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>

<div id="app">
    <template v-if="true">
    <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
        <div>我是template</div>
        <div>我是template</div>
    </template>
    <div v-if="true">
    <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
        <div>我是template</div>
        <div>我是template</div>
    </div>
    <!--此处会输出6个‘我是template'并且dom结构中不存在template标签-->
    <template v-for="a in 3">
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>

<!--此处页面显示hello-->
<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
    });
</script>

<abc id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</abc>

//model1.js
export var author = "shouke"
export var addr = "sz"
// 等价写法
var author = "shouke"
var addr = "sz"
export { author, addr }

//model2.js
import { author } from "./model1"
import { addr } from "./model1"

watchEffect(()=>{
      console.log(name.value)
 })
 function change(){
      name.value = 'blue'
      // age.value=1
      // console.log(111)
}

function changeDB(){
      // obj.age = 22
      // obj.xz.price = '22k'
      obj.name='redred'
  }
    // 监视reactive定义数据的某一个属性
    watch(()=> obj.name,(newVal,oldVal)=>{
      console.log("有新名字拉~~",newVal)
      console.log("原来的名字哦~",oldVal)
    })

<template>
  <h1>{{ msg }}</h1>
  <div @click="clickThis">1111</div>
</template>
<script setup lang="ts">
  defineProps<{ // 采用ts专有声明，无默认值
    msg: string,
    num?: number
  }>()
     // 采用ts专有声明，有默认值
    interface Props {
        msg?: string
        labels?: string[]
    }
    const props = withDefaults(defineProps<Props>(), {
        msg: 'hello',
        labels: () => ['one', 'two']
    })
  defineProps({ // 非ts专有声明
    msg: String,
    num: {
      type:Number,
      default: ''
    }
  })
</script>
<style scoped lang="less">
</style>

<template>
  <div>子组件helloword.vue</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(123456)
defineExpose({
  count
})
</script>
<style scoped lang="less">
</style>

<template>
  <div @click="helloClick">父组件</div>
  <helloword ref="hello"></helloword>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import helloword from './components/HelloWorld.vue'
const hello = ref(null)
const helloClick = () => {
  console.log(hello.value.count) // 123456
}
</script>
<style lang="less" scoped>
</style>