- 首页 > 生活百科 > >
前置内容：
目录
- vue" rel="external nofollow noreferrer">1、VUE
- 1.1 概述
- 1.2 快速入门
- vue指令" rel="external nofollow noreferrer">1.3 Vue指令
- 1.3.1 v-bind & v-model 指令
- 1.3.2 v-on 指令
- 1.3.3 条件判断指令
- 1.3.4 v-for 指令
- 1.4 生命周期
- 1.5 案例
- 1.5.1 需求
- 1.5.2 查询所有功能
- 1.5.3 添加功能
- 2、Element
- 2.1 快速入门
- 2.2 Element 布局
- 2.2.1 Layout 局部
- 2.2.2 Container 布局容器
- 2.3 案例
1、VUE1.1 概述
- VUE：一套前端框架，免除原生JavaScript中的DOM操作，简化书写 。
- VUE简化原生JavaScript中的DOM操作示例
- JavaScript的DOM操作示例
// 获取表单数据let brandName = document.getElementById("brandName").value;let companyName = document.getElementById("companyName").value;//设置数据formData.brandName = brandName;formData.companyName = companyName; - 使用VUE
基于MVVM(Model-View-ViewModel)思想 ， 实现数据的双向绑定，将编程的关注点放在数据上 。
- 反观 MVC 模式以对比 MVVM
- MVC
View（视图）<== Controller（控制器） <==> Model（模型）
只能实现模型到视图的单向展示 ， 模型和视图无绑定，当模型变化时，必须手动写Dom进行展示
- C：Controller，控制器，即 JS 代码部分
- M：Model，数据模型 ， JavaScriptObjects，如下示例代码块
brand
- V：View，视图，页面标签，如下示例代码块的
tableData
for (let i = 0; i < brands.length; i++) {let brand = brands[i];// 对表格数据进行拼接tableData += "<tr align=\"center\">\n" +"<td>" + (i + 1) + "</td>\n" +"<td>" + brand.brandName + "</td>\n" +"<td>" + brand.companyName + "</td>\n" +"<td>" + brand.ordered + "</td>\n" +"<td>" + brand.destination + "</td>\n" +"<td>" + brand.status + "</td>\n" +"\n" +"<td><a href=https://www.huyubaike.com/"#\">修改</a> <a href=https://www.huyubaike.com/"#\">删除</a></td>\n" +"</tr>"}// 设置表格对象document.getElementById("brandTable").innerHTML = tableData;
- MVVM
文章插图
- M：Model，数据模型，JavaScriptObjects
- V：View，视图，页面标签
- VM：ViewModel，包括 Dom Listeners 和 Dtat Bindings ， 由VUE提供，实现数据的双向绑定，视图和模型任意一者发生改变，另一者随之改变
- 双向绑定效果展示
<div id="app"><!-- 使用模型关联插值表达式和输入框，二者会共同发生变化 --> <!-- 输入框绑定模型username --><input name="username" v-model="username"><!-- 插值表达式展示模型username的值 -->{{username}}</div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script> // 脚本new Vue({el:"#app",data(){return {username:""}}});</script>
1.2 快速入门
- 示例
- 新建HTML页面 ， 引入Vue.js文件
<script src="https://www.huyubaike.com/biancheng/js/vue.js"></script> - 在JS代码区域创建Vue核心对象，进行数据绑定
new Vue({// el属性：即Element，确定vue控制的区域，写入为一个选择器，使用标签idel: "#app",// data属性：数据的简化书写格式，返回一个模型数据data() {// data() 是 ECMAScript 6 版本的新的写法return {// 定义了username的模型数据 ， 初始化为空串username: ""}}/*data: function () {return {username:""}}*/// methods属性：用来定义函数，暂时未使用到}); - 编写视图
<div id="app"><!-- 使用模型关联插值表达式和输入框 ， 二者会共同发生变化 --> <!-- 输入框绑定模型username --><input name="username" v-model="username"><!-- 插值表达式展示模型username的值 -->{{username}}</div>
1.3 Vue指令
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义 。例如：v-if，v-for…
推荐阅读
-
请问1975年出生属兔人到底是水命还是木命，五行属到底是属水还是木呢？
-
-
-
-
-
-
潼南区小学招生政策 2023重庆潼南区小学报名网站
-
-
-
-
-
-
-
新生儿奶粉排行榜前十位,新生儿奶粉排行榜前十位国内
-
-
超市里的龙利鱼为什么那么便宜 龙利鱼为什么那么便宜
-
甜瓜几月份种植，什么时候成熟上市 甜瓜什么季节上市
-
2021年最旺财的微信头像，本人属水，缺木，火旺，做学科补习行业。 微
-
-
