AprilCC-CSDN博客

原创 codeTest(一)

一. Square Every DigitNote: The function accepts an integer and returns an integerfunction squareDigits(num){ return Number((''+num).split('').map(function(val){return val*val;}).join(''));study: j

2017-11-28 17:53:54 2161

原创 vue-router菜鸟进阶！(路由组件传参 vs H5 History模式)

路由组件传参之前我们在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了其灵活性。const User= { template: '<div>User {{ $route.params.id }}</div>'}const router = new VueRouter({ routes: [ { path:

2017-11-13 09:33:31 6302 1

原创 vue-router菜鸟进阶！(重定向和别名)

重定向当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/`b` } ]})重定向的目标也可以是一个命名的路由：const router = new Vue

2017-11-10 15:16:02 13696 2

原创 vue-router菜鸟进阶！(嵌套路由VS命名路由)

嵌套路由一个被渲染组件可以包含自己的嵌套< router-view >。要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置：<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></s

2017-11-09 16:38:31 2229

原创 vue-router菜鸟进阶！（动态路由匹配VS编程式导航）

开篇废话：每天早上都要被自己迷倒～嘻嘻。最近状态超级好编程的状态也好了很多很多～前面我们已经看了vue.js基础，又看了webpack的知识还有简单的vue-router小实例。其实已经可以自己勉强写一些简单页面了。但是我偏不hhhhhh，虽然说实践出真知，但是我这种学院派还是偏爱看这官方文档跟着上面的实例走。野路子虽好，可不要走偏噢～ (;｀O´)o动态路由匹配我们经常需要把某种模式匹配到

2017-11-09 14:51:12 4551 1

原创 webpack使用初体验（爽）

// 鉴于看的英文文档，本篇将包含大量英文引用 ✍️Getting Startedwebpack is used to compile JavaScript modules.Once intstalled,we can interface with webpack either from its CLI or API.Basic SetupFirst Let’s creat a directory

2017-11-08 16:19:37 974

原创 webpack学习入门（4个核心概念）

以下学习内容来自webpack官方文档 .还是我自己的习惯，在学习使用某个工具之前，先搞清楚它的核心概念和是什么原理来工作的，这对我很重要。那么，就开始吧～Conceptswebpack是什么？ At its core, webpack is a module bundler for modern JavaScript applications. When webpack processes

2017-11-08 11:04:17 1609

原创 ToDoList(Vue示例)

以下代码片段来自 https://jsfiddle.net/yyx990803/4dr2fLb7/JavaScript// Full sepc-compliant TodoMVC with localStorage persistence// and hash-based routing in ~120 effective lines of JavaScript// localStorage pe

2017-11-06 15:04:52 1074

原创 vue-router 简单入门小实例

用vue.js+vue-router创建单页应用，是非常简单的。使用vue.js我们已经可以通过组合组件来组成应用程序，当需要把vue-router添加进来，我们需要做：将组件(components)映射到路由(router),然后告诉vue-router在哪里渲染它们。下面例子来源于Vue官方文档Getting Started，只是为了手打一遍。HTML:<script src="http

2017-11-06 10:49:06 1799

原创曹可爱之最可爱-Vue.js入门（十）组件5

开篇废话：组件终于要完结了，充电器忘公司了，乘着电脑还有一点电赶快完成这一篇。编写可复用组件在编写组件时，最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据做出任何假设。 Vue组件的API来自三部分 – prop，事件和插槽： 1.prop允许外部环境传递数据给组件； 2.事件允许从组件内触发外部环境

2017-11-03 15:52:09 347

原创曹可爱之最可爱-Vue.js入门（十）组件4

开篇：nothing。使用插槽分发内容在使用组件时，我们常常要像这样组合它们：<app> <app-header></app-header> <app-footer></app-footer></app>注意： 1. < app >组件不知道它会接收什么内容，这是由使用< app >的父组件决定的。 2. < app >组件很有可能有它自己的模版。为了让组件可以组合，我们需要用

2017-11-03 14:40:01 405

原创曹可爱之最可爱-Vue.js入门（十）组件3

自定义事件我们知道，父组件使用prop传递数据给子组件。但是子组件怎么跟父组件通信呢？这个时候Vue的自定义事件系统就派上用场了。使用v-on绑定自定义事件每个Vue实例都实现了事件接口，即：使用$on(eventName)监听事件使用$emit(eventName)触发事件另外，父组件可以在使用子组件的地方直接用v-on监听子组件触发的事件。<div id ="count

2017-11-01 22:30:13 503

原创曹可爱之最可爱-Vue.js入门（十）组件2

Prop使用Prop传递数据组件实例的作用域是孤立的。这意味着不能在子组件的模版内直接引用父组件的数据，父组件的数据需要通过prop才能下发到子组件中。子组件要显式地用props选项声明它预期的数据：Vue.component('child', { // 声明props props: ['message'], // 就像data一样，prop也可以在模版中使用 //

2017-11-01 10:10:40 405

原创曹可爱之最可爱-Vue.js入门（十）组件1

开篇废话：我的天！感觉这几天浏览器见了鬼了，Chrome先是无理由崩溃，然后是Safari莫名失踪了我刚还在编辑的blog！！！简直不想生气。好啦，那就开始了，哎。不行，很重要的组件，还是要打起精神！！！开始吧～～！！组件什么是组件？组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功

2017-11-01 08:53:07 313

原创曹可爱之最可爱-Vue.js入门（九）表单输入绑定

开篇废话：啊啊啊啊啊啊啊啊啊要死了要死了。任务表推迟了一天可今晚已经是deadline眼看要完不成了啊摔～！！抱着电脑专心码吧撩汉什么的先放一边。吐槽一下，没有外接屏已经想杀人了。等有钱了要在家放两个外接屏 = 。=（可是现在就好想去京东上看一下外接屏啊hhhhha我怎么这么萌）基础用法可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-m

2017-10-31 22:51:33 302

原创曹可爱之最可爱-Vue.js入门（八）事件处理

事件处理监听事件可以用v-on指令监听DOM事件来触发一些JavaScript代码<div id="example-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了 {{ counter }}次。</p></div>var example1 = new Vue({ el: '#example-1',

2017-10-31 11:49:38 388

原创曹可爱之最可爱-Vue.js入门（七）列表渲染

列表渲染用v-for把一个数组对应为一组元素我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>

2017-10-30 17:51:42 386

原创曹可爱之最可爱-Vue.js入门（六）条件渲染

条件渲染v-if指令<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>在< template >元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须把它添加到一个元素上，如果想切换多个元素呢？可以把一个< template >元素当作不可见的包裹元素，并在上面使用v-if。最后的渲染结果将不包含< template >元素<template v-if="

2017-10-30 13:41:46 326

原创曹可爱之最可爱-Vue.js入门（五）Class与Style绑定

啊啊啊啊今天要把剩下的基础篇代码敲完。砸的坑迟早的填的，嘤嘤嘤开始吧小胖曹同学(≧∇≦)Class与Style绑定操作元素的Class和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind(:)处理它们：只需要通过表达式计算出字符串结果即可。字符串拼接麻烦且易出错，因为在将v-bind用于class和style时。Vue.js做了专门的增强。表达式结果的类型除了字符串

2017-10-30 11:55:56 439

原创曹可爱之最可爱-Vue.js入门（四）计算属性和观察者

哈喽everyone，激动人心的周末又到啦。做什么开启周末的愉快时光呢？当然是学习写blog啊！！！今天看的这一节是第一遍没有走心看的！什么计算属性方法都迷迷糊糊的。所以点支烟，走起～计算属性和观察者计算属性对于任何复杂逻辑，都应当使用计算属性<div id="example"> <p>Original message: "{{ message }}"</p> <p>Comp

2017-10-28 12:49:24 486

原创曹可爱之最可爱-Vue.js入门（三）模版语法

模版语法Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。在底层的实现上，Vue将模版编译成虚拟的DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够只能的计算出重新渲染组件发的最小代价并应用到DOM操作上。（以前读这里的时候并不明白Vue在底层实现上做了什么，再来看我想大概是这样：Vue在编译的时候把模版编译成了类似我们写的渲染函数之类的东西运用

2017-10-27 17:02:38 385

原创曹可爱之最可爱-Vue.js入门 (二)Vue实例

一.数据与方法每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：var vm = new Vue({ //选项})当一个Vue实例被创建时，它向Vue的响应式系统中加入其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生”响应”，即匹配更新为新的值。// 我们的数据对象var data = { a:1}// 该对象被加入到一个Vue实例中var vm

2017-10-27 12:03:59 342

原创曹可爱之最可爱-Vue.js入门 (一)初识

本文是学习Vue官方文档所作的学习笔记。其中加入了个人的理解思考及困惑和为了解决学习中遇到的问题所查阅的有关资料。一. 初识Vue首先来看看Vue是什么？ Vue.js 是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够

2017-10-26 12:42:28 508

AprilCC的博客