摘要: 图书列表案例 静态列表效果 基于数据实现模板效果 处理每行的操作按钮 1、 提供的静态数据 数据存放在vue 中 data 属性中 var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: '' },{ i 阅读全文
posted @ 2020-11-30 15:10 행운의소녀 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 数组变异方法 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 push()往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元 阅读全文
posted @ 2020-11-30 14:57 행운의소녀 阅读(301) 评论(0) 推荐(0) 编辑
摘要: 1.过滤器 1.1过滤器的作用是什么? 格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等 1.2自定义过滤器 1.3过滤器的使用 1.4局部过滤器 1.5带参数的过滤器 1.6过滤器的使用 Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。 过滤器可以用在两个地方:双 阅读全文
posted @ 2020-11-30 14:52 행운의소녀 阅读(135) 评论(0) 推荐(0) 编辑
摘要: 1.计算属性 computed 1.1为何需要计算属性? 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 1.2.计算属性与方法的区别 计算属性是基于它们的依赖进行缓存的 方法不存在缓存 1.3.计算属性是基于它们的响应式依赖进行缓存的 1.4.computed比较适合 阅读全文
posted @ 2020-11-30 13:38 행운의소녀 阅读(105) 评论(0) 推荐(0) 编辑
摘要: 1.表单基本操作 1基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有v 阅读全文
posted @ 2020-11-30 13:33 행운의소녀 阅读(106) 评论(0) 推荐(0) 编辑
摘要: 案例:Tab选项卡 实现步骤: 实现静态UI效果 用传统的方式实现标签结构和样式 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 声明式编程 模板的结构和最终显示的效果基本一致 1.html结构 <div id="app"> <div class= 阅读全文
posted @ 2020-11-30 13:22 행운의소녀 阅读(127) 评论(0) 推荐(0) 编辑
摘要: 1.Vue模板语法 1.1 模板语法概述 1.如何理解前端渲染? 把数据填充到HTML标签中 2.前端渲染方式 原生js拼接字符串 使用前端模板引擎 使用vue特有的模板语法 3. 原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如下图所示。 缺点:不同开 阅读全文
posted @ 2020-11-30 13:15 행운의소녀 阅读(119) 评论(0) 推荐(0) 编辑
摘要: 1-Vue基本使用 1.1 传统开发模式对比 1.2 Vue.js之HelloWorld基本步骤 1.3 Vue.js之HelloWorld细节分析 1.实例参数分析 el: 元素的挂载位置(值可以是CSS选择器或者DOM元素) el: '#app' data:模型数据(值是一个对象) data: 阅读全文
posted @ 2020-11-30 12:58 행운의소녀 阅读(64) 评论(0) 推荐(0) 编辑
摘要: Vue概述 Vue:渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 官网:https://cn.vuejs.org/v2/guide/ 易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue​ 灵活:在一个库和一套完整框架之间自如伸缩​ 高 阅读全文
posted @ 2020-11-30 12:55 행운의소녀 阅读(76) 评论(0) 推荐(0) 编辑