Vue.js 基础知识内容(前端开发必备)
Vue.js 是一个渐进式的 JavaScript 框架,主要用于构建用户界面。Vue 的核心库只关注视图层,便于与其他库或现有项目集成。与其他框架相比,Vue 更易于学习和使用,适合构建单页应用(SPA)。
Vue 介绍
Vue.js(通常简称为 Vue)是一个用于构建用户界面的开源 JavaScript 框架。它是由尤雨溪创建的,并且在过去几年中得到了广泛的使用和认可。Vue 的设计目标是易于上手,渐进式地应用到项目中,同时提供强大的功能和灵活性。
Vue 安装
Vue 可以通过多种方式安装和使用:
-
通过 CDN 引入:
这种方式适合快速原型开发或简单的页面。
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.0/dist/vue.global.js"></script>
-
通过 npm 安装:
适用于基于模块化开发的项目,尤其是使用构建工具(如 webpack 或 Parcel)的项目。
npm install vue@next
-
使用 Vue CLI:
Vue CLI 是官方提供的脚手架工具,帮助快速搭建项目。
npm install -g @vue/cli vue create my-project cd my-project npm run serve
Vue 基础
插值表达式 {{表达式}}
插值表达式用于在页面中动态地显示数据。Vue 使用双花括号 {{ }}
来进行插值表达式。
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
}
});
app.mount('#app');
</script>
在上面的例子中,Vue 实例绑定到 #app
元素,并且 message
的值会显示在 div
中。
插值闪烁
在网络较慢时,数据未加载完全会显示出花括号 {{}}
,而不是数据,这种现象被称为插值闪烁。为了解决这个问题,可以使用 v-cloak
指令。
<div id="app" v-cloak>
{{ message }}
</div>
在 CSS 中添加以下样式:
[v-cloak] {
display: none;
}
这样在 Vue 实例准备完毕之前,带有 v-cloak
的元素会保持隐藏。
Vue 实例
每个 Vue 应用都是通过创建一个 Vue 实例开始的。你可以在创建 Vue 实例时传递一个选项对象。
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
}
});
app.mount('#app');
Vue 指令
Vue 指令是带有 v-
前缀的特殊属性,提供了许多功能,比如数据绑定、事件监听等。常见指令如下:
v-model
v-model
指令用于实现表单控件与应用数据之间的双向绑定。
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
}
});
app.mount('#app');
</script>
在这个例子中,输入框的值会随着 message
的变化而变化,反之亦然。
v-on
v-on
指令用于监听 DOM 事件并在触发时执行一些 JavaScript。
<div id="app">
<button v-on:click="doSomething">Click me</button>
</div>
<script>
const app = Vue.createApp({
methods: {
doSomething() {
alert('Button clicked!');
}
}
});
app.mount('#app');
</script>
v-on
也可以缩写为 @
。
<button @click="doSomething">Click me</button>
v-html
v-html
指令用于输出 HTML 内容。需要注意的是,使用 v-html
时,可能会导致 XSS 攻击,务必确保插入的 HTML 是可信的。
<div id="app">
<div v-html="htmlContent"></div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
htmlContent: '<p>This is some <strong>HTML</strong> content.</p>'
}
}
});
app.mount('#app');
</script>
单向绑定
单向绑定是指数据只能从 JavaScript 传递到 DOM,不会反向更新。
v-text
v-text
指令用于更新元素的文本内容,类似于插值表达式。
<div id="app">
<span v-text="message"></span>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
}
});
app.mount('#app');
</script>
双向绑定
通过 v-model
可以实现表单控件与数据的双向绑定。
<div id="app">
<input v-model="message">
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
}
});
app.mount('#app');
</script>
在这个例子中,输入框的值和 message
数据会实时同步。
元素绑定事件
使用 v-on
或 @
可以绑定事件到页面元素。
<div id="app">
<button v-on:click="handleClick">Click me</button>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
alert('Button clicked!');
}
}
});
app.mount('#app');
</script>
事件修饰符
Vue 提供了一些事件修饰符,以简化常见的事件处理逻辑。
.stop
阻止事件冒泡:
<button @click.stop="handleClick">Click me</button>
.prevent
阻止默认事件:
<form @submit.prevent="handleSubmit">...</form>
.capture
使用事件捕获模式:
<button @click.capture="handleClick">Click me</button>
.self
只有元素自身触发事件时才执行:
<div @click.self="handleClick">...</div>
.once
事件只执行一次:
<button @click.once="handleClick">Click me</button>
循环遍历
通过 v-for
可以循环遍历数组和对象。
遍历数组
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
迭代对象
<ul>
<li v-for="(value, key, index) in object" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
条件渲染
v-if
根据表达式的值决定是否渲染:
<p v-if="seen">Now you see me</p>
v-show
元素会保留在 DOM 中,只是用 CSS 属性将其隐藏:
<p v-show="seen">Now you see me</p>
v-else 和 v-else-if
<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B'">B</p>
<p v-else>C</p>
绑定属性
v-bind
用于绑定 HTML 属性:
<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">
计算属性
计算属性是基于其依赖进行缓存的。它们只有在其依赖发生改变时才会重新计算。
const app = Vue.createApp({
data() {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
});
app.mount('#app');
监控属性
使用 watch
来响应数据变化。与计算属性不同的是,watch 允许执行异步操作或昂贵的处理逻辑。
const app = Vue.createApp({
data() {
return {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
}
},
watch: {
question(newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
getAnswer: _.debounce(function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
}, 500)
}
});
app.mount('#app');
深度监控
对于复杂对象,可以使用 deep: true
选项。
const app = Vue.createApp({
data() {
return {
someObject: {
a: 1,
b: 2
}
}
},
watch: {
someObject: {
handler(val, oldVal) {
console.log('Object changed')
},
deep: true
}
}
});
app.mount('#app');
Vue 组件化
Vue 组件系统使得开发者可以将应用分割成独立的、可复用的组件。
注册全局组件
const app = Vue.createApp({});
app.component('my-component', {
template: '<div>A custom component!</div>'
});
app.mount('#app');
局部注册
const app = Vue.createApp({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
});
app.mount('#app');
组件通信
父向子传递 props
app.component('child', {
props: ['message'],
template: '<span>{{ message }}</span>'
});
父组件中使用:
<child message="Hello!"></child>
子向父通信
通过事件:
app.component('child', {
template: '<button @click="notify">Notify</button>',
methods: {
notify() {
this.$emit('notify')
}
}
});
父组件中监听:
<child @notify="handleNotify"></child>
使用 axios 进行 AJAX 请求
首先安装 axios:
npm install axios
基本用法
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
各种请求类型
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
其他请求类型有 axios.delete
, axios.head
, axios.put
, axios.patch
等。
通过 v-for 和 v-if 实现复杂逻辑
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">Remove</button>
</li>
</ul>
<p v-if="items.length === 0">No items left.</p>
<p v-else-if="items.length === 1">Only one item left.</p>
<p v-else>There are {{ items.length }} items.</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
},
methods: {
removeItem(index) {
this.items.splice(index, 1);
}
}
});
app.mount('#app');
</script>
Vue 3 的新特性
组合式 API(Composition API)
Vue 3 引入了组合式 API,允许开发者更灵活地组织组件逻辑。
import { createApp, ref } from 'vue';
const app = createApp({
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment };
},
template: `
<div>
<button @click="increment">Count is {{ count }}</button>
</div>
`
});
app.mount('#app');
响应性系统改进
Vue 3 中响应性系统得到了显著改进,性能更好,并且更容易调试。
Teleport 组件
<teleport>
组件允许你将子组件渲染到 DOM 树中的其他位置。
<teleport to="body">
<div class="modal">I'm in the body tag now.</div>
</teleport>
Fragment 支持
Vue 3 支持多个根节点,这意味着组件模板不再需要一个唯一的根元素。
const app = Vue.createApp({
template: `
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
`
});
app.mount('#app');
更好的 TypeScript 支持
Vue 3 提供了更好的 TypeScript 支持,使得与 TypeScript 的集成更加顺畅。
以上就是 Vue.js 的一些基础知识和 Vue 3 的新特性。希望这篇文章能帮助你更好地理解和使用 Vue.js。Happy coding!
- 点赞
- 收藏
- 关注作者
评论(0)