Vue模板语法

阿陈爱学习

于 2023-11-03 15:00:10 发布

阅读量68

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41510467/article/details/134203251

版权

1、插值表达式

插值表达式：是vue框架提供的一种在HTML模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。

插值表达式的写法支持使用：

变量名
部分JavaScript表达式
- 注：{{ }}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句
三元运算符
方法调用（方法必须需要先声明）
...

<body>
    <div id="app">
        <!-- 直接使用变量名 -->
        <h5>{{name}}</h5>
        <!-- 运算 -->
        <h5>{{name + '--好的'}}</h5>
        <h5>{{ 1 + 1 }}</h5>
        <!-- 使用函数 -->
        <h5>{{title.substr(0,6)}}</h5>
        <!-- 三目运算 -->
        <h5>{{ age > 18 ? '成年' : '未成年'}}</h5>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            title: "我是一个标题，你们看到没有",
            name: "张三",
            age: 20,
        },
    });
</script>

2、指令

问1：什么是指令？

指令的本质就是标签中的vue自定义属性
指令格式以“v-”开始，例如：v-cloak，v-text、v-html等

指令的含义：在vue的html中，以v-开头的自定义属性就是指令。

详见官网对指令的说明：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

问2：指令有什么作用？

正如插值表达式的效果，插值表达式只能用于标签之间的数据输出；在标签属性上，插值表达式无用武之地，但是有需要在属性中使用可变数据的情况，此时指令就能帮助我们解决这个问题。

语法糖：复杂操作的简化形式

当表达式的值改变时，将其产生的连带影响，响应式地作用于页面（DOM）。（简化操作）

官网

v-text：https://cn.vuejs.org/v2/api/#v-text

v-html：https://cn.vuejs.org/v2/api/#v-html

友情提醒：v-html尽量少用甚至不用，因为可能引发XSS（跨站脚本攻击，XSS）攻击。

常用指令

1、v-cloak

作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题

原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果

注意：需要与CSS规则一起使用

文档地址：https://cn.vuejs.org/v2/api/#v-cloak

<div v-cloak>
{{ message }}
</div

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。

2、数据绑定指令

v-text 填充纯文本
- 相比插值表达式更加简洁
- 不存在插值表达式的闪动问题

v-html 填充HTML片段
- 存在安全问题
- 本网站内部数据可以使用，来自第三方的数据不可使用
  - 只有一个场景会使用：后台会用，比如有一个企业站，会发不企业的动态的新闻，这个时候会使用富文本编辑器，由于内容是自己人加的，所以可以放心使用。自己攻击自己（自攻）

v-pre 填充原始信息（对应的是以前html中的标签“<pre>”）【凑数】
- 跳过表达式的编译过程（先编译，后渲染），显示原始信息

<span v-pre>{{ this will not be compiled }}</span>

有些时候我们不想指令中的表达式进行运行，只需要给表达式加个引号。例如：

<div v-html='"msg"'></div>
<div v-html="'msg'"></div>

针对后续想让指令属性值不解析的操作都可以这么去做。

3、v-once

作用：只渲染元素或组件一次，之后元素或组件将失去响应式（数据层面）功能（对于数据的一锤子买卖）

Q & A：如何理解响应式？

布局响应式：布局会随着设备尺寸的大小变化而变化的布局方式

数据响应式：双向数据绑定

示例：

<div id="app">
    <h3>{{message}}</h3>
    <!-- 动态修改message值，此绑定将不会发生改变 -->
    <div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
  })
</script>

5.2、事件修饰符

含义：用来处理事件的特定行为（也是vue提供一些语法糖）

使用示例：

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!--  串联修饰符（连贯操作） -->
<button @click.stop.prevent="doThis"></button>

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#v-on

实例代码

4、v-bind（重点）

作用：动态地绑定一个或多个attribute【实现可以允许我们在html内置的属性值中使用变量，主要是给非指令的属性去使用绑定动态可变的数据的】

