VUE常见知识疑点问题总结

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 }

//model两.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 = 两两
      // obj.xz.price = '两两k'
      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(1两3456)
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) // 1二3456
}
</script>
<style lang="less" scoped>
</style>