Vue.js的基本使用之模板语法

最新推荐文章于 2024-07-04 11:00:03 发布

温暖前端

最新推荐文章于 2024-07-04 11:00:03 发布

阅读量480

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45914628/article/details/135616289

版权

本文详细介绍了Vue.js中的模板语法，包括插值语法（如Mustache双大括号表达式）和指令语法（如v-bind、v-model、v-on用于属性绑定、数据双向绑定和事件处理），以及条件渲染和列表渲染指令的使用及其性能优化建议。

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

模板语法分为插值语法和指令语法两大类

1.1 插值语法

使用的是“Mustache”语法（即双大括号），双大括号标签会替换为相应组件实例中msg属性的值，同时每次msg属性更改时它也会同步更新

<template id="my-app">
<div>
  <!--mustache基本使用·-->
  <h2>{{message}}</h2>
  <!--·JavaScript表达式-->
  <h2>{ counter * 2 }}</h2>
  <h2>{{message.split(" ").reverse().join("· ")}]</h2>
  <!--·调用一个methods中的函数·-->
  <h2>{{reverse(message)]</h2></div>
</template>

1.2 指令语法

指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

1.2.1 属性绑定指令
v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，可以直接读取到data中的所有属性，可用来动态绑定图片的链接src、网站的链接、动态绑定一些类、样式等

// 数组
<h1 :class="['red', 'thin']">Hello World</h1>
// 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">Hello World</h1>
// 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">Hello World</h1>
// 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">Hello World</h1>

v-bind修饰符

1.prop：作为一个 DOM property 绑定而不是作为 attribute 绑定。设置自定义标签属性，避免暴露数据，防止污染HTML结构
2.camel ：将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox。
3.sync：语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
1.2.2 双向数据绑定指令
v-model指令用来双向数据绑定：就是model和view中的值进行同步变化

 <body>
    <div id="app">
      <input type="text" v-model="userName" />
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          userName: "zhangsan",
        },
      });
    </script>
  </body>

v-model修饰符

1.lazy修饰符：使得用户在输入数据之后，当数据失去焦点时，才会进行数据的更新
2. number修饰符：将用户输入的类型由string型转为number型
3.trim修饰符：将用户输入的文本信息中开头的空格，结尾的空格都删除

1.2.3 事件绑定指令

使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名

<body>
    <div id="app">
        <span>{{name}}</span>
        <!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
        <button v-on:click="changeName">更换姓名</button>
    </div>
    <script>
        var vm = new new Vue({
            el: '#app',
            data: {
                name: 'zhangsan'
            },
            // 通过methods完成函数或方法的定义
            methods: {
                changeName() {
                    // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
                    this.name = "itcast"
                }
            }
        })
    </script>
</body>

v-on修饰符

1.prevent 调用event.preventDefault()，阻止默认事件

2.stop 调用event.stopPropagation()，阻止事件冒泡

3.once 事件只触发一次

4.capture 使用事件的捕获模式

5.self 只有event.target是当前操作的元素时才触发事件

6.passive 事件的默认行为立即执行，无需等待事件回调执行完毕

7.left只有点击鼠标左键时触发

8.right只有点击鼠标右键时触发

9.middle只有当鼠标点击中键才触发

1.2.4 条件渲染指令

<template id="my-app">
 <input type="text" v-model.number= "score">
  <h2 v-if="score > 90">优秀</h2>
  <h2 v-else-if="score >80">良好</h2>
  <h2 v-else-if="score >60">普通</h2>
  <h2 v-else>不及格</h2>
  <h2 v-show="false">欢迎</h2>
  <h2 v-show="true">光临</h2>
</template>

v-show是通过css属性display控制元素显示，元素总是存在的

v-if通过控制dom来控制元素的显示和隐藏,如果一开始条件为false,元素是不存在的。

如果需要频繁的控制元素的显示与隐藏，建议使用v-show。从而避免大量DOM操作，提高性能。而如果某个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用v-if。

如果我们需要切换多个元素，但是不希望div元素被渲染，可以使用template，template元素可以当作不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来。

1.2.5 列表渲染指令

v-for=“(item, index) in arr” :key=“item.id”，这里key最好是遍历对象的唯一标识

<div id="root">
  <!-- 遍历数组 -->
  <h3>电影列表（遍历数组）</h3>
  <ul>
    <li v-for="(item,index) in movies" :key="index">{{ item }}</li>
  </ul>

  <!-- 遍历对象 -->
  <h3>汽车信息（遍历对象）</h3>
  <ul>
    <li v-for="(value,key,index) in car" :key="key">{{ value }}--{{ key }}</li>
  </ul>

温暖前端

关注

12
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js的基本使用之模板语法

v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，可以直接读取到data中的所有属性，可用来动态绑定图片的链接src、网站的链接、动态绑定一些类、样式等。如果我们需要切换多个元素，但是不希望div元素被渲染，可以使用template，template元素可以当作不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来。从而避免大量DOM操作，提高性能。而如果某个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用v-if。
复制链接

扫一扫