前端框架
qq_43341422
这个作者很懒,什么都没留下…
展开
-
结合 webpack 使用 vue-router
ES6 中 export default 和 export 的使用方式 使用 export default 和 export 导出模块中的成员; 对应 ES5(node)中的 module.exports 和 exports 使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块 使用箭头函数:(a, b)=&...原创 2019-11-03 10:02:12 · 109 阅读 · 0 评论 -
webpack 构建 vue 项目
nrm 的安装使用 作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址; 镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样; 运行 npm i nrm -g 全局安装nrm包; 使用 nrm ls 查看当前...原创 2019-10-28 21:09:01 · 105 阅读 · 0 评论 -
3. vue-resource 请求数据
使用 vue-resource 请求数据,首先要在页面中引入 vue-source 脚本文件,且必须先引用 vue 的脚本文件,因为 vue-resource 脚本文件依赖 vue 脚本文件。 1.发送 get 请求 getInfo() { this.$http.get('URL地址').then(res => { console.log(res.body); }) } ...原创 2019-10-27 11:02:23 · 100 阅读 · 0 评论 -
webpack工具的使用
webpack概述 我们写前端页面数经常会引入一些css,js等静态资源,然而当我们静态资源引用的比较多时,我们的网页加载速度会变得很慢,因为我们要发起很多的二次请求,并且要处理错综复杂的依赖关系。因此,我们学习 webpack ,解决各个包之间复杂的依赖关系 webpack:基于整个项目进行构建,可以很好的实现资源的合并,打包,压缩,混淆等功能 webpack 项目目录结构 dist: 发布完...原创 2019-10-26 17:59:55 · 133 阅读 · 0 评论 -
6. Vue 中的 watch 、computed 和 methods
watch 、computed 和 methods 对比 案例需求:监听 姓 和 名 两个文本框,只要有一个变化,则 全名 改变,分别 methods,watch,computed 实现 <div id="app"> <input type="text" v-model="firstname" @keyup="getFullname"> + <...原创 2019-10-21 10:49:16 · 111 阅读 · 0 评论 -
5. Vue 路由
概述 后端路由:通过用户请求的 url 导航到具体的 html 页面;每跳转到不同的 URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据,然后和模板组合,返回 HTML,也可以是直接返回模板 HTML ,然后由前端 js 再去请求数据,使用前端模板和数据进行组合,生成想要的 HTML 前端路由:在单页面应用,大部分页面结构不变,只改变部分内容的使用。主要通过URL中的has...原创 2019-10-21 10:12:18 · 173 阅读 · 0 评论 -
4. Vue 组件
定义全局组件 方式一: var com1 = Vue.extend({ template: '<h3>定义组件h3</h3>' }) Vue.component('myCom1', com1) 方式二: Vue.component('myCom1',Vue.extend({ template:'<h3>定义组件h3</h3>>' })) ...原创 2019-10-20 18:38:37 · 90 阅读 · 0 评论 -
2.Vue 实例的生命周期
Vue 实例的生命周期图示 以下是官方文档提供的 Vue 实例的生命周期图示,红色字体被圆角矩形包裹的为生命周期函数原创 2019-10-18 18:20:15 · 80 阅读 · 0 评论 -
1.Vue指令
插值表达式 语法:{{ msg }} 特点: 只会替换自己本身的占位符 有闪烁问题,可以用 v-cloak 解决,或用 v-text v-text 语法:v-text="msg" 特点: 会覆盖元素中原有的内容 默认没有闪烁问题 v-html 语法:v-html="msg" 作用:将元素内容解析为 v-html 特点:覆盖元素中的内容 v-cloak 语法:直接写在元素标...原创 2019-10-18 17:15:34 · 117 阅读 · 0 评论