插值语法 Mustache

功能：用于解析标签体内容

语法：{{name}},双大括号内可以写js表达式，并且可以直接读取到data中所有的属性。

解析标签体

使用两个双大括号用来解析变量

<div id="app">
  <h1>Hello,{{name}}</h1>
  <h2>{{title}}</h2>
</div>
<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#app',
    data: {
      name: 'Vue.js',
      title: '你好啊？'
    }
  })
</script>

运行结果：

{{js表达式}}

<h3>{{Date.now()}}</h3>
//输出结果：1650291636634 （时间戳）

---

指令语法

功能：用于解析标签（包括标签属性、标签体内容、事件等）

语法：v-bind:href=”url” ，其中双引号内也可以写js表达式，另外也可以简写成 :href=”url”

v-bind(简写方式 : 冒号 )

<div id="app">
  <a v-bind:href="url">访问Linuxcc</a>
</div>
<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#app',
    data: {
      url:'https://www.linuxcc.cn'
    }
  })
</script>

解析网址方式

js表达式方式

<!-- 又解析成时间戳了 -->
<a v-bind:href="Date.now()">访问Linuxcc</a> 

v-model双向绑定

v-model 双向绑定：数据不仅从data流向页面，也可以从页面流入data数据中

双向绑定一般使用到表单数据中，如input,select标签等

基础使用

<div id="app">
  <h1>Hello,{{name}}</h1>
  <hr>
  v-model <input type="text" v-model:value="name">
</div>
<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#app',
    data: {
      name: 'Vue.js',
    }
  })
</script>

视频演示

简写方式 可以省略:value

<input type="text" v-model="name">