
Vue学习
是行是行啊
这个作者很懒,什么都没留下…
展开
-
Vue学习笔记——前端工程化
Vue学习笔记——前端工程化目标:ES6 模块化的基本语法按需导入 与 按需导出这个时候 导入的名称不可以随意取,要与你导出的名字一致2. webpack (小demo)webpack的基本使用1. 创建列表隔行变色项目新建项目空白目录,并运行 npm init -y 命令,初始化 包管理配置文件 package.json新建 src 源代码目录新建 src -> index.html 首页初始化首页基本的结构运行 npm install jquery -s 命令,安装jQ原创 2020-09-27 21:52:51 · 165 阅读 · 0 评论 -
Vue学习笔记——前端路由
Vue学习笔记——路由1. 路由基本概念1. 后端路由根据不同的用户 URL 请求,返回不同的内容url 请求地址 与 服务器资源之间 的对应关系SPA2. 前端路由根据不同的用户事件,显示不同的页面内容用户事件 与 事件处理函数 之间的对应关系前端出现spa单应用程序3. SPA后端渲染(存在性能问题)=》Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前后退操作)=》SPA 单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地原创 2020-09-27 21:51:51 · 186 阅读 · 0 评论 -
Vue学习笔记——基于接口的图书管理案例
Vue学习笔记——基于接口的图书管理案例案例分析:图书相关的操作基于后台接口数据进行操作需要调用接口的功能点① 图书列表数据加载 GET② 添加图书 POST③ 验证图书名称是否存在 GET④ 编辑图书-根据id查询图书信息 GET⑤ 编辑图书-提交图书信息 PUT⑥ 删除图书 DELETE步骤:1. 图书列表数据加载需要调用后台接口,先引入axios.js,设置基础路径...原创 2020-07-14 20:50:07 · 577 阅读 · 0 评论 -
Vue学习笔记——前后端交互
Vue学习笔记——前后端交互目标:能够说出什么是前后端交互模式能够说出 Promise 的相关概念和用法能够使用 fetch 进行接口调用能够使用 axios 进行接口调用能够使用 async/await 方式调用接口能够基于后台接口实现案例fetch API:是标准化组织专门提供的一种新型的调用后台的接口,比Ajax的API要强大很多axios:第三方的库,专门用于事件接口的调用1. 前后端交互模式1.1 接口调用方式原生Ajax基于jQuery的ajaxfetch原创 2020-07-14 20:49:46 · 460 阅读 · 0 评论 -
Vue学习笔记——基于组件的购物车结算案例
Vue学习笔记——基于组件的购物车结算案例需求分析:按照组件化方式实现业务需求根据业务功能进行组件化划分① 标题组件(展示文本)② 列表组件(列表展示、商品数量变更、商品删除)③ 结算组件(计算商品总额)...原创 2020-07-14 20:49:19 · 523 阅读 · 0 评论 -
Vue学习笔记——基础语法之组件化开发
Vue学习笔记——基础语法之组件(Component)目标:能够知道组件化开发思想能够知道组件的注册方式能够说出组件间的数据交互方式 ▲能够说出组件插槽的用法能够说出Vue调试工具的用法能够基于组件的方式实现业务功能1. 组件化开发思想——自定义标签Web Components 通过创建 封装好功能的定制元素(自定义标签)解决问题组件可以扩展 HTML 元素,封装可重用的代码2. 组件注册2.1 全局注册语法:Vue.component( ‘组件名称’,{data原创 2020-07-07 11:27:22 · 227 阅读 · 0 评论 -
Vue学习笔记——图书管理案例
Vue学习笔记——图书管理案例效果:label for标签的作用:for 属性规定 label 与哪个表单元素绑定。作用是 在点击label 时 会自动将焦点移动到绑定的 元素上JavaScript Array.some() 方法用法定义和用法:some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。.some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。注原创 2020-07-04 17:57:16 · 718 阅读 · 0 评论 -
Vue学习笔记——选项卡案例(tab栏切换)
Vue学习笔记——选项卡案例(tab栏切换)内容截图:常犯问题:看到这个内容的时候,总是思考怎么将3个div叠起来。其实不需要,隐藏了div不占位置的。每次只显示一个div且显示时占的位置是一样的如果你都没有给它们添加显示的类,那么你只能看到选项,看不到图的盒子框架:ul 中 li 代表每一项的tab栏div 代表每个对应的盒子如何将data中的数据渲染到页面上?利用v-for="(item,index) in list"然后把list中的数据渲染到页面中 {{item.ti原创 2020-07-02 12:03:10 · 562 阅读 · 0 评论 -
Vue学习笔记——基础语法
Vue学习笔记——基础语法目标:能够说出Vue的基本用法能够说出Vue的模板语法能够说出Vue的常用特性能够基于Vue实现案例效果一些总结:1. 把字符串渲染到页面上有哪些方式?利用原生js拼接字符串利用模板引擎拼接利用Vue插值语法文档碎片 document.createDocumentFragment利用ES6 `` 反引号拼接字符串2. v-bind 和 v-on的区别v-bind 绑定属性v-on 绑定事件1. 基本使用引入vue.js库文件使用v原创 2020-07-02 12:01:35 · 848 阅读 · 0 评论