本文介绍了Vue.js的基本语法，包括HelloWorld示例、内容渲染、属性绑定、JavaScript表达式、事件处理以及列表渲染（v-for）。同时涵盖了Vue脚手架（如vue-cli）的配置和使用，以及组件化设计和前后端链接，还提及了如何处理跨域问题和网络请求。
VUE入门
官网： https://cn.vuejs.org/guide/introduction.html
1.VUE基础语法
1.1 经典开局Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域 -->
<div id="app">
{{message}}
</div>
</body>
<!-- 3.创建vue的实例对象 -->
<script>
const { createApp, ref } = Vue
createApp({
//指定数据源，即MVVM中的Model
setup() {
const message = ref('Hello World!')
return {
message
}
}
}).mount('#app')
</script>
</html>
1.2 内容渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域 -->
<div id="app">
<!-- {{message}} -->
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
<p>{{desc}}</p>
<p v-html="desc"></p>
</div>
</body>
<!-- 3.创建vue的实例对象 -->
<script>
const { createApp } = Vue
createApp({
//指定数据源，即MVVM中的Model
setup() {
// const message = ref('Hello World!')
return {
message:'Hello World',
username:'zhangsam',
gender:'男',
desc:'<a href="https://www.bilibili.com/video/BV1nV4y1s7ZN?p=8&vd_source=f6896496bc01698c8dcd7ea5534bae61">baidu</a>'
}
}
}).mount('#app')
</script>
</html>
1.3 属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域 -->
<div id="app">
<!-- {{message}} -->
<a :href="link">bilibili</a>
<input type="text" :placeholder="message">
</div>
</body>
<!-- 3.创建vue的实例对象 -->
<script>
const { createApp } = Vue
createApp({
//指定数据源，即MVVM中的Model
setup() {
// const message = ref('Hello World!')
return {
link:'https://www.bilibili.com',
message:'Hello World',
username:'zhangsam',
}
}
}).mount('#app')
</script>
</html>
1.4使用Javascript表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域 -->
<div id="app">
<!-- {{message}} -->
<p>{{number + 1}}</p>
<p>{{ok ? 'True' : 'False' }}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user. name}}</p>
</div>
</body>
<!-- 3.创建vue的实例对象 -->
<script>
const { createApp } = Vue
createApp({
//指定数据源，即MVVM中的Model
setup() {
// const message = ref('Hello World!')
return {
number: 9,
ok: false,
message:'ABC',
id: 3,
user: {
name:' zs' ,
}
}
}
}).mount('#app')
</script>
</html>
1.5 绑定事件
这个博主说得非常详细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<div id="app">
<h2>{{counter}}</h2>
<button @click="counter++">+1</button>
</div>
<script>
// 1.创建app
const app = Vue.createApp({
data: function() {
return {
counter: 0,
event : 'click' // event的值取决于动态事件的事件类型
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
点击次数：{{count}}
<button @click="count++">单机+1</button>
<button @click="say1">单机说hello</button>
<button @click="say2('我是携带参数')">携带参数的</button>
<button v-on:click="addCount">单机+1</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
count:0,
msg:'Hello'
},
methods:{
say1:function (){
alert(this.msg)
},
say2:function (val) {
alert(val)
},
addCount:function(){
this.count += 1
}
}
})
</script>
</body>
</html>
1.6 列表渲染
1.6.1v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,i) in userList">索引是：{{i}},姓名是：{{user.name}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
userList:[
{id:1,name:'zhangsan'},
{id:2,name:'zhang'},
{id:3,name:'san'},
]
}
})
</script>
</body>
</html>
1.6.2 v-for中的key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="addNewUser">add</button>
</div>
<ul>
<li v-for="(user,index) in userList" :key="user.id">
<input type="checkbox"/>
姓名是：{{user.name}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
userList:[
{id:1,name:'zhangsan'},
{id:2,name:'zhang'},
{id:3,name:'san'},
],
//输入的用户名
name:'',
nextId:4
},
methods:{
addNewUser:function (){
this.userList.unshift({id:this.nextId,name:this.name})
this.name=''
this.nextId++
}
}
})
</script>
</body>
</html>
1.7 条件渲染
参考：这个博主
这个博主写的很详细，不复述了
2.vue脚手架
我自己学习vue时，用的是vue自带的脚手架vue-cli， Naive Ui Admin是第三方的，学习的时候可以先不看
2.1 Naive Ui Admin
入门参考：这个博主写得很好，不重复了
Naive Ui Admin 是基于 vue3,vite2,TypeScript，搭配使用 Naive Ui 组件库形成一套开箱即用的中后台前端解决方案，Naive Ui Admin 遵守 Naive Ui 组件设计和开发约定，风格统一，全面的组件和便捷的工具
目录说明：
.
├── build # 打包脚本相关
│ ├── config # 配置文件
│ ├── generate # 生成器
│ ├── script # 脚本
│ └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│ ├── api # 接口文件
│ ├── assets # 资源文件
│ │ ├── icons # icon sprite 图标文件夹
│ │ ├── images # 项目存放图片的文件夹
│ │ └── svg # 项目存放svg图片的文件夹
│ ├── components # 公共组件
│ ├── design # 样式文件
│ ├── directives # 指令
│ ├── enums # 枚举/常量
│ ├── hooks # hook
│ │ ├── component # 组件相关hook
│ │ ├── core # 基础hook
│ │ ├── event # 事件相关hook
│ │ ├── setting # 配置相关hook
│ │ └── web # web相关hook
│ ├── layouts # 布局文件
│ │ ├── default # 默认布局
│ │ ├── iframe # iframe布局
│ │ └── page # 页面布局
│ ├── locales # 多语言
│ ├── logics # 逻辑
│ ├── main.ts # 主入口
│ ├── router # 路由配置
│ ├── settings # 项目配置
│ │ ├── componentSetting.ts # 组件配置
│ │ ├── designSetting.ts # 样式配置
│ │ ├── encryptionSetting.ts # 加密配置
│ │ ├── localeSetting.ts # 多语言配置
│ │ ├── projectSetting.ts # 项目配置
│ │ └── siteSetting.ts # 站点配置
│ ├── store # 数据仓库
│ ├── utils # 工具类
│ └── views # 页面
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
2.2 vue-cli
入门参考：这个博主
2.2.1 配置环境
先配置环境：nodejs、npm（如何配置不再复述）
准备vue-cli:npm install -g vue-cli
检查是否安装好：vue -V
2.2.2 创建项目
① 命令行cd跳转到想建项目的文件夹下
② vue init webpack firstApp
③ 选择修改选项
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写
- Project description:项目描述，默认为A Vue.js project,直接回车，可不用编写。
- Author：作者，如果你有配置git的作者，他会读取。
- Install vue-router? 是否安装vue的路由插件，需要安装选择Y
- Use ESLint to lint your code?是否用ESLint来限制你的代码错误和风格。不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，学习时不需要输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，学习时不需要，所以输入n
然后就可以去文件夹下看创建好的文件了
2.2.3 组件化设计
①在components下新建一个vue文件
②随便写点啥
<template>
<div>
<h1>Here is a child component!</h1>
<button>123</button>
</div>
</template>
<script>
</script>
<style>
</style>
③ 在需要引用的页面进行引用、注册、使用
2.2.4 前后端链接
参考：b站
代码：验证码：1024
使用axios做网络请求
安装axios：npm install axios
后端代码：
①改端口，默认是8080，但是前端也是8080，会打架
② 跨域问题
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
