Vue3 基础语法

Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。

以下是一些常见的 Vue.js 基础语法和概念，包括模板语法、指令、事件处理、计算属性和组件等。

以下的语法内容在后面章节还会详细说明。

1. 创建 Vue 实例

创建 Vue 实例是开始使用 Vue.js 的第一步，通常你会在一个 HTML 文件中创建一个 Vue 实例并将其挂载到一个 DOM 元素上。

实例

<div id="hello-vue" class="demo">
{{ message }}
</div>

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

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

尝试一下 »

HTML 部分说明：

<div id="hello-vue" class="demo">:

这是一个 <div> 元素，它具有 id 为 hello-vue 和 class 为 demo。
在 Vue 应用中，这个 <div> 将会被 Vue 实例管理，并且会在数据发生变化时更新内容。

{{ message }}:

这是 Vue.js 的模板语法，用于将 Vue 实例中的 message 数据绑定到页面上。
当 Vue 实例中的 message 数据变化时，页面上的内容也会随之更新。

JavaScript 部分说明：

Vue 实例定义:

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

HelloVueApp 是一个普通的 JavaScript 对象，包含了 Vue 组件选项。
data() 方法返回一个包含 message 属性的对象，这个属性的初始值是 'Hello Vue!!'。

创建并挂载 Vue 应用:

创建并挂载 Vue 应用:

Vue.createApp() 方法用于创建一个 Vue 应用实例，参数是一个包含组件选项的对象（这里是 HelloVueApp）。
.mount('#hello-vue') 方法将 Vue 应用实例挂载到页面中具有 id="hello-vue" 的 DOM 元素上。

执行过程

页面加载时，浏览器解析 HTML 和 JavaScript。
Vue.js 脚本执行时，创建了一个 Vue 应用实例，并将其绑定到 <div id="hello-vue"> 元素上。
Vue 应用实例根据 data() 中的初始数据，将 message 的值渲染到页面上的 {{ message }} 处。
当 message 数据发生变化时（例如通过用户交互或异步操作），页面会自动更新以反映这些变化。

2. 模板语法

插值

Vue.js 使用双大括号 {{ }} 来表示文本插值：

实例

<div>{{ message }}</div>

指令

指令是带有前缀 v- 的特殊属性，用于在模板中表达逻辑。

v-bind: 动态绑定一个或多个特性，或一个组件 prop。

<a v-bind:href="url">Link</a>

简写：

<a :href="url">Link</a>

v-if: 条件渲染。

<p v-if="seen">Now you see me</p>

v-for: 列表渲染。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model: 双向数据绑定。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on: 事件监听器。

<button v-on:click="doSomething">Click me</button>

简写：

<button @click="doSomething">Click me</button>

3. 事件处理

在 Vue.js 中，你可以使用 v-on 指令来监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

实例

<div id="app">
<button @click="greet">Greet</button>
</div>

<script>
createApp({
methods: {
greet() {
alert('Hello!');
}
}
}).mount('#app');
</script>

4. 计算属性

计算属性是基于其依赖进行缓存的属性。计算属性只有在其相关依赖发生变化时才会重新计算。

实例

<div id="app">
<p>{{ reversedMessage }}</p>
</div>

<script>
createApp({
data() {
return {
message: 'Hello'
};
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
}).mount('#app');
</script>

5. 组件

组件是 Vue.js 最强大的功能之一。组件允许你使用小型、独立和通常可复用的组件构建大型应用。

实例

const app = createApp({});

app.component('my-component', {
template: '<div>A custom component!</div>'
});

使用组件

实例

<div id="app">
<my-component></my-component>
</div>

<script>
const app = createApp({});

app.component('my-component', {
template: '<div>A custom component!</div>'
});

app.mount('#app');
</script>

6. Props 和事件

Props

Props 用于在组件之间传递数据。

实例

<div id="app">
<blog-post title="My journey with Vue"></blog-post>
</div>

<script>
const app = createApp({
data() {
return {};
}
});

app.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
});

app.mount('#app');
</script>

事件

子组件通过 $emit 触发事件，父组件可以监听这些事件。

实例

<div id="app">
<button-counter @increment="incrementTotal"></button-counter>
<p>Total clicks: {{ total }}</p>
</div>

<script>
const app = createApp({
data() {
return {
total: 0
};
},
methods: {
incrementTotal() {
this.total++;
}
}
});

app.component('button-counter', {
template: '<button @click="increment">You clicked me {{ count }} times.</button>',
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
this.$emit('increment');
}
}
});

app.mount('#app');
</script>

返回顶部