Vue3基础学习笔记（二）Vue基础语法3-常用模板语法

最新推荐文章于 2024-08-15 20:30:00 发布

smellsummer

最新推荐文章于 2024-08-15 20:30:00 发布

阅读量130

点赞数

分类专栏： vue基础学习笔记文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/smellsummer/article/details/131242669

版权

vue基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中几个关键的指令，包括v-bind用于动态绑定属性，v-html用于更新元素的innerHTML，v-model实现表单数据的双向绑定，v-on用于事件监听，以及动态参数和事件修饰符的使用方法，展示了如何在实际开发中应用这些功能。

摘要由CSDN通过智能技术生成

常用模板语法

指令部分

v-bind

简写为：，动态地绑定一个或多个特性，或一个组件 prop 到表达式，常用于Class 与 Style 绑定（可参考：官网链接）
如： v-bind:title=“message” 简写为 :title=“message”

<script>
   const app= Vue.createApp({
       data(){
           return{
               message:'hello'
           }
       },
       template:`<div
       v-bind:name="message" >
       内容
       </div>`
   });
   const vm = app.mount('#root');
</script>

实现效果：给div添加了一个name属性，属性值为data中message的值
在这里插入图片描述

v-html

更新元素的 innerHTML

<script>
    const app= Vue.createApp({
        data(){
            return{
                message:'hello'
            }
        },
        template:`<div
        v-html="message" >
        内容
        </div>`
    });
    const vm = app.mount('#root');
</script>

实现效果：将div便签内容更新为data中message的值
在这里插入图片描述

<body>
    <div id="root"></div>
</body>
<script>
    const app= Vue.createApp({
        data(){
            return{
                message:"hello",
                show:true
            }
        },
        template:`<div v-if="show">{{message}}</div>`
    });
    const vm = app.mount('#root');
</script>

v-model

在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定

<script>
    const app= Vue.createApp({
        data(){
            return{
                message:''
            }
        },
        template:`
          <p>Message is: {{ message }}</p>
          <input v-model="message" placeholder="输入内容" />
`
    });
    const vm = app.mount('#root');
</script>

实现效果：输入框输入内容与data中message的值双向绑定
在这里插入图片描述

v-on

简写为 @ ，监听 DOM 事件，参数是要监听的事件名称（可参考：官网链接）
如： v-on:click = "handleAddItem 简写为 @click = “handleAddItem”
例：给button按钮增加单击事件

<button v-on:click = "handleAddItem">增加</button>

具体代码如下：

<script>
      const app= Vue.createApp({
        data() {
          return {
            list:['1','2','3'],
            inputValue:'',
          }
        },
        methods: {
              handleAddItem(){
                  this.list.push(this.inputValue);
                  // 点击增加后，输入框中的内容为空；
                  this.inputValue = ''
              }
        },
        template:`
          <div>
              <input v-model="inputValue" />
              <button v-on:click = "handleAddItem">增加</button>
              <br><br>
              <div v-for="item in list">{{item}}</div>
          </div>
              `
      });
      app.mount('#root');
  </script>

实现效果：在输入框中输入内容，点击“增加”按钮，输入框内容增加到list中

在这里插入图片描述

动态参数

在指令参数上也可以使用一个 JavaScript 表达式，（可定义属性和事件）但需要包含在一对方括号内：
在这里插入图片描述

<script>
  const app= Vue.createApp({
      data(){
          return{
              message:"hello",
              show:true,
              name:'title',
              event:'click'
          }
      },
      methods: {
          handle(){
              alert("event")
          }
      },
      template:`<div 
      @[event]="handle"
      :[name]="message"
      >
      {{message}}
      </div>`
  });
  const vm = app.mount('#root');
</script>

实现效果：
在这里插入图片描述

事件修饰符

Vue中的事件修饰符:
1 . prevent: 阻止默认事件（常用）；
2 . stop：组织事件冒泡（常用）；
3 .once：事件只触发一次（常用）；
4 . capture：使用事件的捕获方式；
5 . self：只当事件在该元素本身触发时触发回调；
6 . passive：事件的默认行为立即执行，无需等待时间回调执行完毕；