04 2019 档案
摘要：单文件组件介绍 vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立的组件，所以成为单文件组件； vue文件结构 由于.vue封装了html、js、css的代码，所以它由以下几部分组成； <template> html </templat
阅读全文
摘要：路由可以结合过渡效果使用； 使用<transition></transition>将<router-view></router-view>包裹住，再写样式即可。 在下面的实例中用到了第三方的动画库animate来进行过渡 animate官网：https://daneden.github.io/ani
阅读全文
摘要：在上一篇的博文中，实现的跳转是在页面中进行实现的 利用vue-router实例方法，使用js对路由进行动态跳转； 1、router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录； 2、router.replace：参数为路由对象，跳转到指定路由，跳转后不产生历史记录； 由效果图可以
阅读全文
摘要：在上一章博文中使用路由对象$route获取参数时，组件和路由对象耦合，在这篇博文中就可以使用props来进行解耦； 1、在组件中使用props选项定义数据，接收参数； 2、在路由中，使用props选项来进行设置，路由中的props有三种模式： a、布尔模式：props设置为true,可接收param
阅读全文
摘要：通过Node.js创建一个web服务器，要写的代码可能不是最少的，但是一定是最容易理解的。 用6行代码创建的web服务器 当在浏览器中访问http://127.0.0.1:1337会看到自定义的字样 Node.js 在第三行中的createServer方法支持一个callback的回调函数，这个函数
阅读全文
摘要：使用路由对象$route获取参数： 1、params： 参数获取：使用$route.params获取参数； 参数传递： URL传参：例 <route-linke to : "/foods/bjc/北京烤鸭/68"> 注：在对应路由path上使用 /:+属性名称接收参数 实例： 需要在子组件的路由中定
阅读全文
摘要：vue-router路由常用配置 1、mode：配置路由模式，默认为hash，由于URL很丑，可以修改为history，但是需要服务端的支持； 以上一篇的博文为实例： 初始时url的显示： 使用mode之后的显示： 使用mode的代码： 但是当复制该链接在新的窗口打开的时候，不能打开该链接，如图：
阅读全文
摘要：vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用； 单页应用（SPA）只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容；简单来说，根据不同的url与数据，将他们都显示在同一个页面中，就可称为单页应用；而控制页面跳转需要用路由。 vue-router下载：
阅读全文
摘要：slot详细介绍网址：https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容，例如： <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢？ Vue提供了一个极为方便的内置组件<slot
阅读全文
摘要：Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信； 我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的； 实例： 初始加载界面： 初始界面代码： 使用监听事件后： 添加的监听事件的代码： 调用事件部分： 最终代码： 1
阅读全文
摘要：单向数据流：父组件值的更新，会影响到子组件，反之则不行； 修改子组件的值： 局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据； 如果对数据进行简单的操作，可以使用计算属性； 由效果图可知，父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错 此时
阅读全文
摘要：子组件向父组件传值：子组件通过$.emit()方法以事件形式向父组件发送消息传值； 使用步骤： 定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件； 准备获取数据：父组件com-a要获取子组件data中的height属性； 在子组件com-b中，需要用$.emit()方法
阅读全文
摘要：父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信； 使用步骤： 定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件； 准备获取数据：com-b要获取父组件data中的name属性； 在<com-b :name=“name”></com-b> 使用v-bind
阅读全文
摘要：在Vue的组件内也可以定义组件，这种关系成为父子组件的关系； 如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是： Vue实例 -- 根组件 root component-a – 相对于root 这是子组件，相对于comp
阅读全文
摘要：template模板引用 在component的template中书写大量的HTML元素很麻烦。 Vue提供了<template>标签，可以在里边书写HTML，然后通过ID指定到组建内的template属性上； 示例： 由图可知自定义组件的count的值是自增的，是独立的，互不影响。 vue代码：
阅读全文
摘要：在上篇博客中介绍了组件，在注册组件的简写中就用到了全局组件 组件可分为全局组件与局部组件； 全局组件： 在全局API中的Vue.component注册；该项目中所有Vue实例内均可以使用； 局部组件： 在Vue实例中的components选项中注册； 只能在本实例中使用； 现在创建两个Vue实例来进
阅读全文
摘要：什么是组件？ 组件Component,可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用； 组件的使用： 1、使用全局的方法Vue.extend创建构造器； 2、再使用全局的方法Vue.component注册组件； 注意：在Vue.component里需
阅读全文
摘要：Node 应用由模块组成，采用 CommonJS 模块规范。 每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。 02_cusmod.js 模块的初始化： 1、引入 required 模块：我们可以使用 require 指令来载入 Node.js
阅读全文
摘要：在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了； 如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致； 注意：在<t
阅读全文
摘要：进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果； 如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式； 过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是：
阅读全文
摘要：自定义指令 钩子函数 自定义指令 除了内置指令，Vue也允许用户自定义指令； 注册指令：通过全局API Vue.directive可以注册自定义指令； 自定义指令的钩子函数： bind； inserted； update； componentUpdated； unbind； 自定义指令的使用：在自定
阅读全文
摘要：在上一篇博客中我们知道生命周期的方法： 生命周期： vm.$mount：手动挂载Vue实例； vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听； vm.$nextTick：将方法中的回调函数，延迟到DOM更新后； 需要进行手动的挂载实例： 在vue中加入： 或者： vm.$dest
阅读全文
摘要：常用的实例方法： 数据： vm.$set：设置属性值； vm.$delete：删除属性值； vm.$watch：观测数据变化； 生命周期： vm.$mount：手动挂载Vue实例； vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听； vm.$nextTick：将方法中的回调函数，延
阅读全文
摘要：Vue实例属性： vue实例直接调用的属性； 常用的实例属性： vm.$data：获取属性； vm.$el：获取实例挂载的元素； vm.$options：获取自定义选项/属性； vm.$refs：获取通过ref属性注册的DOM对象； vm.$data：获取属性 vue代码； HTML： 在控制台可以
阅读全文
摘要：计算属性的基本使用 初始小示例： 代码： 直接在HTML中使用toUpperCase()方法，这样使得代码太长，影响代码的逻辑；因此就引入了计算属性的应用 Vue计算属性： 更强大的属性声明方式，可以对定义的属性进行逻辑处理与数据监视; 计算属性的使用； https://cn.vuejs.org/v
阅读全文
摘要：Vue生命周期 Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示； Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们
阅读全文
摘要：在赌场21点游戏中，玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势，这就叫21点算法。 根据下面的表格，每张卡牌都分配了一个值。如果卡牌的值大于0，那么玩家应该追加赌注。反之，追加少许赌注甚至不追加赌注。 需要写一个函数，实现21点算法，它根据参数 card的值来递增或递减变量
阅读全文
摘要：代码学习过滤器 过滤器介绍：过滤模型数据，在数据显示前做预处理操作； 内置过滤器：在1.x中，Vue提供了内置过滤器，但是在2.x中已经完全废除； 解决办法： （1）使用第三方库来替代1.x中的内置过滤器； （2）使用自定义过滤器； 自定义过滤器： a.全局配置：Vue.filter( id, [d
阅读全文
摘要：实现修改商品的数量： 加入的代码： css: HTML： 由图可知点击商品数量减的时候会减到负数，所以需要做一个判断，如果数量为0，不能减下去： 加入判断之后的效果图： 加入判断的代码： 增加入库日期： 最终效果： 加入的代码： vue添加了addDate假数据，以及调节获取当前日期的格式： 添加的
阅读全文
摘要：通过索引进行删除，进行测试，是否获取其索引： 测试效果： 测试代码，在vue中定义一个空的数组，以便后面进行数据的绑定： 测试的HTML代码： 实现选择删除商品功能，通过遍历索引数组： 为了保证数据列表从小排到大: 测试使其列表从小排到大 测试代码： 最终实现该功能的总代码： 1 <!DOCTYPE
阅读全文
摘要：实现删除商品功能 根据索引来进行删除商品： 实现删除商品的HTML： 实现删除商品的vue： 实现删除商品后提示信息的显示： 实现提示信息的HTML： 其fontColor的css： 如果商品列表中无数据的话，就会合并7列，并且显示暂无商品的提示，该数量7在vue代码中进行定义变量属性值，使用时在H
阅读全文
摘要：最终修改的页面效果： 修改的css： 将 商品列表 和 添加商品 标题的class改为sub_title 总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商品管理 创建页面与部分数据</title
阅读全文
摘要：进行添加button，以及商品列表的创建 html: 在vue代码中创建方法，以及创建假数据,进行对两个button事件处理： 添加的vue代码： html: 实现以上商品的添加以及重置信息总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta chars
阅读全文
摘要：logo的路径： 页面的初始布局： 初始的HTML： 初始css： 初始vue： 进行了定义变量和变量的引入以及使用了v-model与v-for进行遍历数组： 使用了v-model,v-for之后的代码： vue代码： 总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head
阅读全文
摘要：普通的css引入： 变量引入： 通过定义一个变量fontColor来通过v-bind来进行绑定在h3z的class中 注意：v-bind后面必须跟一个属性或者一个方法 当然我们也可以通过数组的形式引入多个class： html: 使用json对象的方式，在json中也可以使用多种方式 key是样式的
阅读全文
摘要：v-bind：属性绑定； 当我们并没有使用v-bind使用的时候，突破不能显示出来，会提示错误，提示我们使用v-bind； 当我们使用v-bind时图片就可以显示： v-bind的简写是冒号： 使用v-bind进行样式的修改： 进行对字符串的拼接： 以上实例总的代码：
阅读全文
摘要：Vue的键盘事件： @keydown：按下 @keypress：按住 @keyup：抬起 默认的按键别名：Vue为常用按键映射了别名； 自定义按键别名：Vue.config.keyCodes可以自定义按键别名； @keydown：按下 比如在键盘上按下a: vue代码： html代码： 需求：类似于
阅读全文
摘要：v-show：通过切换元素的display CSS属性实现显示隐藏； v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建； 我们可以通过定义一个属性进行控制显示与隐藏： 定义的属性： html: v-else与v-elseif：都是与v-if配对使用； vue中
阅读全文
摘要：Vue的事件：获取事件对象$event； 事件冒泡：事件会向上传播 原生js阻止事件冒泡，需要先获取事件对象，再调用stopPropagation()方法； vue事件修饰符stop，例@clik.stop； 事件默认行为： 原生js方式需要获取事件对象，再调用preventDefault()方法；
阅读全文
摘要：v-on:事件绑定 v-on简写:@ 绑定click事件时； 代码： 执行click事件时进行数据的相加： vue: html: 使用v-on的简写@时： 在vue中修改add方法即可： 使用v-on的简写@： 以上示例所有代码： 1 <!DOCTYPE html> 2 <html> 3 <head
阅读全文
摘要：v-for：对集合或对象进行遍历； 使用v-for对数组遍历时： 效果如下： 代码： 使用v-for遍历一个对象时： html: 使用v-for遍历多个对象的时： 在vue中加入多个对象： html:使用v-for进行遍历： 使用v-for进行遍历数组、单个对象以及多个对象总的代码： 1 <!DOC
阅读全文
摘要：v-text：以纯文本方式显示数据； v-html：可以识别HTML标签； v-once：只渲染元素或组件一次； v-pre：不进行编译，直接显示内容； v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕，也就是隐藏{{}}； v-text与v-html的示例： 由效果图可以看
阅读全文
摘要：Vue的指令：其实就是单个JavaScript表达式，一般来说是带有v-前缀；都有着对应的官网介绍：https://cn.vuejs.org/v2/guide/forms.html v-model：数据双向绑定 下面是一个关于数据绑定的小案例： 页面初始时： 在输入框input中加入v-model后
阅读全文
摘要：什么是Vue.js？ Vue (读音 /vjuː/，类似于 view) ，是一个轻量级的MVVM前端框架； MVVM框架： MVVM是Model-View-ViewModel的简写，利用数据双向绑定简化DOM操作； 中文官网： https://cn.vuejs.org/ 作者：尤雨溪（Evan Yo
阅读全文
摘要：Vue.js一个核心思想是数据驱动。所谓的数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM。大大简化了代码量。特别是交互复杂的时候，只关心数据的修改会让代码的逻辑变得非常清晰，因为DOM变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用触碰DOM这样的代码非常利于维护
阅读全文
摘要：我们都知道在项目的页面中，经常通过选项卡幻灯效果来包含多张图片。所谓的幻灯效果，就是指所有选项卡中的内容自动轮流显示，这样不仅拥有很好的视觉效果，还能确保所有访问者能够看到所有选项卡得内容。 在本案例中通过应用jQuery UI插件中的选项卡（Tab）组件，实现幻灯片效果，当需要查看某一个标题的内容
阅读全文
摘要：jQuery UI所支持的选项卡工具集 jQuery UI插件的选项卡也是一种由一系列容器所组成的工具集，这些容器在同一时刻只有一个被打开。每个内容容器由标题和内容构成，当单击内容容器标题时，就可以访问该容器的包含的内容，每一个标题都作为独立的选项卡出现。对于每一个容器来说，都有与之相关联的选项卡。
阅读全文
摘要：jQuery UI 插件中的滑动条（Slider）工具集实现图片滑块滚动条的效果 初始效果： 初始代码：html css: 1 <style> 2 3 4 body { 5 font-size: 62.5%; 6 font-family: "Trebuchet MS", "Arial", "Helv
阅读全文
摘要：在项目的页面中，由于需要经常与用户进行交互。在提交页面的表单的时，如果用户名（文本框）为空，则通过提示框提示用户输入的内容；如果删除记录，同样也需要确认是否删除。如果直接通过JavaScript语言中的alert（）方法和confirm（）方法实现，不仅不能达到预期的效果，代码还比较复杂，因此我将通
阅读全文
摘要：1、使用ng-options创建选择框 ng-options 指令来创建一个下拉列表，列表项是通过对象和数组循环输出。 ng-repeat指令也可以实现下拉列表哦！!!它是通过数组来循环 HTML 代码来创建下拉列表： 实现代码： 由于ng-options指令具有以下的优势，因此它更适合创建下拉列表
阅读全文
摘要：AngularJS 中的服务是一个函数或对象,在AngularJS 中你可以创建自己的服务，或使用内建服务。 $location 服务，它可以返回当前页面的 URL 地址。 示例： 代码： 注意 ：$location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 cont
阅读全文
