美文网首页
Vue3.0基础学习自我理解(一)

Vue3.0基础学习自我理解(一)

作者: coderhzc | 来源:发表于2022-02-16 09:41 被阅读0次

    1.0 Vue3.0 CDN 源码地址:

    http://unpkg.com/vue@next

    1.1 如何使用CDN创建一个小DEMO

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <!-- Vue 3.0 的源码地址 -->
  <!-- <script src="http://unpkg.com/vue@next"></script> -->
  <script src="./js/vue3.0.js"></script>
  <script>

    const hzc = {
      template: "<h2>hello,world</h2>"
    }

    // 注意这个就和Vue2.0不一样了
    const app = Vue.createApp(hzc) 
    app.mount("#app")

    /**还可以这种来写**/
    Vue.createApp({
      template: `
        <div>
          <h2>{{ message }}</h2>
          <h1>{{ counter }}</h1>
          <button @click='add'> + 1 </button>
          <button @click='sub'> - 1 </button>  
        </div>
      `,

      data() {
        return {
          message: "Hello,World!",
          counter: 0
        }
      },

      methods: {
        add() {
          // this.counter +=1
          this.counter ++
        },

        sub() {
          // this.counter -=1
          this.counter --
        }
        
      }
    }).mount('#app')

  </script>
</body>

</html>

    1.2 template的写法

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="./js/vue3.0.js"></script>
  <!-- 1.加上一个id-->
  <template id="hzc">
    <div>
      <h2>{{ message }}</h2>
      <h1>{{ counter }}</h1>
      <button @click='add'> + 1 </button>
      <button @click='sub'> - 1 </button>
    </div>
  </template>

  <script>
    Vue.createApp({
      // 2.抽离的写法
      template: "#hzc",
      data() {
        return {
          message: "Hello,World!",
          counter: 0
        }
      },

      methods: {
        add() {
          // this.counter +=1
          this.counter++
        },

        sub() {
          // this.counter -=1
          this.counter--
        }

      }
    }).mount('#app')

    /**
     *  总结: 这个时候,在createApp的对象中,我们需要传入template以 #开头
     * 
     *  如果字符串是以为 # 开始, 那么它将被作用querySelector,并且使用匹配元素的innerHTML作为模板字符串
     * 
     * 
     * **/

  </script>
</body>

