
VUE和ElementUI基础入门
发布日期:2022-02-10 11:36:56
浏览次数:22
分类:技术文章
本文共 3279 字,大约阅读时间需要 10 分钟。
VUE快速入门
-
.下载和引入 vue.js 文件。
-
编写入门程序。
-
视图:负责页面渲染,主要由 HTML+CSS 构成。
-
脚本:负责业务数据模型(Model)以及数据的处理逻辑
-
举个例子
Document { {msg}} -
Vue 核心对象:每一个 Vue 程序都是从一个 Vue 核心对象开始的
-
vue中的获取元素:
this.$refs["xxx"]
-
选项列表
- el 选项:用于接收获取到页面中的元素。
- data 选项:用于保存当前 Vue 对象中的数据。
- methods 选项:用于定义方法。
-
数据绑定
-
在视图部分获取脚本部分的数据。
{
{变量名}}
-
-
相关指令
-
带有v-前缀的特殊属性,不同指令具有不同的意义
-
使用指令时,通常编写在标签的属性上,值可以使用js表达式
-
常用指令
指令 作用 v-html 把文本解析为HTML代码,可以解析标签 v-bind 为html标签绑定属性 v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染 v-else 同上 v-else-if 同上 v-show 根据条件展示某元素,区别在于切换的是display属性的值 v-for 列表渲染,遍历容器的元素或者对象的属性 v-on 为html绑定事件 v-model 在表单元素上创建双向绑定 -
v-model表单绑定
- v-model:在表单元素上创建双向数据绑定。
-
双向数据绑定
- 更新 data 数据,页面中的数据也会更新。
- 更新页面数据,data 数据也会更新
-
MVVM模型(Model View ViewModel):是 MVC 模式的改进版
- 在前端页面中,JS 对象表示 Model,页面表示 View,两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel,它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来,还负责把 View 修改的数据同步回 Model。
- 在前端页面中,JS 对象表示 Model,页面表示 View,两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel,它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来,还负责把 View 修改的数据同步回 Model。
-
基本指令例子
Document
Element 基本使用
介绍
- Element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库.
- 使用 Element 前提必须要有 Vue。
- Element 官网:
使用步骤
- 下载 Element 核心库。
- 引入 Element 样式文件。
- 引入 Vue 核心 js 文件。
- 引入 Element 核心 js 文件。
- 借助常用组件编写网页。
- CV大法
拷贝data时需注意data函数中return语句返回的对象
方法直接拷贝methods 注意prop属性值的来源 表格中 1. 指定表格对象data,他指定一个数组 2. 它里面的prop属性指定每一个行的属性名
Document 主要按钮 危险链接 属性方式: 默认不区分颜色 区分颜色
自定义组件
定义格式
Vue.component(组件名称, {
props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 })
举个例子
自定义组件 我的按钮
VUE生命周期
生命周期:核心八个阶段
beforeCreate:创建前 created:创建后 beforeMount:载入前 mounted:载入后 beforeUpdate:更新前 updated:更新后 beforeDestroy:销毁前 destroyed:销毁后
VUE异步操作
- 在VUE中发送异步请求,本质上还是AJAX,我们可以使用 axios 这个插件来简化操作!
- 使用步骤
- 引入 axios 核心 js 文件。
- 调用 axios 对象的方法来发起异步请求。
- 调用 axios 对象的方法来处理响应的数据。
- 常用方法
get(请求的资源路径与请求的参数) 发起GET方式请求
post(请求的资源路径,请求的参数) 发起POST方式请求 then(response) 请求成功后的回调函数,通过response获取响应的数据 catch(error) 请求失败后的回调函数,通过error获取错误信息
- 举个例子
异步操作 { { name}}
转载地址:https://blog.csdn.net/drug1910951117/article/details/107120240 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
初次前来,多多关照!
[***.217.46.12]2023年05月12日 18时14分02秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
最新文章
互联网程序员行话(黑话)--------哈哈
2019-12-06 04:20:25
树状数组(2)-为了以后准备用
2019-12-06 04:20:25
树状数组(1)-为了以后准备用
2019-12-06 04:20:25
树状数组题
2019-12-06 04:20:25
蓝桥杯-迷宫
2019-12-06 04:20:25
素数+快速幂
2019-12-06 04:20:23
HDU 2446 Shell Pyramid(二分查找 )
2019-12-06 04:20:24
Cup-hd2289·
2022-02-08
hd2298
2022-02-08
计祘客-八皇后问题-https://nanti.jisuanke.com/t/381
2022-02-08
==和equals的区别和联系
2022-02-08
Win10自带录屏如何实现录制系统声音
2022-02-08
java 自定义比较器
2022-02-08
三值排序
2022-02-08
纪念品分组
2022-02-08
学习 > Windows10下Ubuntu双系统安装记录
2022-02-08
vb 连接数据库
2022-02-08
学习 > 论文查询和投稿便利性网站(人工智能软件方向)
2022-02-08
字符串删除
2022-02-08