vue2官方文档:安装 — Vue.js
1、安装
新建"vue"文件夹——>新建vue1.html
直接用<script>标签引入vue:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
tips:
CDN:一个网络加速的技术
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue学习</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</body>
</html>
此时就已经引入成功了
2、vue的变量渲染
使用双括号(胡子)语法,就实现了文本渲染。
我们在绑值语法里可以写字符串、数字、布尔、表达式。
字符串、数字、布尔示例:
</head>
<body>
<div id="app">
{{message}}
<div>
{{num++}}
<!-- `{{num++}}` 表示使用 `num` 的当前值,然后再将 `num` 值加一;
而 `{{++num}}` 表示先将 `num` 的值加一,然后再使用新的值。 -->
</div>
<div>
{{bool}}
</div>
<div>{{bool?'a':'b'}}</div>
<!--如果bool为true显示a,false显示b-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello',
num:1,
bool:true
}
})
</script>
</body>
显示结果:
数组示例:
1、查询数组里名叫张三的人的年龄
<body>
<div id="app">
<div> {{arr.find(v =>v.name ==='张三')?.age}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
arr:[{name:'张三',age:20}]
}
})
</script>
</body>
//如果把data中arr的数组里的元素清空,div里面那个语句也不会报错。此时整个值就会变成undefined。
v-html(模版)
有时候我们想渲染一个html
<body>
<div id="app">
<div v-html="htmlStr"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
htmlStr:'<stong style="color:red">vue学习</stong>'
}
})
</script>
</body>
v-model(双向绑定值)
<div id="app">
<div>
<input type="text" v-model="count">
<div>{{count}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
count:0
}
})
</script>
效果:
v-if(判断)
<body>
<div id="app">
<div>
<div v-if="color === '红色'">红色</div>
<div v-if="color === '蓝色'">蓝色</div>
<div v-else-if="color === '黑色'>黑色</div>
<!--这也是判断的语句之一-->
<div v-else>黑色</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
color:'红色'
}
})
</script>
</body>
结果显示红色
v-bind:动态绑定属性
<body>
<div id="app">
<div>
<a v-bind:href="url">搜索一下</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com'
}
})
</script>
</body>
v-bind简写是<a :href="url">搜索一下</a>
v-on:事件绑定
<body>
<div id="app">
<div style="width:100px;height:100px;background-color: red" v-on:click="clickDiv" id="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
},
methods:{
clickDiv(){
console.log('我点击了div')
}
}
})
</script>
</body>
如果你想点击方块让它切换颜色或者更多类似的操作
那么在methods方法里可以这样写:
methods:{
clickDiv(){
console.log('我点击了div')
//首先获取元素,这样的写法就是js原生的语法
let color=document.getElementById('div').style.backgroundColor
document.getElementById('div').style.backgroundColor=color ==='blue'?'red':'blue'
}
}
例2:
如果你想点击数字就改变颜色的话,你需要再添加一个点击事件。
<div id="app">
<div v-html="htmlStr" v-on:click="clickHtml"></div>
<div style="width:100px;height:100px;background-color: red" v-on:click="clickDiv" id="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
htmlStr: '<strong id="htmlId" style="color:red">222</strong>'
},
methods: {
clickHtml(event) {
if (event.target.id === 'htmlId') {
event.target.style.color = 'gold';
}
},
clickDiv() {
console.log('我点击了div');
let color = document.getElementById('div').style.backgroundColor;
document.getElementById('div').style.backgroundColor = color === 'blue' ? 'red' : 'blue';
}
}
});
</script>
v-on:click的简写:@click="clickDiv"
v-for:循环
假如说我想渲染n个数据,以下是标准语法示例:
<div id="app">
<div v-for="(item,index) in fruits" :key="index">{{index+','+item}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
fruits:['苹果','香蕉','梨子'],
},
});
</script>
如果你想左边显示成
那么index+1即可
<div id="app">
<div v-for="(item,index) in fruits" :key="index">{{(index+1)+','+item}}</div>
</div>
tips:
这个
v-for
循环会遍历fruits
数组中的每一个元素,并为每个元素生成一个div
元素。在循环中,item
代表当前遍历到的数组元素,index
则表示当前元素在数组中的索引。
item
是每次迭代中当前遍历到的数组元素,比如第一次迭代时是'苹果'
,第二次是'香蕉'
,以此类推。index
是每个元素在数组中的索引值,从0
开始。第一次迭代时index
是0
,第二次是1
,以此类推。
v-for="(item, index) in fruits"
中的(item, index)
是解构语法,用来从遍历的数组元素中提取当前元素和对应的索引值。在每个循环中,
{{ (index + 1) + ',' + item }}
是在div
中显示当前循环的索引加一和数组元素。因为索引是从0
开始,加一是为了显示人类习惯的从1
开始的索引。
示例2:遍历数组
动态class style
通过变量来绑定样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue学习</title>
<style>
/* 定义一个 CSS 类名为 active,用于设置文本颜色为红色 */
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 下拉菜单和菜单项的布局 -->
<div style="display:flex;margin-top:30px">
<!-- 下拉选择框 -->
<select v-model="currentMenu">
<option value="首页">首页</option>
<option value="教师">教师</option>
<option value="学生">学生</option>
</select>
<!-- 循环渲染菜单项 -->
<div style="padding:0 10px;"
<!-- 动态设置菜单项的字体大小 -->
:style="{ fontSize: item === currentMenu ? '20px' : '14px' }"
<!-- 根据条件动态添加或移除 active 类 -->
:class="{'active': item === currentMenu}"
v-for="item in menus" :key="item">{{ item }}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 定义菜单数组
menus: ['首页', '教师', '学生'],
// 当前选中的菜单项,默认为 "首页"
currentMenu: '首页'
},
});
</script>
</body>
</html>
运行结果:
vue脚手架搭建
Vue CLI官网文档地址:安装 | Vue CLI
在mac上安装Vue CLI:
vue create(hello-world为自定义的目录名)
vue create hello-world
step1、新建一个文件夹
终端进入该文件夹,然后输入命令:
然后就会在当前的目录下帮你创建一个vue的目录,这个目录就是vue脚手架的内容。
当你加载完成之后是这样的效果:
创建好了之后分别执行以下两个命令
cd vue
npm run serve
敲完之后就会开始运行这个项目了:
成功之后的界面:
复制Local的地址到浏览器中,这就是vue的一个初始界面:
这就是一个工程化的vue,有localhost这个IP,有8080这个独立的端口,这就叫工程化。
后面要学习SpringBoot,SpringBoot也是一个独立的工程,二者的区别是端口号不同,前端是8080,后端是9090.
然后用IDEA打开小白做毕设2024这个文件夹,左侧目录如下:
node_modules:是一个依赖库
public下的favicon.ico是一个小图标
public下的index.html:
index.html是工程打包之后页面的入口:
<!DOCTYPE html>
<!--声明 HTML 的文档类型,表示这是一个 HTML5 文档。-->
<html lang="">
<head>
<meta charset="utf-8">
<!-- 告诉 IE 浏览器使用最新的渲染模式。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对移动设备,设置视口的宽度和初始缩放比例。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--设置网页的图标,这里使用了一个模板变量 BASE_URL 来指向应用的根路径。-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--设置网页的标题,这里使用了一个插件提供的配置 htmlWebpackPlugin.options.title。-->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!--当浏览器不支持 JavaScript 或 JavaScript 被禁用时显示的内容-->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!--这是 Vue 应用挂载的根节点,Vue.js 应用将会被渲染到这个节点下。-->
<!--类似于 DOM 树的概念,根节点指的是整个文档树的顶层节点,即整个文档的最顶层节点。在 HTML 文档中,根节点通常是 <html> 元素。在一个 Vue.js 应用中,根节点通常是 Vue 实例挂载的节点,即应用的最顶层节点。-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
views文件夹:
页面加载时候第一个画面显示的就是HomeView.vue的画面。
App.vue
<template>
<!-- Vue 组件的模板部分 -->
<div id="app">
<!-- 页面的顶部导航栏 -->
<nav>
<!-- Vue Router 提供的路由链接,链接到不同的页面 -->
<router-link to="/">Home</router-link> | <!-- 链接到 Home 页面 -->
<router-link to="/about">About</router-link> <!-- 链接到 About 页面 -->
</nav>
<!-- 显示当前路由对应的组件内容 -->
<router-view/>
</div>
</template>
<style>
/* CSS 样式部分 */
#app {
/* 设置字体 */
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; /* 平滑字体 */
-moz-osx-font-smoothing: grayscale; /* 在 macOS 上抗锯齿 */
text-align: center; /* 文字居中 */
color: #2c2e50; /* 文字颜色 */
}
nav {
padding: 30px; /* 导航栏上下左右留白 */
}
nav a {
font-weight: bold; /* 设置链接文字为粗体 */
color: #2c3e50; /* 链接文字颜色 */
}
nav a.router-link-exact-active {
color: #42b983; /* 当前路由链接高亮时的颜色 */
}
</style>
<div id="app">
是一个 HTML 元素,它在这里作为 Vue 应用的挂载点。在 Vue.js 中,应用通常需要挂载到一个 HTML 元素上才能运行,而这个元素就是指定的挂载点。
router:路由
如果你想新增一个名为 Aaaa.vue
的组件,并希望通过路由的方式在应用中使用它,你需要做以下几步:
1. 创建 Aaaa.vue 组件
在 src/views
或者你的组件存放目录下创建一个 Aaaa.vue
组件文件,并编写组件的模板、脚本和样式。
2. 在路由配置中添加新路由
在 router/index.js
中,将新创建的 Aaaa.vue
组件与一个特定的 URL 路径进行关联。在 routes
数组中添加一个新的路由配置。
// 导入 Aaaa.vue 组件
import Aaaa from '@/views/Aaaa.vue';
// 在路由配置中添加新的路由
export default new Router({
routes: [
// 其他已有的路由配置
{
path: '/aaaa', // 定义路径
name: 'Aaaa', // 路由名称
component: Aaaa, // 新创建的 Aaaa.vue 组件
},
],
});
3. 在 App.vue 中使用新路由
在 App.vue
的模板部分,通过 <router-link>
标签创建一个链接,让用户可以访问新的路由。
<template>
<div id="app">
<nav>
<!-- 其他链接 -->
<router-link to="/aaaa">Aaaa</router-link> <!-- 新添加的链接 -->
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
// 其他配置
};
</script>
<style>
/* 样式 */
</style>
现在,当用户访问应用的 /aaaa
路径时,Vue Router 会加载和渲染 Aaaa.vue
组件到 <router-view>
中,同时你也可以通过 <router-link>
创建一个链接,让用户可以点击导航到新的路由路径。
图片里的Home|About是写在App.vue里的
协作关系
- Vue Router:Vue Router 负责根据路由配置加载和渲染特定的页面组件,比如将
HomeView.vue
渲染到App.vue
的<router-view>
中。 - App.vue 和 HomeView.vue:
App.vue
作为根组件包含整个应用的结构,而HomeView.vue
则代表着某个特定的页面,二者通过 Vue Router 配合实现了页面切换和渲染。
总体来说,index.html
作为整个 Vue 应用的初始入口,加载 Vue 应用的核心文件和基本结构;App.vue
是应用的根组件,负责整个应用的布局和基本结构;HomeView.vue
则是一个特定的页面组件,通过路由和 App.vue
协作,在应用中渲染展示特定的页面内容。三者相互协作,共同构成了一个完整的 Vue.js 应用。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
tips:
这个 `main.js` 文件是 Vue.js 应用的入口文件,它负责创建 Vue 实例、挂载根组件、设置全局配置等,是整个应用的主要控制中心。
刚刚就是在App.vue的文件里头部就引用了。
assets:以后会把所有静态的图片,css,js全部放在静态的文件里边
假如你新建了一个test.css,你想要全部引用,那么直接在main.js中写
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/test.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
components组件:
组件可以作为一个单独的引用
比如在homeView里我们引用了Hello World
组件可以被其他的页面通过import的方式引用
import HelloWorld from '@/components/HelloWorld.vue'
然后通过一个标签去渲染
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<HelloWorld>标签代表的就是components文件夹下HelloWorld里面的内容,把一个页面的内容浓缩到一个标签里展示出来了。
.gitignore
文件是一个用来告诉 Git 哪些文件或文件夹应该被忽略的配置文件。在一个 Git 仓库中,有时候我们希望某些文件或文件夹不被 Git 跟踪或版本控制,比如临时文件、依赖库、构建产物等,这时就可以通过 .gitignore
文件来指定要忽略的内容。
babel.config.js
是用来配置 Babel 的 JavaScript 编译工具的配置文件。Babel 是一个 JavaScript 编译器,可以将 ECMAScript 2015+ 版本的代码转换成向下兼容的 JavaScript 版本,使得你可以在当前的环境中运行更高版本的 JavaScript 代码。
这个配置文件的作用是定义 Babel 的转换规则、插件和预设等设置,让开发者可以根据项目需求和环境选择合适的转换规则。
一个简单的 babel.config.js
文件可能如下所示:
module.exports = {
presets: [
'@babel/preset-env', // 使用最新的 JavaScript 语法
'@babel/preset-react' // 支持 React 语法
],
plugins: [
'@babel/plugin-transform-runtime', // 使用 Babel 的运行时转换工具
'transform-vue-jsx' // 支持 Vue.js 的 JSX 语法
]
};
jsconfig.json
是用于配置 JavaScript 项目的文件,通常用于指定项目中 JavaScript 文件的编译选项、路径别名、语法支持等设置。
{
"compilerOptions": {
"target": "es5", // 设置编译后的 JavaScript 版本为 ES5,向下兼容性较好
"module": "esnext", // 指定模块系统为 ESNext(ECMAScript 下一版本)
"baseUrl": "./", // 设置基础路径为当前目录
"moduleResolution": "node", // 使用 Node.js 风格的模块解析方式
"paths": {
"@/*": [
"src/*" // 设置路径别名,@/* 指向 src/*,简化导入路径
]
},
"lib": [ // 指定所需的标准库
"esnext", // ECMAScript 下一版本
"dom", // DOM 和 DOM 扩展库
"dom.iterable", // 可迭代 DOM
"scripthost" // 宿主环境下的库
]
}
}
package.json
是 Node.js 项目中用来描述项目元数据和配置信息的文件。它包含了项目的名称、版本、依赖项、脚本命令等重要信息,是 Node.js 项目的核心配置文件之一。
{
"name": "vue", // 项目名称为 Vue
"version": "0.1.0", // 项目版本号为 0.1.0
"private": true, // 标记为私有项目,防止意外发布到公共仓库
"scripts": {
"serve": "vue-cli-service serve", // 启动开发服务器的脚本命令
"build": "vue-cli-service build" // 构建生产版本的脚本命令
},
"dependencies": { // 生产环境依赖的包
"core-js": "^3.8.3", // 核心 JavaScript 库的依赖
"vue": "^2.6.14", // Vue.js 框架的依赖,版本号为 2.6.14
"vue-router": "^3.5.1" // Vue 路由插件的依赖,版本号为 3.5.1
},
"devDependencies": { // 开发环境依赖的包
"@vue/cli-plugin-babel": "~5.0.0", // Vue CLI Babel 插件的开发环境依赖
"@vue/cli-plugin-router": "~5.0.0", // Vue CLI 路由插件的开发环境依赖
"@vue/cli-service": "~5.0.0", // Vue CLI 的服务插件的开发环境依赖
"vue-template-compiler": "^2.6.14" // Vue 模板编译器的开发环境依赖,版本号为 2.6.14
},
"browserslist": [ // 浏览器兼容性列表,指定支持的浏览器范围
"> 1%", // 支持全球超过 1% 的浏览器
"last 2 versions", // 支持每个浏览器的最后两个版本
"not dead" // 排除已经被废弃的浏览器
]
}
package-lock.json
是 npm 5 以上版本引入的一个文件,用于锁定当前安装的包的版本。它主要用于记录项目依赖的确切版本,确保在不同的开发环境中安装的依赖包版本一致,以保证项目的稳定性和可复现性。
README.md
vue.config.js
是 Vue CLI 项目的配置文件,用于配置构建工具和构建过程中的各种参数和选项。这个文件的存在让开发者可以更灵活地定制化配置 Vue 项目的构建行为。
// 引入 Vue CLI 的 defineConfig 方法
const { defineConfig } = require('@vue/cli-service')
// 导出配置对象,使用 defineConfig 方法定义配置
module.exports = defineConfig({
// transpileDependencies 选项告诉 Vue CLI 在构建过程中对所有依赖进行转译处理
// 设置为 true 表示将所有依赖项进行转译
transpileDependencies: true
})
示例:
如果我想把这个vue项目的地址8080改一下,则可以通过vue.config.js来改变
首先在代码里加上:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port:7000
}
})
然后点击运行
如果你想改变页面标签的名字也可以在这里修改
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port:7000
},
// 在 Vue CLI 的 chainWebpack 配置中,对 webpack 进行链式操作
chainWebpack: config => {
// 通过 config.plugin('html') 获取 HtmlWebpackPlugin 插件实例,并进行配置
config.plugin('html')
// 使用 tap 方法对 HtmlWebpackPlugin 的参数进行修改
.tap(args => {
// 将 args[0].title 修改为 '我爱前端'
args[0].title = '我爱前端';
return args; // 返回修改后的参数
});
}
})
然后重新编译一下: