模板语法
基本应用
打开中文Vue官网 :https://cn.vuejs.org/ ,点击快速上手入参考文档,有时间可以阅读。
本次 介绍的模板语法,打开新建的vue项目,src 文件夹下介绍如图:
![](https://i-blog.csdnimg.cn/blog_migrate/0cc7f5426d860ab07e54f88284e0f62d.png)
打开HelloWorld.vue , 进行编辑
要想实现 动态数据绑定 和 DOM 监听,就需要将前端HTML中对应的数据使用 双花括号 {{}} 进行修饰,内部 的值要与 JavaScript脚本中的 模板对应,实例代码如下:
<template>
<div class="hello">
<h1> DS01 Vue </h1>
<h2> {{mes_ds}} </h2>
</div>
</template>
<script>
export default {
name: 'myDemo',
data(){
return{
mes_ds:"模板语法 data函数下添加return{} 实现 数据数据绑定 与 DOM监听"
}
}
}
</script>
显然,script脚本中的 data函数中使用return返回的值通过 mes_ds 在 template 中使用,这可以当做标准语法模板,也是一种规范。但是 双花括号 只能输出简单的文本,要想输出相关的原始HTML,要使用 v-html ,当要显示 a标签中的内容,需要在template 中引入 v-html 。
![](https://i-blog.csdnimg.cn/blog_migrate/646bde4d515f31a674f78435d5f3b039.png)
2.属性 Attribute也有可能发生动态变化 ,使用 v-bind: 或者 : 实现相关功能:
<template>
<div class="hello">
<h1> DS01 Vue </h1>
<h2> {{mes_ds}} </h2>
<h2> {{raw_html}}</h2>
<div v-html="raw_html"></div>
<div v-bind:id="dynamicId"> Ds v-bind: || ":" </div>
<div :id="dynamicId"> Ds ":" </div>
<h2>{{num+50}}</h2>
<h2>{{flag?"vue-true":"vue-false"}}</h2>
</div>
</template>
<script>
export default {
name: 'myDemo',
data(){
return{
mes_ds:"模板语法 数据数据绑定 与 DOM监听",
raw_html:"<a href='https://blog.csdn.net'>模板语法</a>",
dynamicId:"1001",
num:100,
flag:false
}
}
}
</script>
注意;每个绑定仅支持单一表达式,也就是一段能够被求值的 JavaScript 代码。支持三目运算。
3.条件渲染(v-if)
根据条件不同渲染不同内容,v-if 指令会基于表达式 "seen" 的值的真假来移除/插入该 元素,v-else与其相反
<p v-if:="seen"> Can you see me ? </p>
<p v-else> see another lable </p>
v-show 也可以实现相关标签 显示/隐藏 功能。v-if 是真正的条件渲染,当隐藏节点时,它会直接删除相关内容,它是惰性的,有更高的切换开销。
4 .列表渲染 v-for
列表展示方式比较常见 ,使用v-for 可以将一个数组渲染为列表。需要使用item in items 的方式。