【vue】笔记三：Vue基础语法以及数据绑定

一、语法指令

1. 插值

Vue中最常用的语法之一就是插值（interpolation），可用于显示文本、HTML等。在Vue中，插值的语法是使用双大括号和v-bind指令进行插值。

插值语法：

<div>{{ message }}div>

以上示例中的message可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行绑定。

2. v-bind指令

v-bind指令用于绑定HTML元素的特性（attribute），可以动态地更新元素的特性值。

v-bind指令：

<img v-bind:src="imgUrl">

以上示例中的imgUrl可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行绑定。

3. v-model指令

v-model指令可用于实现表单元素与数据的双向数据绑定。

v-model指令：

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

以上示例中的message可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行双向数据绑定。

4. 计算属性

计算属性是Vue中一个重要的特性，可用于计算衍生数据。

计算属性：

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

以上示例中的reversedMessage是一个计算属性，其值会根据message进行计算得出。

5. 监听器

在Vue中，我们可以使用watch属性来监听数据的变化。

监听器：

watch: {
  message: function (newValue, oldValue) {
    console.log('message changed from ' + oldValue + ' to ' + newValue)
  }
}

以上示例中，我们使用watch属性来监听message的变化，并在变化时进行相应的操作。

6. 响应式数据

在Vue中，如果我们需要将一个变量绑定到视图中，并且在变量发生改变时自动更新视图，我们需要使用Vue提供的响应式数据特性。

响应式数据：

data: {
  message: 'Hello, Vue!'
}

以上示例中的message是一个响应式数据，当message的值发生变化时，Vue会自动更新视图。

7. 生命周期钩子函数

Vue中的生命周期钩子函数可用于在Vue实例的不同阶段执行相关操作，如实例化前、实例化后、挂载前、挂载后、更新前、更新后等。

常用的生命周期钩子函数：

• beforeCreate()：实例化之前
• created()：实例化之后，可访问数据和方法，但无法访问DOM
• beforeMount()：挂载之前
• mounted()：挂载之后
• beforeUpdate()：更新之前
• updated()：更新之后
• beforeDestroy()：销毁之前
• destroyed()：销毁之后

生命周期钩子函数的使用示例：

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
})

8. 指令

指令是Vue中用来扩展HTML元素功能的特殊属性，通过指令我们可以动态地操作DOM，绑定事件、控制元素显示/隐藏等。

Vue.js提供了丰富的指令语法，指令是以 “v-” 开头的特殊属性。指令语法由指令名称和指令表达式组成，例如：v-bind:href=“url”。

以下是Vue.js中常用的指令：

1. v-bind指令：可以动态地绑定一个或多个HTML属性到表达式。例如：v-bind:href=“url”。

2. v-model指令：实现表单输入元素的双向绑定，代表模板中表单控件的值与组件实例中的数据之间的关系。例如：。

3. v-if指令：根据表达式的值来条件渲染元素。例如：

   Visible
   。

4. v-for指令：循环渲染数组或对象中的元素。例如：

   {{ item }}
   。

5. v-on指令：用于绑定事件处理器函数。例如：点击我。

6. v-show指令：根据表达式的值来切换元素的显示/隐藏状态。例如：

   Visible
   。

7. v-text指令：更新元素的 “textContent” 属性。适用于更新元素的文本内容，可与其他指令组合使用。例如：

8. v-html指令：更新元素的 “innerHTML” 属性。适用于将HTML内容动态插入或替换到当前元素中，可与其他指令组合使用。例如：

   。

9. v-cloak指令：它在没有数据时隐藏未编译的Mustache标签。可以使用一个原始的样式表来为那些未被编译的标签增加display:none;。例如：

   {{ message }}
   。

10. 自定义指令：针对特定需求，开发者可以创建自定义指令。例如：Vue.directive('myDirective', {...})。

以上是Vue.js中常用的指令语法，可以根据实际应用需求灵活组合使用。

二、数据绑定

数据绑定是Vue.js的一个重要特性，它将模型和视图连接起来，实现双向数据绑定。以下是Vue.js中的数据绑定：

1. 单向数据绑定：

使用插值（Interpolation）或指令（Directives）将从模型绑定到视图的数据反映在视图中。

{{ message }}

2. 双向数据绑定：

使用v-model指令实现，当视图中的数据变化时，模型中的数据也随之更新；当模型中的数据变化时，视图中的数据也随之更新。

在Vue.js中，数据绑定是通过JavaScript的响应式系统实现的。当数据发生变化时，Vue.js会自动更新视图。数据变化可以是由代码、用户操作或异步操作引起的。