Vue模版语法与数据绑定

vue模版语法有两大类

1.插值语法：

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js样式，且可以直接读取到data中的所有属性

<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

2.指令语法：

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）。
举例：v-bind：href="xxx"或简写为：href=“xxx”,xxx同样要写js表达式且可以直接读取到data中的所有属性。
备注：Vue中有很多指令，且形式都是v-？？？？

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
const app = {
  data() {
    return {
      use: false
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

vue中有两种数据绑定的方式

1.单向绑定（v-bind）：数据只能从data指向页面。

2.双向绑定（v-model）：数据不仅可以从data流向页面，还可以从页面流向data

备注：
1.双向文本一般用于表单类元素(如：input，select等)
2.v-model：value可以简写为v-model，因为v-model默认收集的就是value值

<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      imageSrc: 'https://static.jyshare.com/images/code-icon-script.png'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>