模板语法
模板的理解
html 中包含了一些 JS 语法代码,语法分为两种,分别为:
- 插值语法(双大括号表达式)
- 指令(以 v-开头)
插值语法
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ,xxxx
指令语法
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例:v-bind:href = ‘xxxx’ ,xxxx 会作为 js 表达式被解析
- 说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子
具体代码
<template>
<div class="hello">
<!-- 插值语法 -->
<h1>{{ msg }}</h1>
<hr>
<!-- 指令语法 -->
<a v-bind:href="url" target="_blank">点我去百度</a>
<!-- 简写形式 -->
<a :href="url" target="_blank">点我去百度</a>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
msg:'你好呀',
url:'https://www.baidu.com',
}
}
}
</script>
数据绑定
单向数据绑定
- 语法:v-bind:href =“xxx” 或简写为 :href
- 特点:数据只能从 data 流向页面
双向数据绑定
- 语法:v-mode:value=“xxx” 或简写为 v-model=“xxx”
- 特点:数据不仅能从 data 流向页面,还能从页面流向 data
具体代码
<template>
<div class="hello">
<!-- v-bind 单向绑定 -->
<input type="text" v-bind:value="name"> <br>
<!-- 简写 -->
<input type="text" :value="name"> <br>
<!-- v-model 双向绑定 -->
<input type="text" v-model="name"> <br>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
name:'林邵晨'
}
}
}
</script>