文章路径: 全部 / 叶飞 / 源栈培训:ASP.NET全栈开发 / Web前端 / Vue.js /


更多
2021年03月30日 08点33分 作者:叶飞 修改

Vue:CLI:webpack / 执行流程 / mock.js示例

ES2015模块及 历史渊源:Commonjs(require/define)、AMD、CMD、ES6 modules(import/export)webpack #基本概念 入口(entry)出口(output):bundle.js生成的目录位置等loader:非js文件处理,其中的rules:test:不是测试,而是匹配use:如果匹配,就使用插件(plugins)require:// 通过 npm 安// 用于访问内置插件模式:production/development#指南 安装:不推荐全局安装 ……

vue cli
2018年11月28日 13点57分 作者:叶飞 修改

Vue:组件:编程式访问 / 定义事件 / 循环引用

node.js 官方说法:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。通俗的讲,是一个JavaScript语言的“编译器”。所以,需要下载安装npm是什么?和nuget相类似的包管理工具npm会在node.js安装时自动安装npm和node.js安装成功:另:VS2017中打开npm窗口:视图 - 其他窗口 - Node.js交互式窗口 (用起来不行啊?)vue-cli不明白,vue.js就一个类库,需要什么config?npm install -g @vue/ ……

vue.js 学习 直播
2019年02月22日 13点48分 作者:叶飞 修改

vue:组件:事件 / $emit / v-model / 插槽 / 动态 / 异步 / v-for示例

猜数字的游戏(二分查找) 程序随机产生某一范围内一个数字(比如1-1000之间),然后你开始猜这个数字是多少。在你猜测之后,每次程序都会告诉你你会怎么猜?是不是:然后,根据你的这种猜测方法,归纳出“二分查找法”:将表中间位置记录的关键字与查找关键字比较,如果两者相等,则查找成功;否则利用中间位置记录将表分成前、后两个子表,如果中间位置记录的关键字大于查找关键字,则进一步查找前一子表,否则进一步查找后一子表。重复以上过程,直到找到满足条件的记录算法的复杂度理解不同语义下的“复杂”:执行 v.s. 设计时间复 ……

vue 组件 data() props
2018年11月28日 23点17分 作者:叶飞 修改

vue:组件:全局&局部 / 模板 / data() / props

通过插槽分发内容<slot></slot>动态组件复习:v-for里面的key:由key来“定位”(推荐),但仍然不明白:默认的模式……只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出?<component v-bind:is="currentTabComponent"></component>,注意:component不是具体的组件名称,如tab-HomecurrentTabComponent是computed得到的,值是 ……

vue.js 学习 直播
2021年04月05日 14点15分 作者:叶飞 修改

Vue:axios:request() / then() / catch() / 文件上传 / 简写 / 全局 / 拦截器

Vue本身并不提供AjaxJQuery完全能够胜任的。但axios是promise风格的,而且由vue官方推荐,愿意了解的同学:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>configaxios.request(config)get...then...catch多个请求all.then自动转换 JSON 数据客户端支持防御 XSRF ……

axios Ajax框架
2021年04月06日 17点54分 作者:叶飞 修改

Vue:事件 / $event / $nextTick() / $refs /表单校验

绑定利用指令:<h1 v-on:click="counter++" id="yz-hello">{{counter}}</h1>counter是vue data的值data: {counter: 1},演示:方法情况更复杂:var vm = new Vue({el: "#yz-hello", methods: {hello: function () {console.log('hello,源栈');}}})直接传方法名:<h1 v-on:click="hello" id="y ……

Vue.js 事件
2018年11月25日 23点22分 作者:叶飞 修改

Vue:表单输入绑定 / v-model / v-for:key

之前我们学习的都是将vue data的数据绑定到HTML模板上,能不能反过来,把DOM上的数据绑定到vue data呢?首先我们想到的,肯定就是form表单。v-model在表单元素上添加v-model指令,指向vue data(此后改称ViewModel),就能实现:页面渲染时,根据ViewModel的值呈现form表单项的初始值用户输入/选择时,将用户输入/选择的数据,自动绑定到指定的ViewModel这又被称之为双向绑定。text<input type="text" v-model="body ……

vue.js 表单 form v-model
2018年11月24日 23点09分 作者:叶飞 修改

Vue:计算属性computed / 方法methods / 监视watch

computed比如说我们从后台拿到了文章正文内容,前台显示时只需要显示前面25个字符,怎么办?之前我们的做法:<h1 id="yz-hello" >{{body.substring(0,25)}}</h1>data: {body : '一起(17)帮(bang)是一个旨在直接解决编程/电脑操作等具体问题、互助式的虚拟社区平台。直接解决具体问题 '}如果使用计算属性,代码就变成这样:<h1 id="yz-hello">{{summary}}</h1>var ……

vue.js 学习 直播
2021年03月29日 10点02分 作者:叶飞 修改

Vue:深入实例:生命周期钩子 / 内置属性方法 / 响应式原理

什么是框架?这是一个非常好的了解 框架 的机会。你完全可以不用Vue,直接手写JavaScript实现各种功能为什么它不仅仅是一个类库?Vue实例 了解一下:MVVM,把MVC中的Controller变成了ViewModel。一个new Vue()就可以理解为ViewModel对象,所有的业务逻辑都在里面。理解“双向绑定”,尤其是从View到Model的改变,但新增属性除外。Object.freeze(obj),这会阻止修改obj现有的属性。Vue 实例还暴露了一些前缀$的实例属性与方法。生命周期钩子,已 ……

Vue 实例对象 生命周期
2021年03月28日 14点26分 作者:叶飞 修改

Vue:条件/列表渲染:v-if-else / v-show / v-for

条件渲染(v-if-else) 复用已有元素而不是从头开始渲染<template v-if="loginType === 'username'"><label>Username</label><inputplaceholder="Enter your username"></template>但这种语法<template>还没看见过,后面应该有讲解。v-if vs v-show:渲染 vs display不推荐同时使用v-if和v-f ……

Vue 分支 循环

Web前端


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript入门

Javascript的基本语法:为能使用JQuery和Bootstrap.js的使用打下基础

ES进阶

借助于ES6,讲解JavaScript中一些更复杂的语法特性,如作用域、闭包、面向对象、原型链、this变化、module等

Bootstrap和JQuery

CSS框架Bootstrap,和JavaScript的JQuery类库(含Ajax)

Vue.js

全部
关键字



帮助

反馈