摘要:
在学习Vue的过程中,很多时候都需要用到模板字符串,但是里面的html标签一个字符一个字符的去敲未免也太麻烦了吧,其实我们可以通过设置来实现在模板字符串中按Tab键快速补全html标签。 1.在VSCode中打开设置(或者使用快捷键ctrl+)>文本编辑器(也可以直接搜索setting.json)> 阅读全文
摘要:
1.购物车案例 需求分析: 1.按照组件化方式实现业务需求 根据业务功能进行组件化划分 ① 标题组件(展示文本) ② 列表组件(列表展示、商品数量变更、商品删除) ③ 结算组件(计算商品总额) 实现步骤: 1.功能实现步骤 实现整体布局和样式效果 划分独立的功能组件 组合所有的子组件形成整体结构 逐 阅读全文
摘要:
1.组件插槽 组件插槽的作用 父组件向子组件传递内容 组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力 1.1组件插槽基本用法 1.插槽位置 2.插槽内容 1.2匿名插槽 <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slo 阅读全文
摘要:
1.Vue组件之间传值 1.1父组件向子组件传值 1.组件内部通过props接收传递过来的值 2.父组件通过属性将值传递给子组件 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制 阅读全文
摘要:
3.Vue 调试工具 ① 克隆仓库 下载地址:https://cn.vuejs.org/ 下载完成后解压,到该目录下 ② 安装依赖包 1.npm install webpack webpack-cli -g 2.npm install ③ 构建 npm run build ④ 打开Chrome扩展页 阅读全文
摘要:
1.组件注册 1.1 全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个选项对象 全局组件注册后,任何vue实例都可以用 组件基础使用 <body> <div id="app"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 -- 阅读全文
摘要:
1.组件化开发思想 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代 1.1 现实中的组件化思想体现 标准 、分治 、重用 、组合 1.2 编程中的组件化思想体现 1.3 组件化规范: Web Components 我们希望尽可能多的重用 阅读全文
摘要:
图书列表案例 静态列表效果 基于数据实现模板效果 处理每行的操作按钮 1、 提供的静态数据 数据存放在vue 中 data 属性中 var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: '' },{ i 阅读全文
摘要:
数组变异方法 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 push()往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元 阅读全文
摘要:
1.过滤器 1.1过滤器的作用是什么? 格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等 1.2自定义过滤器 1.3过滤器的使用 1.4局部过滤器 1.5带参数的过滤器 1.6过滤器的使用 Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。 过滤器可以用在两个地方:双 阅读全文