场景：复用某个数据的时候会使用。例如：飞猪官网

<!-- v-bind：给非指令的属性使用变量 -->
<a v-bind:href="url" v-bind:target="target">{{alt}}</a>

<!-- v-bind的简写形式，实际使用这样的写法 -->
<a :href="url" :target="target">{{alt}}</a>

示例代码

<body>
    <div id="app">
        <a :href="url" :target="type" :alt="alt">{{alt}}</a>
        <a :href="url">{{alt}}</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            url: 'https://www.fliggy.com/',
            type: '_blank',
            alt: '飞猪官网'
        }
    })
</script>

5、v-on（重点）

5.1、基本使用（重点）

作用：绑定事件监听器（事件绑定）

示例：

<!-- 直接执行操作 -->
<!-- 常规写法 -->
<button v-on:click="num++"></button>
<!-- 缩写 -->
<button @click="num++"></button>

<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>
<!-- 事件处理函数调用：常规调用 -->
<button @click="say('sth')"></button>

如果事件处理函数为自定义函数，则需要先进行定义，定义的方式如下：

...
data: {
    ...
},
methods: {
    functionName: function(arg1,arg2,arg3,...){
        // something to do
    },
    ....
}

注意：事件绑定v-on属性表达式中切记不能直接写业务逻辑，例如@click="alert('123')"。换言之，就咋行内上是不允许使用内置函数的，必须要调用自己定义的函数，然后你可以在自定义的函数内使用内置函数。

事件处理函数传参

<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>

<!-- 事件处理函数调用：常规调用 -->
<button @click="say('hi',$event)"></button>

在不传递自定义参数的时候，上述两种用法均可以使用；但是如果需要传递自定义参数的话，则需要使用第2种方式。

事件对象的传递与接收注意点

如果事件直接使用函数名并且不写小括号，那么默认会将事件对象作为唯一参数进行传递，可以在定义函数的位置直接定义一个形参，并且在函数内可以使用该形参

如果使用常规的自定义函数调用（只要写了小括号），那么如果需要使用事件对象则必须作为最后一个参数进行传递，且事件对象的名称必须是“$event”

示例代码

<style>
    #big {
        width: 300px;
        height: 300px;
        background-color: red;
    }
    #mid {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    #sma {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<body>
    <div id="app">
        <div id="big" @click="say('大娃',$event)">
            <div id="mid" @click="say('二娃',$event)">
                <div id="sma" @click="say('三娃',$event)"></div>
            </div>
        </div>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        },
        methods:{
            say: function(name,event){
                console.log('你点了' + name);
            }
        }
    })
</script>

5.2、事件修饰符

含义：用来处理事件的特定行为（也是vue提供一些语法糖）

使用示例：

<button @click.stop="doThis"></button>

<button @click.prevent="doThis"></button>

<button @click.stop.prevent="doThis"></button>

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#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>
.dawa {
background: red;
width: 400px;
height: 400px;
}
.erwa {
background: orange;
height: 300px;
width: 300px;
}
.sanwa {
background: yellow;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">

<div class="dawa" @click="call_dawa">
<div class="erwa" @click.stop="call_erwa">
<div class="sanwa" @click.stop="call_sanwa">

</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {

},
methods:{
call_dawa(){
console.log('大娃：收到');
},
call_erwa(){
console.log('二娃：收到');
},
call_sanwa(){
console.log('三娃：你说啥');
}
}
})
</script>
</body>
</html>

5.3、按键修饰符

按键修饰符：按键事件

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

<!-- 只有在 `key` 是 `Enter` 回车键的时候调用 -->
<input @keyup.enter="submit">

<!-- 只有在 `key` 是 `Delete` 回车键的时候调用 -->
<input v-on:keyup.delete="handle">

更多按键修饰符请参考官方文档：事件处理 — Vue.js

6、循环分支指令

6.1、循环指令

