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"http://通過該屬性可以將自定義的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'
  }
    // 監(jiān)視reactive定義數(shù)據的某一個屬性
    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>