Web前端--Vue、Vue_Cli、ElementUI
Web前端--Vue、Vue_Cli、ElementUI
基本概念
- Vue (读音 /vjuː/，类似于 view) 是一个前端框架, 易于构建用户界面
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合
- 支持和其它类库结合使用
- 开发复杂的单页应用非常方便
- Vue 是 Vue.js 的简称
- 官网: https://cn.vuejs.org/
- git地址: https://github.com/vuejs
运行原理
Vue-MVVM
-
M∶即 Model，模型，包括数据和一些基本操作
-
V∶即View，视图，页面渲染结果
-
VM∶即 View-Model，模型与视图间的双向操作(无需开发人员干涉)
-
优点
- 在 MVVM之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到View 中。
- 而后当用户操作视图，我们还需要通过 DOM获取 View 中的数据， 然后同步到Model 中。
- 而 MVVM中的VM 要做的事情就是把DOM 操作完全封装起来，开发人员不用再关心 Model 和View 之间是如何互相影响的
- 只要我们 Model 发生了改变，View上自然就会表现出来
- 当用户修改了View，Model 中的数据也会跟着改变
- 把开发人员从繁琐的 DOM操作中解放出来
- 把关注点放在如何操作 Model上, 大大提高开发效率
代码示例
快速入门
<div id="app">
<!--解读 1. {{message}} : 插值表达式
2. message 就是从 model 的 data 数据池来设置
3. 当我们的代码执行时，会到 data{} 数据池中去匹配数据, 如果匹配上, 就进行替换 , 如果没有匹配上, 就是输出空 -->
<h1>欢迎你{{message}}-{{name}}</h1>
</div>
<!--引入 vue.js-->
<script src="vue.js"></script>
<script>
//创建 Vue 对象
/
* 解读
* 1. 创建 Vue 对象实例
* 2. 我们在控制台输出 vm 对象，看看该对象的结构！(data/listeners)
/
let vm = new Vue({
el: "#app", //创建的 vue 实例挂载到 id=app 的 div
data: {
//data{} 表示数据池(model 的有了数据), 有很多数据 ,以 k-v 形式设置(根据业务 需要来设置)
message: "Hello-Vue!",
name: "你好" }
})
console.log("vm=>", vm);
console.log(vm._data.message);
console.log(vm._data.name);
console.log(vm.name);
console.log(vm.message);
</script>
快速入门细节
- 通过查看浏览器的控制台,可以分析Vue 数据绑定机制/MVVM
- 注意代码顺序，要求div在前，script 在后，否则无法绑定数据
- 从案例可以体会声明式渲染：Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM的系统， 做到数据和显示分离
- Vue 没有繁琐的 DOM操作，如果使用jQuery，我们需要先找到div节点，获取到DOM对象，然后进行节点操作,显然Vue更加简洁
功能使用
数据单项渲染
-
v-bind 指令可以完成基本数据渲染/绑定
-
v-bind 简写形式就是一个冒号（:）
-
插值表达式是用在标签体的
-
如果给标签属性绑定值，则使用v-bind指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>单向数据渲染</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!--老师解读
1. 使用插值表达式引用 data数据池数据是在标签体内
2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式
3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind
-->
<!--<img src="{{img_src}}">-->
<img v-bind:src="img_src" v-bind:width="img_width">
<img :src="img_src" :width="img_width">
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "hello, 耗子精",
img_src: "1.jpg",
img_width: "200px"
}
})
console.log("vm=>", vm);
</script>
</body>
</html>
双向数据渲染
- v-model 可以完成双向数据绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>双向数据渲染</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!--老韩解读
1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
2. v-model="hobby.val" 是数据的双向渲染,
(1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
-->
<input type="text" v-model="hobby.val"><br/><br/>
<input type="text" :value="hobby.val"><br/><br/>
<p>你输入的爱好是: {{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "hi, 输入你的爱好",
hobby: {
val: "购物"
}
}
})
console.log("vm=>", vm);
</script>
</body>
</html>
事件绑定
-
使用v-on进行事件处理，比如: v-on:click表示处理鼠标点击事件
-
事件调用的方法定义在vue对象声明的methods节点中
-
v-on:事件名 可以绑定指定事件
-
如果方法没有参数，可以省略()[需要浏览器支持]
-
v-on指令的简写形式@ [需要浏览器支持]
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<!--视图-->
<div id="app">
<h1>{{message}}</h1>
<!--老韩解读
1. v-on:click 表示我们要给button元素绑定一个click的事件
2. sayHi() 表示绑定的方法, 在方法池 methods{} 定义的
3. 底层仍然是dom处理
4. 如果方法不需要传递参数，可以省略()
5. v-on:click可以简写@, 但是需要浏览器支持
-->
<button v-on:click="sayHi()">点击输出</button>
<button v-on:click="sayOk()">点击输出</button>
<button v-on:click="sayHi">点击输出</button>
<button @click="sayOk">点击输出</button>
</div>
<!--引入我们的vue.js-->
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
//老师说明:这里创建的Vue实例, 你可以不去接收, 也可以接收
//方便我们调试信息
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "Vue事件处理的案例",
name: "韩顺平教育"
},
//老师解读:
// 1. 是一个methods属性, 对应的值是对象{}
// 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池
// 3. 这里需要小伙伴有js的基础=>java web第4章
methods: {
sayHi() {
console.log("hi, 银角大王~");
},
sayOk() {
console.log("ok, 金角大王~");
}
}
})
</script>
</body>
</html>
修饰符
-
修饰符 (Modifiers)是以(.)指明的后缀，指出某个指令以特殊方式绑定
-
例如 .prevent 修饰符告诉v-on指令对于触发的事件调用event.preventDefault() 即阻止事件原本的默认行为
-
事件修饰符
- .stop 阻止事件继续传播
- .prevent 阻止标签默认行为
- .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
- .self 只当在 event.target 是当前元素自身时触发处理函数
- .once 事件将只会触发一次
- .passive 告诉浏览器你不想阻止事件的默认行为
-
键盘事件的修饰符
- 项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符
- <input v-on:keyup.13="submit">
-
v-model的修饰符
- 比如: 自动过滤用户输入的首尾空格 <input v-model.trim="msg">
-
演示代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue修饰符使用</title>
</head>
<body>
<div id="app">
<!-- 老韩解读
1. 修饰符用于指出一个指令应该以特殊方式绑定。
2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为
3. 执行 程序员指定的方法
-->
<form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
妖怪名: <input type="text" v-model="monster.name"><br/><br/>
<button type="submit">注册</button>
</form>
<p>服务返回的数据是{{count}}</p>
<h1>修饰符扩展案例</h1>
<button v-on:click.once="onMySubmit">点击一次</button><br/>
<input type="text" v-on:keyup.enter="onMySubmit">
<input type="text" v-on:keyup.down="onMySubmit">
<input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {//数据池
monster: {//monster数据(对象)的属性, 可以动态生成
},
count: 0
},
methods: {//方法池
onMySubmit() {
//console.log("我们自己的表单提交处理...");
//"", null, undefined都是false
if(this.monster.name) {
console.log("提交表单 name=", this.monster.name);
//这里，程序员就可以根据自己的业务发出ajax请求到后端
//得到数据后，在进行数据更新
this.count = 666;
} else {
console.log("请输入名字..");
}
}
}
})
</script>
</body>
</html>
条件渲染/控制
-
v-if / v-show
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染 v-if</title> </head> <body> <div id="app"> <!--这里小伙伴还可以看到checkbox的 checked属性的值--> <input type="checkbox" v-model="sel">是否同意条款[v-if实现] <!-- 老师解读 v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件 <h1> --> <h1 v-if="sel">你同意条款</h1> <h1 v-else>你不同意条款</h1> </div> <script src="vue.js"></script> <script> //为了调试方便, 使用vm接收Vue实例 let vm = new Vue({ el: '#app', data: {//data数据池 sel: false } }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染 v-show</title> </head> <body> <div id="app"> <!--这里小伙伴还可以看到checkbox的 checked属性的值--> <input type="checkbox" v-model="sel">是否同意条款[v-show实现] <h1 v-show="sel">你同意条款</h1> <h1 v-show="!sel">你不同意条款</h1> </div> <script src="vue.js"></script> <script> //为了调试方便, 使用vm接收Vue实例 let vm = new Vue({ el: '#app', data: {//data数据池 sel: false } }) </script> </body> </html> -
v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
-
v-show 机制相对简单, 不管初始条件是什么，元素总是会被渲染，并且只是对 CSS 进行切换
-
使用建议：如果要频繁地切换，建议使用 v-show ；如果运行时条件很少改变，使用 v-if 较好
列表渲染
-
v-for
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for 列表渲染</title> </head> <body> <div id="app"> <!-- 基本语法: <li v-for="变量 in 数字">{{ 变量 }}</li>--> <h1>简单的列表渲染</h1> <ul> <li v-for="i in 3">{{i}}</li> </ul> <!-- 基本语法: <li v-for="(变量, 索引) in 值">{{ 变量 }} - {{ 索引 }}</li> --> <h1>简单的列表渲染-带索引</h1> <ul> <li v-for="(i,index) in 3">{{i}}-{{index}}</li> </ul> <h1>遍历数据列表</h1> <!-- 语法: <tr v-for="对象 in 对象数组"> <td>{{对象的属性}}</td> </tr> --> <table width="400px" border="1px"> <tr v-for="(monster,index) in monsters"> <td>{{index}}</td> <td>{{monster.id}}</td> <td>{{monster.name}}</td> <td>{{monster.age}}</td> </tr> </table> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { //数据池 monsters: [ {id: 1, name: '牛魔王', age: 800}, {id: 2, name: '黑山老妖', age: 900}, {id: 3, name: '红孩儿', age: 200} ] } }) </script> </body> </html>
组件化
在大型应用开发的时候，页面可以划分成很多部分，往往不同的页面，也会有相同的部 分。例如可能会有相同的头部导航
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不 同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发
-
组件(Component) 是 Vue.js 最强大的功能之一(可以提高复用性[1.界面2.业务处理])
-
组件也是一个Vue实例，也包括∶ data、methods、生命周期函数等
-
组件渲染需要 html模板，所以增加了template 属性，值就是 HTML 模板
-
对于全局组件，任何vue 实例都可以直接在 HTML 中通过组件名称来使用组件
-
data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象/数据
生命周期与钩子函数
-
Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载 DOM、渲染-更新-渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期
-
钩子函数(监听函数): Vue 实例在完整的生命周期过程中(比如设置数据监听、编译模板、将实例挂载到 DOM 、在数据变化时更新 DOM 等), 也会运行叫做生命周期钩子的函数
-
钩子函数的作用就是在某个阶段, 给程序员一个做某些处理的机会
Vue实例生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
-
newVue()：
new了一个Vue的实例对象，此时就会进入组件的创建过程。
-
InitEvents&Lifecycle：
初始化组件的事件和生命周期函数
-
beforeCreate:
组件创建之后遇到的第一个生命周期函数，这个阶段data和methods以及dom结构都未被初始化，也就是获取不到data的值，不能调用methods中的函数
-
nitinjections&reactivity
这个阶段中,正在初始化data和methods中的方法
-
created
这个阶段组件的data和methods中的方法已初始化结束，可以访问，但是dom结构未初始化，页面未渲染
老师说明：在这个阶段，经常会发起Ajax请求
-
编译模板结构(在内存)
-
beforeMount
当模板在内存中编译完成，此时内存中的模板结构还未渲染至页面上，看不到真实的数据
-
Createvm.$elandreplace‘el’withit
这一步，再在把内存中渲染好的模板结构替换至真实的dom结构也就是页面上
-
mounted
此时，页面渲染好，用户看到的是真实的页面数据生命周期创建阶段完毕，进入到了运行中的阶段
-
生命周期运行中
-
beforeUpdate
当执行此函数，数据池的数据新的，但是页面是旧的 -
VirtualDOMre-renderandpatch
根据最新的data数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面上
-
updated
页面已经完成了更新，此时，data数据和页面的数据都是新的
-
beforeDestroy
当执行此函数时，组件即将被销毁，但是还没有真正开始销毁，此时组件的data、methods数据或方法还可被调用
-
Teardown……
注销组件和事件监听
-
destroyed
组件已经完成了销毁
生命周期与钩子函数代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这里可以视为用户看到的页面-对应前面讲解的页面dom-->
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞！</button>
<h2>{{name}}，有{{num}}次点赞</h2>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {//数据池
name: "kristina",
num: 0
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {//生命周期函数-创建vue实例前
console.log("=============beforeCreate==========");
console.log("数据模型/数据池的数据是否加载/使用?[no]", this.name, " ", this.num);
//console.log("自定义方法是否加载/使用?[no]", this.show());
console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText);
},
created() {//生命周期函数-创建vue实例
console.log("=============created==========");
console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
console.log("自定义方法是否加载/使用?[yes]", this.show());
console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText);
//可以发出Ajax
//接收返回的数据
//再次去更新data数据池的数据
//编译内存模板结构
//.....
},
beforeMount() {//生命周期函数-挂载前
console.log("=============beforeMount==========");
console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
console.log("自定义方法是否加载/使用?[yes]", this.show());
console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
console.log("用户页面dom是否被渲染?[no]", document.getElementById("num").innerText);
},
mounted() {//生命周期函数-挂载后
console.log("=============mounted==========");
console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
console.log("自定义方法是否加载/使用?[yes]", this.show());
console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
console.log("用户页面dom是否被渲染?[yes]", document.getElementById("num").innerText);
},
beforeUpdate() {//生命周期函数-数据池数据更新前
console.log("=============beforeUpdate==========");
console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
console.log("自定义方法是否加载/使用?[yes]", this.show());
console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
console.log("用户页面dom数据是否被更新?[no]", document.getElementById("num").innerText);
//验证数据==>修正
// if(this.num < 10 ) {
// this.num = 8;
// }
},
updated() {//生命周期函数-数据池数据更新后
console.log("=============updated==========");
console.log("数据模型/数据池的数据是否加载/使用?[yes]", this.name, " ", this.num);
console.log("自定义方法是否加载/使用?[yes]", this.show());
console.log("用户页面dom是否加载/使用?[yes]", document.getElementById("num"));
console.log("用户页面dom数据是否被更新?[yes]", document.getElementById("num").innerText);
}
})
</script>
</body>
</html>
脚手架
为什么需要VueCli脚手架？开发效率低，不够规范，维护升级，可读性差
Vue Cli文档地址:https://cli.vuejs.org/zh/
vue2脚手架安装
- node.js10.16.3（为了自带的npm-包管理工具）, 安装前先cmd 命令 node -v 检查是否有安装过其他版本，有的话记得删除
- 下载 node.js10.16.3 地址:https://nodejs.org/en/blog/release/v10.16.3/，安装
- 删除旧版本脚手架，不管是否安装过，先cmd运行 npm uninstall vue-cli -g
- 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org，这个类似中国的npm源，命令开头是cnpm
- 安装webpack和webpack-cli ,指令: npm install webpack@4.41.2 webpack-cli -D
- 安装 cnpm install -g @vue/cli@4.0.3，安装后可以确认Vue-Cli版本：vue -V
- 创建目录vue_project, 并cmd到该目录，使用webpack创建vue脚手架项目：vue init webpack vue_project_quickstart(这个是自定义项目名称)
- 开始建立脚手架项目新手默认：回车、回车、回车、Y、N、N、N、use NPM
- 打开创建的自定义项目名称文件夹，cmd 命令 npm run dev
- 打开浏览器 默认 http://localhost:8080
脚手架项目细节
vue2脚手架项目目录
vue2脚手架项目运行顺序
IDEA使用
打开项目目录，配置npm，Scipts ： dev ，即可正常运行
ElementUi使用
ElementUI官网: https://element.eleme.cn/#/zh-CN
ElementUI是组件库，网站快速成型工具（VUE2使用ElementUI，VUE3使用ElementPuls）
安装
-
安装element-ui组件库, cmd进入到项目，指令：npm i element-ui@2.12.0
-
你的项目目录\src\main.js
//引入 element-ui 库/样式，并使用 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; //使用插件 Vue.use(ElementUI); -
修改 你的项目\src\components\你的组件名.vue ， 引 入element-ui组件代码,从文档拷贝即可（https://element.eleme.cn/2.12/#/zh-CN/component/installation）,这里注意引入组件前建一个根Div元素
标签:
JavaScript语言
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码