Vue核心 模板语法 数据绑定

模板语法

模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）
2. 指令（以 v-开头)

插值语法

1. 功能: 用于解析标签体内容
2. 语法: {{xxx}} ，xxxx

指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件
2. 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析
3. 说明：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>

数据绑定

单向数据绑定

1. 语法：v-bind:href =“xxx” 或简写为 :href
2. 特点：数据只能从 data 流向页面

双向数据绑定

1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
2. 特点：数据不仅能从 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>