作用：根据一组数组或对象的选项列表进行渲染。

指令：v-for

数组遍历使用示例：

<!-- 模板部分 -->
<ul>
    <!-- 直接取值 -->
    <li v-for='item in fruits'>{{item}}</li>
    <!-- 带索引 -->
    <li v-for='(item,index) in fruits'>{{item}}{{index}}</li>
</ul>

<!-- JavaScript部分 -->
......
data: {
    fruits: ['apple','pear','banana','orange']
}
......

细节：key的作用，提高性能，不影响显示效果（如果没有id，可以考虑使用索引替代），切记key的值不能重复，只要遵循不重复的原则即可，值是什么无所谓。

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。

<ul>
    <li :key='item.id' v-for='(item,index) in fruits'>{{item}}</li>
</ul>

对象遍历使用示例（了解）：

<!-- 模板部分 -->
<ul>
    <li v-for='(value,name,index) in obj'>{{value + '-' + name + '-' + index}}</li>
</ul>

<!-- JavaScript部分 -->
......
data: {
    obj: {
        username: 'zhangsan',
        age: 28,
        gender: 'male'
    }
}
......

示例代码：

<body>
    <div id="app">
        <div>
            <ul>
                <li :key="index" v-for="(item,index) in cars">{{item}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li :key="index" v-for="(item,key,index) in user">{{key}}：{{item}}</li>
            </ul>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            cars: ['bmw','aodi','benci','haima'],
            user: {
                username: 'zhangsan',
                gender: 'mele',//性别，sex
                age: 22
            }
        }
    })
</script>

6.2、分支指令

作用：根据表达式的布尔值(true/false)进行判断是否渲染/显示该元素

v-if
v-else
v-else-if

上述三个指令是分支中最常见的。根据需求，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。

v-show

v-show是根据表达式之真假值，切换元素的 display CSS属性（是根据表达式的布尔值来判断是否显示该元素）。

使用示例：

<!-- 模板部分 -->
<div v-if="score >= 90">
  优秀
</div>
<div v-else-if="score >= 80 && score < 90">
  良好
</div>
<div v-else-if="score >= 70 && score < 80">
  一般
</div>
<div v-else>
  不及格
</div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>

<!-- JavaScript部分 -->
......
data: {
    score: 88,
    flag:false
}
......

思考：v-if系列与v-show的区别是什么？

v-if：控制元素是否渲染

v-show：控制元素是否显示（已经渲染，display:none;）

v-if系列指令、v-show指令可以与v-for指令结合起来使用（循环+分支）。例如：

<ul>
    <li v-for='(v,k,i) in obj' v-show='v==25'>{{v}}</li>
</ul>

面试题：v-for与v-if谁的优先级高，能否一起使用？

答：v-for优先级高于v-if，虽然可以一起使用但是不建议一起使用。因为v-for的优先级大于v-if，在循环元素时，==每个元素都要进行v-if判断，但是最终显示的元素太少造成资源浪费==，所以不建议一起使用。在需要v-for与v-if一起使用时可以用v-show代替v-if。

7、综合案例：简易购物车

案例效果

简易购物车案例效果

细节：

展示基本的商品信息

计算每个商品的小计

商品数量的加、减操作

+：增加商品数量，同时更新小计

-：减少商品熟练，同时更新小计，如果本身为“1”，再点-号则需要移除商品

如果需要在Vue实例中访问自身data属性中的数据，可以使用以下方式：

this.xxxxx

this.$data.xxxxx

this._data.xxxxx

参考数据源

var cartData = [
    {
        id: 1,
        name: '小米',
        price: 100,
        num: 1
    },
    {
        id: 2,
        name: '华为',
        price: 200,
        num: 1
    },
    {
        id: 3,
        name: '联想',
        price: 300,
        num: 1
    }
]

参考核心代码

7、综合案例：简易购物车

案例效果

简易购物车案例效果

