Vue3基本语法_[Vue3]Vue3

Vue 3 语法教程

1. 创建Vue实例

Vue 3 使用 createApp 函数来创建应用实例：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

2. 模板语法

模板语法是Vue的核心之一，用于将数据绑定到DOM结构。

2.1 插值

使用双大括号进行文本插值：

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

2.2 绑定属性

使用 v-bind 或 : 绑定HTML属性：

<template>
  <img :src="imageSrc" alt="Vue logo">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/logo.png'
    }
  }
}
</script>

3. 指令

指令是带有 v- 前缀的特殊属性。

3.1 条件渲染

使用 v-if 进行条件渲染：

<template>
  <p v-if="seen">现在你看到我了</p>
</template>

<script>
export default {
  data() {
    return {
      seen: true
    }
  }
}
</script>

3.2 列表渲染

使用 v-for 渲染列表：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Apple' },
        { id: 2, text: 'Banana' },
        { id: 3, text: 'Cherry' }
      ]
    }
  }
}
</script>

3.3 事件处理

使用 v-on 或 @ 监听事件：

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

<script>
export default {
  methods: {
    doSomething() {
      alert('Button clicked!');
    }
  }
}
</script>

3.4 表单绑定

使用 v-model 绑定表单输入：

<template>
  <input v-model="message" placeholder="Type something">
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

4. 计算属性和监听器

4.1 计算属性

计算属性是基于依赖缓存的属性：

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}
</script>

4.2 监听器

监听器用于观察和响应数据的变化：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
}
</script>

5. 生命周期钩子

Vue实例在生命周期内会触发一系列钩子函数。

5.1 常见生命周期钩子

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  beforeUnmount() {
    console.log('Component will unmount');
  },
  unmounted() {
    console.log('Component unmounted');
  }
}

6. 组件

6.1 全局注册组件

在 main.js 中全局注册组件：

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

6.2 局部注册组件

在父组件中局部注册组件：

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

6.3 组件通信

父组件向子组件传递数据：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

子组件向父组件发送事件：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log('Received event with data:', data);
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="sendEvent">Send Event</button>
</template>

<script>
export default {
  methods: {
    sendEvent() {
      this.$emit('custom-event', 'Hello from child');
    }
  }
}
</script>

7. Vue Router

Vue Router 用于实现单页面应用的路由功能。

7.1 安装和配置

安装Vue Router：

npm install vue-router@next

配置路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

在 main.js 中使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

7.2 路由视图和链接

使用 router-view 和 router-link：

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

8. Vuex

Vuex 是一个专为 Vue.js 应用设计的状态管理模式。

8.1 安装和配置

安装Vuex：

npm install vuex@next

配置Vuex：

// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

export default store;

在 main.js 中使用Vuex：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';

createApp(App).use(store).use(router).mount('#app');

8.2 使用Vuex状态

在组件中使用Vuex状态：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

9. 组合式API

组合式API使得可以在一个函数中组合多个逻辑相关的功能。

9.1 基本用法

使用 setup 函数：

<template>
  <div>{{ message

 }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3 with Composition API');
    return { message };
  }
}
</script>

9.2 组合逻辑

将逻辑提取到可复用的函数中：

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

在组件中使用：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
}
</script>

10. 高级特性

10.1 自定义指令

创建自定义指令：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

使用自定义指令：

<template>
  <input v-focus>
</template>

10.2 插槽

使用插槽进行内容分发：

<!-- BaseButton.vue -->
<template>
  <button>
    <slot></slot>
  </button>
</template>

使用插槽：

<template>
  <BaseButton>Click me</BaseButton>
</template>

<script>
import BaseButton from './BaseButton.vue';

export default {
  components: {
    BaseButton
  }
}
</script>

总结

以上是Vue 3的详细语法教程，从创建Vue实例到高级特性覆盖了各个方面。通过这些示例，你可以掌握Vue 3的核心概念和用法，能够更高效地开发Vue 3项目。

版权声明：如无特殊说明，文章均为本站原创，转载请注明出处

本文链接：http://example.com/subject/article/74/

许可协议：署名-非商业性使用 4.0 国际许可协议