Vue---1、Vue 基础语法与实例核心知识

一、Vue 基础语法详解

在 Vue 开发中，基础语法是构建应用的基石，主要包含以下核心内容：

1. 插值语法

通过双大括号{{ }}实现数据与模板的绑定，可直接嵌入 JS 表达式：

{{ message }} <!-- 输出data中的message属性 -->
{{ 1 + 1 }} <!-- 输出计算结果2 -->
{{ Date.now() }} <!-- 输出当前时间戳 -->

2. 数据绑定机制

• 单向绑定（v-bind）：数据从 Vue 实例流向 DOM，完整写法v-bind:属性名，缩写为:

  <img :src="imgUrl" alt="图片"> <!-- 动态绑定图片地址 -->
  <div :class="activeClass">内容</div> <!-- 动态绑定类名 -->
  

• 双向绑定（v-model）：数据在实例与 DOM 间双向同步，仅适用于表单元素，完整写法v-model:value，缩写为v-model

  <input v-model="userInput" type="text"> <!-- 输入框与userInput数据双向绑定 -->
  <select v-model="selected"><option value="1">选项1</option>
  </select>
  

3. 事件处理

通过v-on监听 DOM 事件，完整写法v-on:事件名，缩写为@

<button @click="handleClick">点击我</button>
<div @mouseover="showTooltip">悬停查看提示</div>

在 methods 中定义事件处理函数：

methods: {handleClick() {this.count++},showTooltip(e) {console.log('鼠标位置:', e.pageX, e.pageY)}
}

4. 条件与循环指令

• 条件渲染：

  <div v-if="isLogin">已登录</div>
  <div v-else>请登录</div>
  <div v-show="isVisible">根据条件显示隐藏</div> <!-- v-show通过CSS display控制 -->
  

• 循环遍历：

  <!-- 遍历数组 -->
  <ul><li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item.name }}</li>
  </ul>
  <!-- 遍历对象 -->
  <div v-for="(value, key, index) in userInfo">{{ index }}. {{ key }}: {{ value }}
  </div>
  

二、Vue 实例核心选项

创建 Vue 实例时，通过配置项定义应用逻辑：

1. 数据与方法

new Vue({el: '#app', // 挂载点，可通过$mount()替代data() {return {message: 'Hello Vue',count: 0}},methods: {increment() {this.count++},formatMessage() {return this.message.toUpperCase()}}
})

2. 计算属性与监听属性

• 计算属性（computed）：基于依赖缓存，仅在依赖变化时重新计算

  computed: {fullName() {return this.firstName + ' ' + this.lastName},evenNumbers() {return this.numbers.filter(num => num % 2 === 0)}
  }
  

• 监听属性（watch）：响应特定数据变化，可捕获新旧值

  watch: {count: {handler(newVal, oldVal) {console.log(`计数从${oldVal}变为${newVal}`)if (newVal >= 10) this.resetCount()},deep: true, // 深度监听对象属性immediate: true // 实例创建时立即触发}
  },
  methods: {resetCount() {this.count = 0}
  }
  

3. 生命周期钩子函数

Vue 组件从创建到销毁的完整周期中，提供 8 个钩子函数：

new Vue({beforeCreate() {console.log('实例初始化，数据和DOM未初始化')},created() {console.log('数据已初始化，可访问data/methods')// 常用于发送API请求},beforeMount() {console.log('模板编译完成，DOM未渲染')},mounted() {console.log('DOM挂载完成，可操作DOM元素')// 初始化第三方库、绑定事件},beforeUpdate() {console.log('数据更新，DOM未更新')},updated() {console.log('DOM更新完成')},beforeDestroy() {console.log('实例销毁前，可清理定时器、事件监听')},destroyed() {console.log('实例销毁，所有子组件已卸载')}
})

三、特殊指令与挂载方式

1. 特殊功能指令

• v-once：仅渲染一次，后续数据变化不更新视图

  <div v-once>{{ timestamp }}</div> <!-- 时间戳仅显示初始值 -->
  

• v-pre：跳过编译，直接显示原始内容

  <div v-pre>{{ 不会被编译的内容 }}</div>
  

• v-stop：阻止事件冒泡

  <div @click="parentClick"><button @click.stop="childClick">点击不触发父事件</button>
  </div>
  

• v-html：渲染 HTML 字符串（需注意 XSS 安全）

  <div v-html="htmlContent"></div>
  

• v-text：替代插值语法，设置元素文本内容

  <span v-text="message"></span> <!-- 等价于{{ message }} -->
  

2. 实例挂载方式

• 方式一：创建实例后挂载

  const vm = new Vue({ /* 配置项 */ })
  vm.$mount('#app')
  

• 方式二：创建时直接挂载

  new Vue({ /* 配置项 */ }).$mount('#app')
  

• 方式三：动态选择挂载点

  const vm = new Vue({template: '<div>动态挂载</div>'
  })
  document.addEventListener('DOMContentLoaded', () => {vm.$mount('#dynamic-app')
  })
  

通过掌握这些基础语法与实例核心知识，能够快速搭建 Vue 应用的骨架，为后续复杂功能开发奠定基础。在实际项目中，需结合业务场景灵活运用，并注意性能优化与代码规范。