Vue基础语法

插值语法（Mustache）

Mustache

数据是响应式的。

<div id="app">
  <p>{{message}}</p>
  <p>{{counter*2}}</p> /*也能够是一个表达式*/
</div>
<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: "hello vue",
      counter: 2
    },
  })
</script>

v-once

数据不是响应式的

<div id="app">
  <p v-once>{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: "hello vue"
    },
  })
</script>

当在控制台 app.message = 'hello' 时，页面中的数据不会发生改变。

v-html

该指令后面每每会跟上一个string类型，会将string的html解析出来而且进行渲染。

v-text

v-pre

v-block

绑定属性

计算属性

事件监听

条件判断

循环遍历

阶段案例

v-model