细节：

展示基本的商品信息

计算每个商品的小计

商品数量的加、减操作

+：增加商品数量，同时更新小计

-：减少商品熟练，同时更新小计，如果本身为“1”，再点-号则需要移除商品

如果需要在Vue实例中访问自身data属性中的数据，可以使用以下方式：

this.xxxxx

this.$data.xxxxx

this._data.xxxxx

参考数据源

var cartData = [
    {
        id: 1,
        name: '小米',
        price: 100,
        num: 1
    },
    {
        id: 2,
        name: '华为',
        price: 200,
        num: 1
    },
    {
        id: 3,
        name: '联想',
        price: 300,
        num: 1
    }
]

参考核心代码

<!DOCTYPE html>
<html>

<body>
<div id="app">
<ul>
<li v-for="(item,index) in cartData" :key="item.id">
<span>商品id：{{item.id}}</span>&emsp;&emsp; <span>商品名称：{{item.name}}</span>&emsp;&emsp;
<span>商品单价：{{item.price}}</span>&emsp;&emsp; <span>购买数量：<button
@click="jian(item,index)">-</button>{{item.num}}<button
@click="item.num++">+</button></span>&emsp;&emsp; <span>小计：{{item.price * item.num}}</span>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var cartData = [
{
id: 1,
name: '小米',
price: 100,
num: 1
},
{
id: 2,
name: '华为',
price: 200,
num: 1
},
{
id: 3,
name: '联想',
price: 300,
num: 1
}
]
new Vue({
el: "#app",
data: {
// 初始的数据
cartData
},
methods: {
jian(item, index) {
if (item.num === 1) {
// 弹窗
// if (confirm("这么好的商品，确定不要来一个吗？")) {
// // 移除对应的元素
// this.cartData.splice(index, 1)
// }
confirm("这么好的商品，确定不要来一个吗？") && this.cartData.splice(index, 1)
} else {
item.num-- // item.num = item.num - 1
}
}
}
})
</script>
</body>

</html>

8、动态样式绑定

8.1、class样式绑定

对象语法（用于控制开关切换）

<style>
/* CSS片段 */
.active {
    color: red;
}
</style>

<!-- HTML片段 -->
<div v-bind:class="{active: isActive}">class样式</div>

<script type='text/javascript'>
// JavaScript片段
data: {
    isActive: true
}
</script>

数组写法

<div v-bind:class="[activeClass]">数组写法</div>

8.2、style样式处理

对象语法

<!-- HTML片段 -->
<div:style="{color: redColor, fontSize: '20px'}">对象写法</div>

<script type='text/javascript'>
// JavaScript片段
data: {
    redColor: 'red'
}
</script>

数组语法

<!-- HTML片段 -->

<div v-bind:style="[color, fontSize]">数组写法</div>

<script type='text/javascript'>

// JavaScript片段

data: {

    color: {

        color: 'red'

},

    fontSize: {

        'font-size': '20px'

</script>

9、v-model（重点）

作用:表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。

单向与双向数据绑定

v-model会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。

普通文本框上的使用

<div id='app'>
<p>{{message}}</p>
<input type='text' v-model='message'>


<input type='text' :value='msg' @input='msg=$event.target.value'/>
</div>

<script type='text/javascript'>
new Vue({
el: '#app',
data: {
msg: 'message默认值'
}
})
</script>

- 多行文本框上的使用

~~~html
<div id='app'>
<textarea v-model="message"></textarea>
</div>

**注意：在多行文本框中使用插值表达式无效（此时，其只能接受数据，不能改变数据）

阿陈爱学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法

插值表达式：是vue框架提供的一种在HTML模板中绑定数据的方式，使用方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。插值表达式的写法支持使用：变量名部分JavaScript表达式注：括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句三元运算符方法调用（方法必须需要先声明）...<body> <div id="app"> <!-- 直接使用变量名 --&g
复制链接

扫一扫