0
点赞
收藏
分享

微信扫一扫

vue3 基础-常用模板语法

常用的一些模板语法啦

一个 vue 的单文件 SAP ( single page web application ) 即在一个 .vue 为后缀的文件中, 会包含3个部分.

  • 模板: html
  • 逻辑: javascript
  • 样式: css

这种同时存在, 然后组成一个小组件的方式其实, 其实非常符合编程思维的. 比原本拆分为 .html, .css, .js 这样的方式好维护很多. 本篇讲关于模板部分的一些 vue 的常用语法.

插值表达式 {{ }}

花括号里是可以放变量和 js 表达式的.

<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world!'
}
},
template: `<div>{{message.toUpperCase()}}</div>`
})

app.mount('#root')
</script>
</body>
</html>

则页面会显示:

HELLO, WORLD!

v-html

告诉模板将以 html 的方式来展示数据, 举例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world!'
}
},
// v-html: 以 html 的方式来展示数据
template: `<div v-html="message"></div>`
})

app.mount('#root')
</script>
</body>
</html>

则结果为: hello, world!

v-bind

用来绑定属性, 当然也可以简写为 ":"

<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
disabled: false
}
},
template: `<input v-bind:disabled="disabled" />`
// template: `<input :disabled="disabled" />`
})

app.mount('#root')
</script>
</body>
</html>

值得注意的是这里的属性绑定可以简写为:

<input :disabled="disabled" />

另外在补充两个常用但一看就懂的 DOM 元素的 显示 / 隐藏 指令 v-show 和 v-if

  • v-if : 当值为 true 的显示, 否则不显示, 本质是动态在 DOM 树内增删元素
  • v-show: 当值为 true 的显示, 否则不显示, 本质是 display: none

<!DOCTYPE html>
<html lang="en">
<head>
<title>v-if 和 v-show</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
show: false
}
},
methods: {
handleClick () {
this.show = !this.show
}
},
// template: `<div v-if="show">{{message}}</div>`
template: `
<div v-show="show" @click=>{{message}}</div>
<button @click="handleClick">显示/隐藏</button>
`
})

app.mount('#root')
</script>
</body>
</html>

从真实的使用频率来看, 就那种频繁显示隐藏的建议用 v-show; 使用次数不多的用 v-if 这样可以减少增删 dom 的消耗.

v-on

这里最为常用的就是点击事件 v-on:click = 'xxx'.

<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world'
}
},
methods: {
handleClick () {
alert('click')
}
},
template: `<div v-on:click="handleClick">{{message}}</div>`
// template: `<div @click="handleClick">{{message}}</div>`
})

app.mount('#root')
</script>
</body>
</html>

值得注意的是这里的 v-on:click 事件绑定可以简写为:

<div @click="handleClick">{{message}}</div>

动态属性和事件绑定 [ ]

即对 dom 元素的属性和事件名, 通过数据的方式进行动态的绑定, 栗子如下:

<!DOCTYPE html>
<html lang="en">
<head>
<title>动态属性和事件绑定</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
// event: 'click',
event: 'mouseenter',
name: 'title'
}
},
methods: {
handleClick () {
alert('click')
}
},
template: `
<div
@[event]="handleClick"
@[name]="message"
>
{{message}}
</div>
`
})

app.mount('#root')
</script>
</body>
</html>

阻止默认行为 @click.prevent

通常是用于表单的提交, 我们要设置默认不让其跳转 (要改为手动提交校验这样的逻辑):

<!DOCTYPE html>
<html lang="en">
<head>
<title>阻止默认行为</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
// event: 'click',
event: 'mouseenter',
name: 'title'
}
},
methods: {
handleClick () {
alert('click')
}
},
template: `
<form action="https://www.baidu.com"
@click.prevent="handleClick"
>
<button type="submit">提交</button>
{{message}}
</form>
`
})

app.mount('#root')
</script>
</body>
</html>

简单就到这里了, 这些常用的模板语法其实就那么几个, 用多了就熟悉了.

耐心和恒心, 总会获得回报的.



举报

相关推荐

0 条评论