</html>

    1.3 Vue - data 属性的使用:

    data 属性是传入一个函数,并且该函数需要返回一个对象
        -- 在Vue2.0的时候,也是可以传入一个对象(虽然官方推荐是 一个函数)
        -- 在Vue3.0的时候,必须传一个函数, 否则的话就会直接在浏览器中报错 

     小节: 
  methods属性是一个对象,通常我们会在这个对象中定义很多的方法:
          -- 这些方法可以被绑定到template 模板中
          -- 在改方法中.我们可以使用this关键字来直接访问到data中 返回的对象属性

          -- 注意,不应该使用箭头函数来定义methods中的函数(例如 add:()=>this.a++),理由是箭头函数绑定了父级作用域的上下文.所以this将不会按照期望指向组件实例,this.a将是undefined

  methods中要使用data返回对象中的数据:
          -- 那么这个this是必须有值对的,并且应该可以通过this获取到data返回对象的数据
  
  那么我们这个this能不能是window呢?
         -- 不可以是window,因为window中我们无法获取到data返回对象中的数据
         -- 但是我们使用箭头函数了,那么这个this就会是window了

    2. Mustache语法

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <template id="hzc">
    <!-- 1.直接绑定 -->
    <div>{{ message }}</div>
    <!-- 2.计算 -->
    <div>{{ counter * 10 }}</div>
    <!-- 3. 表达式 -->
    <div>{{ message.split("").reverse().join("") }}</div>
    <!-- 4.调用函数 -->
    <div>{{ getReverseArray() }}</div>
    <!-- 5.计算属性 -->
    <div>{{ getAllPrice }}</div>
    <!-- 6.三元 运算符 -->
    <div>{{ flag?"哈哈":"呵呵" }}</div>

    <!-- 7.错误用法 -->
    <!--var name = "hzc" 这个是赋值语句 -->
    <!-- <h2>{{ var name = "hzc" }}</h2> -->
    <!-- <h2>{{ if(flag) return "hahahhh" }}</h2> -->
  </template>

  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          counter: 10,
          flag: true
        }
      },

      methods: {
        getReverseArray() {
          return this.message.split("").reverse().join("")
        }
      },
      computed: {
        getAllPrice() {
          return (100 * this.counter).toFixed(2) + " ¥ "
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    3. v-once的基本使用:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <!-- 1.希望一直可以累加 -->
    <h2>当前计数:{{ counter }}</h2>

    <!-- 2. 只加一次 -->
    <h2 v-once>当前计数:{{ counter }}</h2>
    <button @click="increment"> + 1 </button>

    <!-- 3.如果在div上面加v-once的话代表了 只要是div里面的元素变化一次以后就都不会在变化了 -->
    <hr>
    <div v-once>
      <h2>当前计数:{{ counter }}</h2>
      <h3>{{ message }}</h3>
    </div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          counter: 0
        }
      },
      methods: {
        increment() {
          this.counter ++
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    4. v-text的基本使用

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 
   v-text="message" 语法会把你的数据按照最原始的方式展示出来,看以下demo就明白了
 -->
<body>
  <div id="app"></div>
  <template id="hzc">
    <div v-text="message"></div>
    <div v-text="message1"></div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          message1:"<div>我是胡振楚</div>"
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    5. v-html的基本使用

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 
   v-html: 默认情况下,我们展示的内容本身是HTML的,那么Vue是不会对其进行特殊的解析
           如果我们希望这个内容按照正常的文本解析出来的话,那么可以使用 v-html来展示
 -->
<body>
  <div id="app"></div>
  <template id="hzc">
    <div v-html="message"></div>
    <div v-html="message1"></div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          message1:"<div style='color:red;font-size: 60px;'>我是胡振楚</div>"
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    6.v-pre的基本使用

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 
  v-pre: 用于跳过元素和它的子元素的编译过程,
         显示原始的Mustache标签,跳过不需要解析的节点,按照最原始的方式展示,看demo就明白了 

 -->
<body>
  <div id="app"></div>
  <template id="hzc">
    <div v-pre>{{ message }}</div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World"
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    7.v-cloak的基本使用

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <div v-cloak>{{ message }}</div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World"
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    8. v-bind的基本使用 (VUE 3.0 是可以有多个根标签的)

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <!-- VUE 3.0 是可以有多个根标签的 -->
    <div>{{ message }}</div>
    <img :src="imgUrl" alt="">
    <a :href="hrefUrl"></a>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script> 
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          imgUrl:"http://avatars.githubusercontent.com/u/10335230?s=60&v=4",
          hrefUrl:"http://www.baidu.com"    
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    9.v-bind绑定class属性-对象语法

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
      font-size: 40px;
    }

    .title {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <!-- 对象中可以添加多个的键值对 -->
  <template id="hzc">
    <!-- 1. class里面的属性键 引号可加可不加的,
            但是如果里面的属性值不加引号就要去data中去找变量了, -->
    <div :class="{'active':isShow,'title': true}">{{ message }}</div>
    <!-- <div :class="{active:isShow,title: true}">{{ message }}</div> -->
    <button @click="BtnClick">切换改变颜色</button>

    <hr>
    <!-- 2. 默认的class和动态的class是可以并存的  -->
    <div class="abc cba" :class="{active:isShow,title:true}">默认的class和动态的class是可以并存的</div>

    <hr>
    <!-- 3.将对象放到一个单独的属性中 -->
    <div class="abc cba" :class="classObj">将对象放到一个单独的属性中</div>

    <hr>
    <!-- 4. 将返回的对象放到methods方法中 -->
    <div :class="getClassObj()">将返回的对象放到methods方法中</div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          isShow: true,
          classObj:{
            active: true,
            title: true
          }
        }
      },
      methods: {
        BtnClick() {
          this.isShow = !this.isShow
        },

        getClassObj() {
          return this.classObj
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    10.v-bind绑定class属性-数组语法

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .titleclass {
      color: red;
    }

    .active {
      background-color: yellow;
    }

  </style>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <div>{{ message }}</div>
    <!-- 1. 数组里面的class 加引号的写法,和三元表达式的写法 -->
    <div :class="['abc','cba',isActive? 'active':'']"> 数组里面的class 加引号的写法,和三元表达式的写法</div>

    <!-- 2. 数组里面写data中定义的变量 不需要加引号 -->
    <div :class="[title]">数字里面写data中定义的变量 不需要加引号</div>

    <!-- 3. 数组中可以继续嵌套对象的写法 -->
    <div :class="['accc','abbbb',{'active': isActive}]">数组中可以继续嵌套对象的写法</div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          title: 'titleclass',
          isActive: true
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    11.v-bind绑定style属性-对象语法

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <div>{{ message }}</div>
    <!-- 1. key是可以不加引号的,但是 value是要加的,如果不加的话他就会去data里面去找定义的变量,看是否data中存在这个变量 -->
    <div :style="{color:'red'}">1.加引号</div>
    <div :style="{color: value}">1.不加引号 </div>

    <hr>
    <!-- 2.属性使用驼峰 -->
    <div :style="{fontSize: sizeValue}">2. 属性使用驼峰</div>

    <hr>
    <!-- 3.属性不使用驼峰的话,那么就必须要使用引号 " " 引起来,不然的话,会没有效果的 -->
    <div :style="{'font-size': '40px'}">3.属性不使用驼峰的话</div>

    <hr>
    <!-- 4.后端要是直接返回一个数值给你的话,那么就需要拼接了 -->
    <div :style="{'fontSize': valueSize + 'px'}">4.后端要是直接返回一个数值给你的话,那么就需要拼接了</div>

    <hr>
    <!-- 5. 直接放入一个 对象 -->
    <div :style="styleObj">5.直接放入一个 对象</div>

    <hr>
    <!-- 6.绑定一个方法 -->
    <div :style="getStyle()"> 6.绑定一个方法 </div>

    <hr>
    <!--7. 计算属性  -->
    <div :style="getStyleComputed">7.计算属性</div>

  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          value: 'yellow',
          sizeValue: "40px",
          valueSize: 40,
          styleObj: {
            background: "deeppink",
            "font-size": "40px"
          }
        }
      },

      methods:{
        getStyle() {
          return this.styleObj;
        }
      },

      computed:{
        getStyleComputed() {
          return this.styleObj
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    12.v-bind绑定style属性-数组语法

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <div>{{ message }}</div>

    <!--1.数组里面放对象  -->
    <div :style="[styleObj1,styleObj2]">数组里面放对象</div>

  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          styleObj1: {
            background: "deeppink",
            "font-size": "40px"
          },
          styleObj2: {
            color: "green",
            "font-weight": "900"
          }
        }
      },

      methods:{
        getStyle() {
          return this.styleObj;
        }
      },

      computed:{
        getStyleComputed() {
          return this.styleObj
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    13.v-bind动态绑定属性的名称补充

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: #FFF;
      background-color: red;
      font-size: 60px;
    }
    .abcd {
      background-color: pink;
      font-size: 60px;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <div>{{ message }}</div>
    <!-- 0. 在某种场景有些属性不确定的话,有可能下面的div会绑定 class style,或者.... -->
    <!-- 1.属性不是固定的时候的用法,具体语法:  :[data中定义的变量] -->
    <!-- 2. :[data中定义的变量] = "'active'": 这个active要加单引号, 
         因为不加单引号的话就会把active当做是一个变量,会去data中会去找 -->
    <div :[name]="'active'">加单引号的active</div>
    <!-- 3.:[name]="active":如果不加单引号的话不会有任何效果的,除非在data中去定义中变量,定义好了以后在赋值 -->
    <div :[name]="active">不加单引号的active</div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          name: "class",
          active: "abcd"
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    14. v-bind属性直接绑定多个对象

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <div>{{ message }}</div>
    <!-- 1. 啥意思呢? 就是说我想在这个div上面绑定很多属性 比如说: name="huzhenchu" age="18" sex="男"... -->
    <!-- 2. 具体语法: v-bind="info" -->
    <div v-bind="info">示例代码</div>
    <!-- 3.简写方式: -->
    <div :="info">示例代码</div>

    <!-- 4.直接绑定一个对象 -->
    <div v-bind="{name:'楚楚胡',age:28,sex:'男'}">直接绑定一个对象</div>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          info: {
            name:"huzhenchu",
            age: 18,
            sex: "男"
          }
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    15.v-on的使用

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .m {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      margin-top: 50px;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <!-- 1. 完整的写法: v-on:监听的事件='methods中定义的方法' -->
    <button v-on:click="btnClick">点击出现事件</button>
    <div v-on:mousemove="mousemoveClick">鼠标的移动</div>

    <hr>
    <!-- 2.语法糖的写法:@ -->
    <button @click="btnClick">语法糖的写法:@</button>

    <hr>
    <!-- 3.绑定的数据+1 -->
    <button @click="add">{{ counter }}</button>
    <hr>
    <!-- 4. 直接操作 -->
    <button @click="counter++">{{ counter }}</button>

    <!-- 5. 绑定多个事件 -->
    <div class="m" v-on="{click: btnClick, mousemove:mousemoveClick}"></div>
    
    <!-- 6.语法糖的写法 @ -->
    <div class="m" @="{click: btnClick, mousemove:mousemoveClick}"></div>


  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World",
          counter: 0
        }
      },
      methods: {
        btnClick() {
          console.log("楚楚胡");
        },

        mousemoveClick() {
          console.log("鼠标在移动");
        },

        add() {
          this.counter++
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    16.v-on的参数传递

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <template id="hzc">
    <!-- 1.默认 -->
    <button @click="btnClick">按钮</button> <br>
    <!-- 
      2. 参数的传递固定语法 其实和2.0差不多: btnClick1($event,"huzhenchu"),
            $event:可以获取到事件发生时的事件对象
    -->
    <button @click="btnClick1($event,'huzhenchu')">按钮1</button>
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World"
        }
      },
      methods: {
        // 1.
        // 默认传入event对象,可以在方法中直接按照这个方式获取
        btnClick(event) { // 这个事件你不用传递 这个是自带的浏览器的默认参数 和vue2.0是一样的
          console.log(event);
        },
        // 2. $event:可以获取到事件发生时的事件对象
        btnClick1(event,name) {
          console.log(event);
          console.log(name);
        }
      },
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    17.v-on的修饰符

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 
  0.v-on的修饰符:
  v-on: 支持修饰符,修饰符相当于是对事件进行了一些特殊的处理:
        -- .stop-调用event.stopPropagation()
        -- .prevent-调用event.stopPropagation()
        -- .capture-添加事件侦听器时使用capture模式
        -- .self-只当事件是从侦听器绑定的元素本身触发时才触发回调
        -- .once-只触发一次回调
        -- .left-只当点击鼠标左键触发
        -- .right-只当点击鼠标右键触发
        -- .middle-只当点击鼠标中键触发
        -- .passive-(passive:true) 模式添加侦听模式
 -->
<body>
  <div id="app"></div>
  <template id="hzc">
    <!-- 1.stop修饰符:阻止事件冒泡 -->
    <div @click="divcClick">
      <button @click.stop="btnClick">按钮</button>
    </div>

    <!-- 2. enter修饰符: 当你在input中输入的时候,你只想等到点击了enter健的时候才打印的话,就可以加上这个修饰符-->
    <input type="text" @keyup.enter="enterKeyup">
  </template>
  <script src="./js/vue3.0.js"></script>
  <script>
    const App = {
      template: "#hzc",
      data() {
        return {
          message: "Hello,World"
        }
      },

      methods: {
        divcClick() {
          console.log("divClick");
        },
        btnClick() {
          console.log("btnClick");
        },


        enterKeyup(event) {
          console.log(event.target.value);

        }
      },
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

</html>

    相关文章

      网友评论

          本文标题：Vue3.0基础学习自我理解(一)

          本文链接：https://www.haomeiwen.com/subject/xivrlrtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Vue3.0基础学习自我理解(一)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！