前端与移动开发
关注
分享
扫一扫
czbkzmj
热爱IT
展开
-
前端笔记Vue项目day4(十）
3验证图书名称是否存在 添加图书之前发送请求验证图示是否已经存在 如果不存在 往后台里面添加图书名称 图书存在与否只需要修改submitFlag的值即可 [AppleScript]纯文本查看复制代码 ?...原创 2019-09-26 17:37:32 · 175 阅读 · 0 评论 -
前端笔记Vue项目day2(十）
常用特性应用场景1 过滤器 Vue.filter定义一个全局过滤器 [mw_shl_code=applescript,true] <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item....原创 2019-09-12 15:56:45 · 267 阅读 · 0 评论 -
前端笔记Vue项目day2(九）
6 删除图书 6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来 6.2 根据id从数组中查找元素的索引 6.3 根据索引删除数组元素 [mw_shl_code=applescript,true] <tbody> <tr :key='item.id' v-for='item in books'> ...原创 2019-09-12 15:54:23 · 316 阅读 · 0 评论 -
前端笔记Vue项目day2(七）
4 修改图书-上 点击修改按钮的时候 获取到要修改的书籍名单 4.1给修改按钮添加点击事件，需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍 把需要修改的书籍名单填充到表单里面 4.2根据传递过来的id 查出books 中 对应书籍的详细信息 4.3 把获取到的信息填充到表单 [mw_shl_c...原创 2019-09-12 15:32:28 · 178 阅读 · 0 评论 -
前端笔记Vue项目day2(六）
1、 提供的静态数据 数据存放在vue 中 data 属性中 [AppleScript]纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16...原创 2019-09-05 16:26:44 · 136 阅读 · 0 评论 -
前端笔记Vue项目day2(五）
数组变异方法 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 [td] push() 往数组最后面添加一个元素，成功返回当前数组的长度 pop() 删除数组的最后一个元素，成功返回删除元...原创 2019-09-05 16:26:05 · 196 阅读 · 0 评论 -
前端笔记Vue项目day2(四）
过滤器 Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示 支持级联操作 ...原创 2019-09-05 16:25:19 · 164 阅读 · 0 评论 -
前端笔记Vue项目day2(三）
自定义指令局部指令 局部指令，需要定义在directives 的选项 用法和全局用法一样 局部指令只能在当前组件里面使用 当全局指令和局部指令同名时以局部指令为准 [AppleScript]纯文本查看复制代码 ? 01 02 03 04 05 06 07 0...原创 2019-09-05 16:23:55 · 131 阅读 · 0 评论 -
前端笔记Vue项目day2(二）
表单修饰符 .number转换为数值 注意点： 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。 .trim自动过滤用户输入的首尾空白字符 只能去掉首尾的 不能去除中间的空格 .lazy 将inpu...原创 2019-09-05 16:20:16 · 165 阅读 · 0 评论 -
前端笔记Vue项目day2(一）
表单基本操作 获取单选框中的值 通过v-model [AppleScript]纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 ...原创 2019-09-05 16:18:46 · 131 阅读 · 0 评论 -
前端笔记Vue项目day1(十）
4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮 给每一个li添加点击事件 让当前的索引 index和当前 currentIndex 的值 进项比较 如果相等 则当前li添加active 类名 当前的 li 高亮当前对应索...原创 2019-09-05 16:16:02 · 182 阅读 · 0 评论 -
前端笔记Vue项目day1(九）
4、 给每一个tab栏添加事件,并让选中的高亮 4.1 、让默认的第一项tab栏高亮 tab栏高亮 通过添加类名active 来实现 （CSSactive 的样式已经提前写好） 在data 中定义一个 默认的索引 currentIndex为0 给第一个li 添加 active 的类名 通过动态绑定c...原创 2019-09-05 16:15:13 · 129 阅读 · 0 评论 -
前端笔记Vue项目day1(八）
案例选项卡1、 HTML 结构[AppleScript]纯文本查看复制代码? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 ` <div...原创 2019-09-05 16:14:24 · 131 阅读 · 0 评论 -
前端笔记Vue项目day1(七）
循环结构v-for 用于循环的数组里面的值可以是对象，也可以是普通元素 [AppleScript]纯文本查看复制代码 ? 01 02 03 04 05 ...原创 2019-09-05 16:13:18 · 123 阅读 · 0 评论 -
前端笔记Vue项目day1(五）
绑定对象 我们可以给v-bind:class 一个对象，以动态地切换class。 注意：v-bind:class指令可以与普通的class特性共存 [AppleScript]纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10...原创 2019-08-22 15:02:31 · 112 阅读 · 0 评论 -
前端笔记Vue项目day1(二）
v-html 用法和v-text 相似但是他可以将HTML片段填充到标签中 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。 [AppleScript]纯文本查看复制代码 ?...原创 2019-08-22 15:00:47 · 133 阅读 · 0 评论 -
前端笔记Vue项目day1(一）
day01Vue是什么？Vue (读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合使用Vue将helloworld渲染到页面上指令 本质就是自定义属性 Vue中指定都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 [AppleScript]纯...原创 2019-08-22 15:00:15 · 249 阅读 · 0 评论 -
前端笔记Vue项目day3(一）
组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 组件注册全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 组件基础用[mw_shl_code=applescript,true]&l...原创 2019-09-12 15:57:16 · 148 阅读 · 0 评论 -
前端笔记Vue项目day3(二）
局部注册 只能在当前注册它的vue实例中使用 [mw_shl_code=applescript,true]<div id="app"> <my-component></my-component> </div> <script> // 定义组件的模板 var Child = { ...原创 2019-09-12 15:57:48 · 172 阅读 · 0 评论 -
前端笔记Vue项目day4(九）
图书列表案例1. 基于接口案例-获取图书列表 导入axios 用来发送ajax 把获取到的数据渲染到页面上 [mw_shl_code=applescript,true] <div id="app"> <div class="grid"> <table> <...原创 2019-09-26 17:36:36 · 206 阅读 · 0 评论 -
前端笔记Vue项目day4(八）
async和 await async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象 await函数不能单独使用 async/await 让异步代码看起来...原创 2019-09-18 13:59:07 · 638 阅读 · 0 评论 -
前端笔记Vue项目day4(七）
axios 全局配置[mw_shl_code=applescript,true]#配置公共的请求头axios.defaults.baseURL = 'https://api.example.com';#配置 超时时间axios.defaults.timeout = 2500;#配置公共的请求头axios.defaults.headers.common['Authorizat...原创 2019-09-18 13:58:29 · 148 阅读 · 0 评论 -
前端笔记Vue项目day4(五）
fetchAPI 中 响应格式 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等 [mw_shl_code=applescript,true]/* Fetch响应结果的数据格式 */ ...原创 2019-09-18 13:57:53 · 818 阅读 · 0 评论 -
前端笔记Vue项目day4(四）
fetch Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。 fetch(url, options).then(） [mw_shl_code=applescript,true]<script type="text/javascript"&...原创 2019-09-18 13:57:11 · 146 阅读 · 0 评论 -
前端笔记Vue项目day4(三）
静态方法.all() Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定 .race() Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（...原创 2019-09-18 13:55:59 · 123 阅读 · 0 评论 -
前端笔记Vue项目day4(二）
Promise基本API实例方法.then() 得到异步任务正确的结果 .catch() 获取异常信息 .finally() 成功与否都会执行（不是正式标准） [mw_shl_code=applescript,true]<script type="text/javascript"> /* Promise常用API-实例方...原创 2019-09-18 13:54:03 · 183 阅读 · 0 评论 -
前端笔记Vue项目day4(一）
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一...原创 2019-09-18 13:53:27 · 163 阅读 · 0 评论 -
前端笔记Vue项目day3(十）
[mw_shl_code=applescript,true] .container .item .del:hover { background-color: orange; }</style></head><body><div id="app"> <div class="container">...原创 2019-09-18 13:52:56 · 143 阅读 · 0 评论 -
前端笔记Vue项目day3(九）
5. 实现组件更新数据功能下 子组件通过一个标识符来标记对用的用户点击+ - 或者输入框输入的内容 父组件拿到标识符更新对应的组件 [mw_shl_code=applescript,true]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...原创 2019-09-18 13:52:20 · 147 阅读 · 0 评论 -
前端笔记Vue项目day3(八）
4. 实现组件更新数据功能上 将输入框中的默认数据动态渲染出来 输入框失去焦点的时候 更改商品的数量 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据 父组件中接收子组件传递过来的数据并处理 [mw_shl_code=applescript,true]<div id="app"> <div cl...原创 2019-09-18 13:50:28 · 318 阅读 · 0 评论 -
前端笔记Vue项目day3(七）
3.实现列表组件删除功能 从父组件把商品列表list 数据传递过来 即 父向子组件传值 把传递过来的数据渲染到页面上 点击删除按钮的时候删除对应的数据 给按钮添加点击事件把需要删除的id传递过来 子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据我们需要把数据传递给父组件让父组件操作数据 父...原创 2019-09-12 16:00:59 · 167 阅读 · 0 评论 -
前端笔记Vue项目day3(六）
2、实现 标题和结算功能组件 标题组件实现动态渲染 从父组件把标题数据传递过来 即 父向子组件传值 把传递过来的数据渲染到页面上 结算功能组件 从父组件把商品列表list 数据传递过来 即 父向子组件传值 把传递过来的数据计算最终价格渲染到页面上 [mw_shl_code=applescript,tr...原创 2019-09-12 16:00:32 · 151 阅读 · 0 评论 -
前端笔记Vue项目day3(五）
作用域插槽 父组件对子组件加工处理 既可以复用子组件的slot，又可以使slot内容不一致 [mw_shl_code=applescript,true]<div id="app"> <!-- 1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件， ...原创 2019-09-12 15:59:56 · 251 阅读 · 0 评论 -
前端笔记Vue项目day3(四）
组件插槽 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力 匿名插槽[mw_shl_code=applescript,true]<div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot如果不传值 则使用 slot 中的默认值--> <alert-box>有bug发生</ale...原创 2019-09-12 15:59:25 · 164 阅读 · 0 评论 -
前端笔记Vue项目day3(三）
子组件向父组件传值 子组件用$emit()触发事件 $emit()第一个参数为 自定义的事件名称 第二个参数为需要传递的数据 父组件用v-on 监听子组件的事件 [mw_shl_code=applescript,true]<div id="app"> <div :style='{fontSize: fontSize + ...原创 2019-09-12 15:58:24 · 141 阅读 · 0 评论 -
前端与移动开发之vue-day5（3）
实现自动打开浏览器、热更新和配置浏览器的默认端口号注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！方式1：修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新："dev": "webpack-dev-server --hot --port 4...原创 2018-11-20 11:03:52 · 129 阅读 · 0 评论 -
前端与移动开发之vue-day5（2）
实现webpack的实时打包构建由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。运行cnpm i webpack-dev-server --save-dev安装到开发依赖安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时...原创 2018-11-20 11:00:22 · 95 阅读 · 0 评论 -
前端与移动开发之vue-day3（2）
【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象通过计数器案例演示使用components属性定义局部子组件组件实例定义方式：<script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {},...原创 2018-11-16 16:37:12 · 154 阅读 · 0 评论 -
前端与移动开发之vue-day3（1）
定义Vue组件什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式使用 Vu...原创 2018-11-16 16:22:43 · 114 阅读 · 0 评论 -
前端与移动开发之vue-day1（3）
迭代数组 <ul> <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li></ul> 迭代对象中的属性 <!-- 循环遍历对象身上的属性 --><div v-for="(val原创 2018-11-14 15:09:17 · 1926 阅读 · 1 评论