新塘做网站公司,成都网络营销公司哪家好,网站建设傲鸿,wordpress4.9主题安装一、基础语法与指令
1. 插值表达式 插值表达式是 Vue 中最基础的数据绑定方式#xff0c;使用双大括号{{ }}将数据包裹起来#xff0c;例如{{ message }}#xff0c;它会将 Vue 实例中的message属性的值渲染到页面相应位置。这种方式可以方便地在页面中展示动态数据#x…一、基础语法与指令
1. 插值表达式 插值表达式是 Vue 中最基础的数据绑定方式使用双大括号{{ }}将数据包裹起来例如{{ message }}它会将 Vue 实例中的message属性的值渲染到页面相应位置。这种方式可以方便地在页面中展示动态数据如从后端获取的数据或者用户输入的信息。
2. 指令 Vue 提供了一系列指令来增强 HTML 的功能。 v-bind用于动态绑定 HTML 属性缩写为:。例如img v-bind:srcimageSrc可以根据imageSrc变量的值动态改变图片的源地址。v-on用于绑定事件监听器缩写为。比如button v-on:clickhandleClick点击我/button当按钮被点击时会触发handleClick方法。v-model实现双向数据绑定常用于表单元素。例如input v-modelinputValue用户在输入框中输入的值会自动同步到inputValue变量反之亦然。v-if和v-show用于控制元素的显示与隐藏。v-if是真正的条件渲染会根据条件决定元素是否被添加到 DOM 中v-show则是通过 CSS 的display属性来控制元素的可见性元素始终在 DOM 中存在。
二、组件化开发
1. 组件的创建与注册 在 Vue 中组件是构建应用的核心单元。可以使用Vue.component方法全局注册组件或者在单文件组件.vue文件中局部注册。一个简单的全局组件示例如下
javascript
Vue.component(my-component, {template: div这是一个自定义组件/div
})在单文件组件中结构更加清晰
vue
templatediv这是一个局部组件/div
/templatescript
export default {name: MyLocalComponent
}
/script2. 组件通信 组件之间的通信是项目开发中常见的需求。 父子组件通信父组件可以通过props向子组件传递数据子组件通过$emit触发自定义事件向父组件传递消息。例如父组件
vue
templatedivchild-component :messageparentMessage child-eventhandleChildEvent/child-component/div
/templatescript
import ChildComponent from ./ChildComponent.vueexport default {components: {ChildComponent},data() {return {parentMessage: 来自父组件的消息}},methods: {handleChildEvent(payload) {console.log(收到子组件消息, payload)}}
}
/script子组件
vue
templatedivp{{ message }}/pbutton clicksendMessageToParent向父组件发送消息/button/div
/templatescript
export default {props: [message],methods: {sendMessageToParent() {this.$emit(child-event, 这是子组件发送的消息)}}
}
/script非父子组件通信可以使用 Vuex 状态管理库或者事件总线Event Bus来实现。事件总线的实现方式如下 首先创建一个事件总线实例
javascript
// event-bus.js
import Vue from vue
export const EventBus new Vue()然后在组件中使用 组件 A 发送事件
vue
templatedivbutton clicksendMessage发送消息/button/div
/templatescript
import { EventBus } from ./event-bus.jsexport default {methods: {sendMessage() {EventBus.$emit(global-event, 这是组件 A 发送的消息)}}
}
/script组件 B 接收事件
vue
templatediv接收消息的组件 B/div
/templatescript
import { EventBus } from ./event-bus.jsexport default {mounted() {EventBus.$on(global-event, (message) {console.log(组件 B 收到消息, message)})},beforeDestroy() {EventBus.$off(global-event)}
}
/script三、Vue 路由 Vue Router 是 Vue.js 的官方路由管理器用于实现单页面应用SPA的页面导航。
1. 路由的基本配置 首先安装 Vue Router
bash
npm install vue-router然后在main.js中引入并使用
javascript
import Vue from vue
import VueRouter from vue-router
import App from ./App.vue
import Home from ./views/Home.vue
import About from ./views/About.vueVue.use(VueRouter)const routes [{path: /,name: Home,component: Home},{path: /about,name: About,component: About}
]const router new VueRouter({routes
})new Vue({router,render: h h(App)
}).$mount(#app)在组件中通过router-link和router-view来实现页面跳转和视图渲染
vue
templatedivrouter-link to/首页/router-linkrouter-link to/about关于/router-linkrouter-view/router-view/div
/template2. 动态路由与路由参数 可以在路由路径中定义动态参数例如
javascript
const routes [{path: /user/:id,name: User,component: User}
]在组件中通过$route.params获取路由参数
vue
templatediv用户 ID{{ $route.params.id }}/div
/template3. 路由导航守卫 路由导航守卫可以用于在路由跳转前进行权限验证、页面加载前的数据获取等操作。例如
javascript
const router new VueRouter({routes
})router.beforeEach((to, from, next) {// 检查用户是否登录const isLoggedIn falseif (to.meta.requiresAuth !isLoggedIn) {next(/login)} else {next()}
})在路由配置中可以设置meta字段来指定是否需要权限验证
javascript
const routes [{path: /admin,name: Admin,component: Admin,meta: {requiresAuth: true}}
]四、Vuex 状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。
1. Vuex 的核心概念 State存储应用的状态数据是单一数据源。例如
javascript
const store new Vuex.Store({state: {count: 0}
})Mutations用于修改 State 的唯一途径是同步函数。例如
javascript
const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count}}
})Actions用于处理异步操作如发送 AJAX 请求等通过提交 Mutations 来间接修改 State。例如
javascript
const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count}},actions: {incrementAsync({ commit }) {setTimeout(() {commit(increment)}, 1000)}}
})Getters类似于计算属性用于从 State 中派生出一些新的数据。例如
javascript
const store new Vuex.Store({state: {todos: [{ id: 1, text: 学习 Vue, done: false },{ id: 2, text: 做项目, done: true }]},getters: {doneTodos(state) {return state.todos.filter(todo todo.done)}}
})2. 在组件中使用 Vuex 在组件中可以通过this.$store访问 Vuex 实例从而获取 State、触发 Actions 等。例如
vue
templatedivp计数{{ count }}/pbutton clickincrement加 1/buttonbutton clickincrementAsync异步加 1/button/div
/templatescript
export default {computed: {count() {return this.$store.state.count}},methods: {increment() {this.$store.commit(increment)},incrementAsync() {this.$store.dispatch(incrementAsync)}}
}
/script五、生命周期钩子 Vue 组件在创建、更新和销毁的过程中会经历一系列的生命周期钩子函数开发者可以在这些钩子函数中执行特定的操作。 beforeCreate在实例初始化之后数据观测data observer和event/watcher事件配置之前被调用。此时组件的选项对象还未初始化this指向当前组件实例但无法访问到data、methods等属性。created在实例创建完成后被立即调用。此时实例已完成以下配置数据观测data observer、属性和方法的运算、watch/event事件回调。然而挂载阶段还未开始$el属性目前不可见。beforeMount在挂载开始之前被调用相关的render函数首次被调用。此时模板编译成渲染函数但尚未挂载到页面上this.$el还未生成。mountedel被新创建的vm.$el替换并挂载到实例上去之后调用该钩子。此时组件已经渲染到页面上可以进行 DOM 操作获取this.$el等。beforeUpdate数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态这不会触发附加的重渲染过程。updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。此时组件的 DOM 已经更新适合执行依赖于 DOM 的操作。beforeDestroy实例销毁之前调用。在这一步实例仍然完全可用。可以在这个钩子中清除定时器、解绑事件监听器等。destroyedVue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定所有的事件监听器会被移除所有的子实例也会被销毁。 例如
vue
templatediv{{ message }}/div
/templatescript
export default {data() {return {message: 初始消息}},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)}
}
/script当组件的数据发生变化或者组件被销毁时相应的生命周期钩子函数会被触发。
六、过渡与动画 Vue 提供了内置的过渡效果和动画支持可以让页面元素的切换更加平滑和生动。
1. 单元素 / 组件的过渡 使用transition组件包裹需要过渡的元素或组件并定义过渡类名。例如
vue
transition namefadep v-ifshow这是一个过渡效果示例/p
/transitionbutton clickshow !show切换显示/button在 CSS 中定义过渡类名对应的样式
css
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {opacity: 0;
}2. 列表过渡 对于列表元素的过渡可以使用transition-group组件。例如
vue
transition-group namelist tagulli v-for(item, index) in list :keyindex{{ item }}/li
/transition-groupbutton clickaddItem添加项目/button在 CSS 中定义列表过渡类名的样式
css
.list-enter-active,
.list-leave-active {transition: all 0.5s;
}
.list-enter,
.list-leave-to {opacity: 0;transform: translateX(30px);
}在 JavaScript 中定义添加项目的方法
javascript
export default {data() {return {list: [项目 1, 项目 2]}},methods: {addItem() {this.list.push(新项目)}}
}七、网络请求 在 Vue 项目中通常使用axios库来进行网络请求。 首先安装axios
bash
npm install axios然后在组件中使用
vue
templatedivulli v-foruser in users{{ user.name }}/li/ul/div
/templatescript
import axios from axiosexport default {data() {return {users: []}},mounted() {axios.get(https://jsonplaceholder.typicode.com/users).then(response {this.users response.data}).catch(error {console.log(error)})}
}
/scriptaxios支持多种请求方式如GET、POST、PUT、DELETE等并可以设置请求头、请求参数等。
八、错误处理 在 Vue 项目中错误处理是确保应用稳定性的重要环节。
1. 组件内错误处理 可以在组件的生命周期钩子函数或者方法中使用try...catch语句来捕获错误。例如
vue
templatedivbutton clickfetchData获取数据/button/div
/templatescript
export default {methods: {fetchData() {try {// 可能出错的代码const result someFunctionThatMayThrowError()console.log(result)} catch (error) {console.log(组件内错误, error)}}}
}
/script2. 全局错误处理 使用Vue.config.errorHandler可以设置全局的错误处理函数用于捕获所有组件渲染和生命周期钩子函数中的错误。例如
javascript
Vue.config.errorHandler function (err, vm, info) {// 处理错误console.log(全局错误, err, vm, info)
}3. 路由导航错误处理 在 Vue Router 中可以通过路由的onError方法来处理路由导航过程中的错误。例如
javascript
const router new VueRouter({routes
})router.onError((error) {console.log(路由导航错误, error)
})
