一、认识Vue.js
Vue.js是一种流行的JavaScript框架,用于构建用户界面。它是一种用于构建Web应用程序的开源框架。Vue.js通过提供可复用的组件和响应式数据绑定来简化前端开发。
- 简单易学:Vue.js的API简洁明了,使得开发者能够快速上手。
- 组件化开发:Vue.js支持将页面划分为多个独立的组件,每个组件拥有自己的逻辑和状态,可以重复使用,便于维护和测试。
- 响应式更新:Vue.js使用了响应式数据绑定的概念,当数据发生变化时,页面会自动更新,减少了手动操作DOM的繁琐过程。
- 虚拟DOM:Vue.js通过使用虚拟DOM来优化页面渲染性能,只更新需要修改的部分,减少了对整个页面的重新渲染。
-
生态系统丰富:Vue.js拥有庞大的社区和生态系统,提供了许多第三方插件和工具,可以帮助开发者更高效地构建应用程序。
1.1 一个Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">改变消息</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '欢迎使用Vue!'
},
methods: {
changeMessage() {
this.message = '消息已改变!';
}
}
});
</script>
</body>
</html>
这个示例中,我们创建了一个Vue实例,并将其挂载到id为"app"的元素上。Vue实例中定义了一个data属性message,初始值为"欢迎使用Vue!"。模板中使用双括号插值语法来显示message的值。
接着我们定义了一个按钮,绑定了一个点击事件changeMessage。当按钮被点击时,changeMessage方法会被调用,将message的值改为"消息已改变!"。
二、Vue实例常用到的构造选项
-
el
:指定Vue实例挂载的元素,可以是一个CSS选择器字符串或一个DOM元素。例如:el: '#app'
。 -
data
:定义Vue实例的响应式数据。它可以是一个对象或一个返回对象的函数。例如:data: { message: 'Hello World' }
。 -
methods
:定义Vue实例的方法。可以在模板中通过v-on
指令调用。例如:methods: { handleClick() { ... } }
。 -
computed
:定义计算属性。可以根据响应式数据计算出新的值,并将其作为属性暴露给模板使用。例如:computed: { fullName() { ... } }
。 -
watch
:监听响应式数据的变化,并执行相应的操作。例如:watch: { username(newVal, oldVal) { ... } }
。 -
props
:父组件向子组件传递数据时使用的属性。例如:props: ['message']
。
在创建Vue实例时,必不可少的一个选项就是el。el表示唯一根标签,用于指定一个页面中已存在的DOM元素来挂载Vue实例,即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string,也可以是HTMLElement。
使用el 绑定DOM元素 :
<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"Vue实例绑定div成功!",
},
})
</script>
data对象(Object)的形式:
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
data: {
content: "Mustache表达式通过data为对象获取content的值"
}
})
</script>
函数(Function)的形式:
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
// 这是下面function的简写形式
data(){
return {
name:'张三',
age:18
}
},
// 另一种写法
// data:function() {
// return {
// name: '张三',
// age: 18,
// sex: '男'
// }
// },
})
</script>
methods方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
1、第一步 引入vue.js
<script src="../js/vue.js"></script>
</head>
<body>
2、第二步
<div id="app">
<div>
{{msg}}
<p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
<!-- v-on 可以简写为 @ -->
<button v-on:click="btnClick">点击</button>
<!-- 简写形式 -->
<!-- <button @click="btnClick">点击</button> -->
</div>
</div>
<script>
3、第三步
var app = new Vue({
el: "#app",
data: {
msg: "旧文本"
},
// 页面的点击事件都需要放到 methods 里面
methods:{
btnClick(){
this.msg="新文本"
}
}
})
</script>
</body>
</html>
2.1 常用指令
v-bind
或简写为 ":"
:用于动态绑定属性。可以将Vue实例的数据绑定到HTML元素的属性上。例如:<img :src="imageUrl">
。
<img :src="imageUrl">
<div :class="{ active: isActive }"></div>
<a :href="url" :title="tooltip">{{ text }}</a>
v-model
:用于在表单元素和Vue实例的数据之间实现双向绑定。例如:<input v-model="message">
。
<input v-model="message">
<textarea v-model="text"></textarea>
<select v-model="selectedOption">
<option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>
v-if
:根据表达式的值来条件性地渲染元素。当表达式为真时,元素会被渲染,否则不会被渲染。例如:<div v-if="showMessage">Hello World</div>
。
<div v-if="showMessage">Hello World</div>
<template v-if="isLoading">
<div>Loading...</div>
</template>
v-for
:用于遍历数组或对象,并渲染对应的元素列表。例如:<li v-for="item in items">{{ item }}</li>
。
<ul>
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
</ul>
<table>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
</tr>
</table>
v-on
或简写为 @
:用于监听DOM事件,并执行相应的方法。例如:<button @click="handleClick">Click me</button>
。
<button @click="handleClick">Click me</button>
<input @keydown.enter="submitForm">
<form @submit.prevent="handleSubmit">
<!-- form fields go here -->
</form>
v-text
或简写为 {{}}
:用于输出文本内容,替代元素的 textContent
。例如:<span v-text="message"></span>
。
<span v-text="message"></span>
<p>{{ message }}</p>
v-html
:用于输出HTML代码,替代元素的 innerHTML
。请谨慎使用,因为存在安全风险。例如:<div v-html="htmlContent"></div>
。
<div v-html="htmlContent"></div>
v-show
:根据表达式的值来切换元素的显示和隐藏。与 v-if
不同,v-show
仅仅通过修改 display
CSS属性来控制元素的显示和隐藏。例如:<div v-show="isVisible">Visible content</div>
。
<div v-show="isVisible">Visible content</div>
<div v-show="isEditable">
<input type="text" v-model="name">
<button @click="saveChanges">Save</button>
</div>
三、Vue项目化
3.1 脚手架的安装
首先,确保你已经安装了Node.js和npm。你可以在终端或命令提示符中运行以下命令来验证它们的安装:
概述:npm(Node.js Package Manager)是一个Node.js的包管理工具,用来解决Node.js代码部署问题,只要电脑成功安装了node,npm也会自动安装在电脑上。
可以使用命令行查看npm是否安装成功
node -v
npm -v
如果没有安装Node,可以去官网下载,如果没有VScode也可以去官网下载
使用npm全局安装Vue CLI。在终端或命令提示符中运行以下命令:--/在@vue/cli后面加上@+版本号/-- 可以控制安装的Node版本
npm install -g @vue/cli
安装完成后,你可以通过以下命令检查Vue CLI的版本:
vue -V
现在,你已成功安装了Vue CLI。接下来,你可以使用Vue CLI创建新的Vue项目。
创建一个新的Vue项目。在终端或命令提示符中导航到你想要创建项目的目录,并运行以下命令:
vue create <project-name>
<project-name>
是你希望你创建的项目指定的名称,可以根据你的需求进行修改。
在创建项目时,你将被提示选择一个预设配置。你可以选择默认配置,也可以手动选择所需的特性。选择之后,等待依赖包的安装过程。
安装完成后,进入项目目录:
cd <project-name>
启动开发服务器。运行以下命令以在本地开发服务器上运行Vue应用:
npm run serve
最后,控制台会跳出http://localhost:8080
(默认端口为8080)可以在浏览器查看你的Vue应用程序。再附上一张项目目录结构图:
四、组件的创建与使用
4.1了解为什么使用组件
1、方便重复使用
2、减少代码重复冗余
3、便于多人协同开发
4、有助于提高开发效率
5、提升整个项目的可维护性
使用组件可以提高代码的重用性、可维护性和可扩展性,同时也有助于团队协作和开发效率。在构建复杂的应用程序时,使用组件是一个很好的实践,为了将复杂的用户界面拆分成可重用、可维护和独立的部分。这样可以提高开发效率和代码的可维护性,同时也有助于团队协作。
4.2 定义组件:
在Vue.js中,组件可以通过Vue.component()方法或Vue.extend()方法来定义。你可以选择使用全局注册或局部注册的方式。
全局注册示例:
// 全局注册一个名为'custom-component'的组件
Vue.component('custom-component', {
// 组件的选项和配置
template: '<div>这是一个自定义组件</div>',
// ...
});
局部注册示例:
// 在Vue实例的components选项中局部注册一个名为'custom-component'的组件
var app = new Vue({
el: '#app',
components: {
'custom-component': {
template: '<div>这是一个自定义组件</div>',
// ...
}
}
});
4.2 使用组件:
一旦组件被注册,它可以在模板中作为自定义元素来使用。你只需在模板中使用组件的标签,并将其当作普通的HTML元素使用。
<div id="app">
<custom-component></custom-component>
</div>
4.3 父传子组件通信:
Props(属性): 父组件可以通过props属性将数据传递给子组件。在父组件中,你可以在子组件的标签上使用属性来传递数据。在子组件中,你可以通过props接收和使用这些数据。
在父组件中:
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello child component!'
};
},
components: {
ChildComponent
}
}
</script>
在子组件中:
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
在上面的代码中,父组件通过props属性将parentMessage
传递给子组件,子组件通过props接收并在模板中使用message
。
4.4 子传父组件通信:
emit事件:子组件可以通过emit方法触发自定义事件,并传递数据给父组件。在父组件中,你可以监听这些自定义事件,并在事件处理程序中接收和使用数据。
在父组件中:
<template>
<div>
<ChildComponent @customEvent="handleCustomEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
methods: {
handleCustomEvent(data) {
console.log(data);
}
},
components: {
ChildComponent
}
}
</script>
在子组件中:
<template>
<div>
<button @click="emitCustomEvent">Click me!</button>
</div>
</template>
<script>
export default {
methods: {
emitCustomEvent() {
this.$emit('customEvent', 'Hello parent component!');
}
}
}
</script>
在上面的代码中,子组件通过$emit方法触发了名为customEvent
的自定义事件,并传递了数据给父组件。父组件通过监听该事件,在事件处理程序中接收并使用数据。