![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.JS
凌冰_
分享知识带给我的快乐!帮助他人就是帮助自己。
希望更多人能关注,来分享我的成果!
希望大家快快乐乐的学习,开开心心的畅游知识的海洋。
展开
-
Vue.js框架--vue-cli脚手架安装(一)
一、Vue和Angular、React都是前端框架 (1)单页面框架 (2)基于模块化组件化的开发模式Vue简单,灵活,高效,国内的中小企业用的很多! 二、应用场景 传统中西餐、快餐店、奶茶店、火锅店、咖啡店、甜品店、大排档、小吃店、KTV。三、必背的基础 (1)HTML+CSS+JS基础知识 (2)必须需要Vue基础知识 四、搭建Vue的开发...原创 2018-08-26 16:00:51 · 327 阅读 · 0 评论 -
豆瓣电影的使用
1、获取正在热映的电影:接口:https://api.douban.com/v2/movie/in_theaters访问参数:start : 数据的开始项count:单页条数city:城市如:获取 广州热映电影 第一页 10条数据:https://api.douban.com/v2/movie/in_theaters?city=广州&start=0&co...原创 2020-08-24 11:09:27 · 21874 阅读 · 9 评论 -
Vue.js框架--关于Can't resolve 'sass-loader' in...异常
在项目中需要用到<style lang="scss">时,运行会发生异常如下:原因:是不能解析sass-loader哦!解决方法: cnpm install sass-loader -D cnpm install node-sass -D...原创 2018-10-16 16:16:59 · 414 阅读 · 0 评论 -
Vue.js框架--绑定图片几种方式
方式一: <!--注意:写src/assets/文件--> <img src="src/assets/logo.png" /> 方式二:<img v-bind:src='imgUrl' />data() { return { msg: '欢迎使用Vue.js', imgUrl: require('./ass...原创 2018-10-08 15:49:58 · 1593 阅读 · 0 评论 -
Vue.js框架--嵌套路由(二十)
主要操作技能 嵌套路由 就是 (路由里面嵌套他的子路由) 子路由关键属性children 1)配置路由{ path: '/user', component: Users, children: [{ //父子组件配置,注意不能写/ path: 'useradd', ...原创 2018-09-21 11:39:12 · 298 阅读 · 0 评论 -
VueJs 调试工具——vue-devtools
文件下载地址第一步将下载好的文件拖到chrome拓展栏中(更多工具=>拓展程序)第二步修改配置文件:C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.2_0如图:打开文件“man...原创 2018-09-25 11:48:39 · 398 阅读 · 0 评论 -
Vue.js框架--路由编程式的导航 和History 模式(十九)
主要操作技能:https://router.vuejs.org/zh一、编程式的导航 除了使用 <router-link> 创建 a 标签来定义导航链接, 我们还可以借助 router 的实例方法,通过编写代码来实现 点击 <router-link :to="..."> 等同于调用 router.push(...)。 //...原创 2018-09-19 17:29:04 · 191 阅读 · 0 评论 -
Vue.js中的 new Vue() 和 export default {}区别
在生成、导出、导入、使用 Vue 组件的时候,常常被位于不同文件的 new Vue() 和 export default{} 。 首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:...原创 2018-09-18 11:56:44 · 10398 阅读 · 0 评论 -
Vue.js面试题整理
一、什么是MVVM?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和Model的对象(桥梁)。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过Vie...转载 2018-09-07 16:07:02 · 30888 阅读 · 4 评论 -
Vue.js框架--Ui框架的Mint UI action-sheet.vue(二十二)
主要操作技能: 1>下载mint ui 的源码,拷贝action-sheet.vue 从Demo 找到这个Action Sheet 运行效果下载解压这个mint-ui-master找到action-sheet.vue文件 2>使用这个Action-Sheet组件 编写代码: 拷贝action-sheet.vue到工程中...原创 2018-10-25 11:17:06 · 1205 阅读 · 0 评论 -
Vue.js框架--Ui框架的Mint UI中 Infinite scroll 集合API实现上拉分页更多(二十三)
主要操作技能: 1>打开http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll文档查看 2>实现这个功能编写代码: UserAdd.vue<template> <div id="add"> <h3>{{msg}}</h3> <!-..原创 2018-10-25 14:14:37 · 518 阅读 · 0 评论 -
Vue.js框架--使用反单引号(ES6 引入了模板字符)(二十九)
在使用vue编程中,组件里面绑定的事件如果有传入事件名称字符串/字符串参数,这个时候光用单双引号会出现string is undefined,这个时候我们就需要用到反单引号,那么反单引号如何输出? 作用是什么? 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 ...原创 2018-11-06 11:12:40 · 9669 阅读 · 1 评论 -
Vue.js框架--Vuex实现组件里数据持久化(二十八)
主要操作技能: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 新闻页面每次切换路由时,再次访问就会请求数据;那么如何直接从vuex中持久化数据呢? 1)在store.js中 state定义list数组/*1.state在vuex中用于存储数据*/var state = { count: 1, list: [] //存储新闻数据...原创 2018-10-30 16:19:30 · 1373 阅读 · 0 评论 -
Vue.js框架--Vuex实现不同组件计数器数据共享(二十七)
主要操作技能: 官网:https://vuex.vuejs.org/zh/一、Vuex 解决不同组件数据共享,数据持久化。 1.安装 cnpm install vuex --save 2.在src下创建vuex文件夹,在创建文件store.js 3.在store.js文件中引入vuex import Vue from 'vue'...原创 2018-10-30 15:43:01 · 522 阅读 · 0 评论 -
Vue.js框架--Ui框架的Mint UI(二十一)
主要操作技能:饿了么公司基于vue开发的vue的Ui组件库 (1) Element Ui 基于vue pc端的UI框架 (2) MintUi 基于vue 移动端的ui框架 通过github.com 网站去查询mint ui查找第一个OK! 1)官方网站: http://mint-ui.github.io/#...原创 2018-10-24 16:43:23 · 406 阅读 · 0 评论 -
HBuilder 显示点开头的文件 如.babelrc
文件系统中的文件列表是导入到HBuilder中后,默认情况下 HBuilder 项目视图中显示的文件列表不全那么就必须对HBuilder进行设置设置后 就可以看到除了.project之外的文件...原创 2018-10-26 17:18:47 · 655 阅读 · 0 评论 -
Vue.js框架--路由模块化(二十六)
主要操作技能: 1>创建文件夹\router.js文件 2>写入相关路由配置 router.jsimport Vue from 'vue'//0. 使用路由import VueRouter from 'vue-router'Vue.use(VueRouter)//1. 定义 (路由) 组件。import Home from '../componen...原创 2018-10-29 15:59:28 · 650 阅读 · 0 评论 -
Vue.js框架--Ui框架的Element UI 按需引入(二十五)
主要操作技能: 1>去官网查看http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 1. 必须安装 cnpm i element-ui -S 2 安装 cnpm install ba...原创 2018-10-29 15:54:28 · 834 阅读 · 0 评论 -
Vue.js框架--Ui框架的Element UI(二十四)
主要操作技能: 1>去官网查看http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart 2>安装: cnpm i element-ui -S 3> 在main.js文件中引入//elementUI使用import ElementUI from 'element-ui';im...原创 2018-10-25 15:20:31 · 498 阅读 · 0 评论 -
Vue.js框架--非父子组件传值(十五)
主要操作技能: Home.vue / News.vue 不是父子关系 * 非父子组件传值 * 1.新建一个js文件,然后引入vue, 实例化vue, 最后暴露给这个实例==> VueEvent.js * * 2.在要广播的地方引入实例 import VueEvent from '../model/VueEvent.js'...原创 2018-09-07 11:52:25 · 148 阅读 · 0 评论 -
Vue.js框架--路由(十六)
主要操作技能:官网https://router.vuejs.org/中文网https://router.vuejs.org/zh/guide/vue路由配置: 1.安装 cnpm install vue-router --save /npm install vue-router --save 2.引入并Vue.use(VueRouter) (在main....原创 2018-09-10 16:37:41 · 171 阅读 · 0 评论 -
Vue.js框架--axios请求数据(十二)
主要操作技能: vue本身是不支持发送ajax请求,需要通过其他库来实现的(比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios),或者也可以使用jquery来发送ajax请求; vue2.0版本已经不推荐vue-resurce了,官方推荐axios来发送, 先了解的是axios是一个基于Promise的HTTP请求客户...原创 2018-09-04 14:33:25 · 260 阅读 · 0 评论 -
Vue.js框架--插件vue-resource请求数据(十一)
主要操作技能: 1. 通过https://github.com/ 查找 vue-resource插件 2 .使用vue-resource请求数据的步骤:. 2.1)需要安装 vue-resource模块 ,注意加上--save npm install vue-resource --save/cnpm install vue-resourc...原创 2018-09-04 12:07:57 · 295 阅读 · 0 评论 -
Vue.js框架--组件的生命周期函数(十)
主要操作技能: 1. 生命周期函数的的定义: 就是组件挂载、以及组件更新、组件销毁的时候触发的一系列方法。也叫生命周期钩子 2. 生命周期图示: 编写代码: Lify.vue组件<template> <div id="life"> 生命周期函数的使用! -->{{msg}}<b...原创 2018-09-04 10:51:25 · 230 阅读 · 0 评论 -
Vue.js框架--双向数据绑定实现todolist简单应用(六)
主要操作技能: 1.双向数据绑定MVVM 2.使用数组,再用v-for循环数据 3.数组中的splice() 方法 要实现 http://www.todolist.cn这个效果!编写代码:<template> <div id="app"> <!--v-model绑定数据 -->...原创 2018-08-29 16:07:54 · 172 阅读 · 0 评论 -
Vue.js框架--自定义方法和事件的使用(五)
主要操作技能: 自定义方法的使用:有参数,无参数; 事件的使用 $event ===>e.srcElement.dataset 自定义属性:data- 如: data-aid ,data-uname 单击按钮,触发的事件编写代码:<template> <div id="app"> {{...原创 2018-08-29 14:36:48 · 708 阅读 · 0 评论 -
Vue.js框架--双向数据绑定,用ref获取dom节点(四)
主要操作技能: 双向数据绑定 mvvm: model view view model ref获得dom节点: ref="username" ==>显示数据this.$refs.username.value编写代码:<template> <div id="app"> <h2>{{msg}}</h2>&am原创 2018-08-29 14:11:22 · 798 阅读 · 0 评论 -
Vue.js框架--v-bind绑定title ,src, html,text,class,style(三)
主要操作技能: v-bind:title 鼠标移上的显示 v-bind:src 绑定图片路径 v-bind:html 绑定HTML文本和标签 v-bind:text 绑定文本 v-bind:class 绑定类样式 v-bind:style 动态绑定样式编写代码<template> <div id="a...原创 2018-08-26 18:26:18 · 4367 阅读 · 0 评论 -
Vue.js框架--绑定数据,对象,数组渲染数据(二)
HBuilder DEI 导入项目 ->文件|导入显示: 介绍App.vue根文件有三个文件组合在一起(1)模板文件<template> <!-- vue模板里面,所有的内容被一个根节点包含起来--> <div id="app"> </div></template> (2)JS..原创 2018-08-26 17:07:56 · 1631 阅读 · 0 评论 -
Vue.js框架--父组件传属性和方法给子组件、父组件传整个对象给子组件(十三)
主要操作技能: 1 .父组件调用子组件的时候,绑定动态属性 <v-header :title="title"></v-header> 2.在子组件中通过props来接受父组件传的数据 props: ['title','msg','run','home'] props: { //可以指定属性具体的数据类型...原创 2018-09-04 16:20:27 · 3896 阅读 · 0 评论 -
Vue.js框架--父组件与子组件交互数据(十四)
主要操作技能: 1、 父组件主动获取子组件的数据和方法 * 1>调用子组件的时候定义一个ref <v-header ref='header'></v-header> 2>在父组件中通过 * this.$refs.header.属性 * * th...原创 2018-09-04 17:28:29 · 147 阅读 · 0 评论 -
web本地存储localStorage与sessionStorage区别
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏...转载 2018-09-17 16:59:25 · 242 阅读 · 0 评论 -
Vue.js框架--路由并请求数据实现新闻列表及详情(十八)
主要操作技能:(1) 提供对外的接口新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488(2)安装请求数据cnpm ...原创 2018-09-16 16:06:37 · 3706 阅读 · 0 评论 -
Vue.js框架--动态路由Get传值(十七)
主要操作技能:官网https://router.vuejs.org/中文网https://router.vuejs.org/zh/guide/一、不同路由传值:动态路由1>配置路由 routes:[ //动态路径参数,以冒号开头 {path:'/detail/:aid',component:Detail} ]2>在对应的页面获取路由的值this....原创 2018-09-16 14:03:51 · 247 阅读 · 0 评论 -
Vue.js基础语法小结
Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化。 1 2 3 4 5 6 7 8 9 10 11 <!-- h...转载 2018-09-06 10:45:58 · 198 阅读 · 0 评论 -
Vue.js框架--创建单个组件和组件的使用(九)
主要操作技能: 1.创建单个组件 2.应用组件步骤 a)引入组件 import Home from './components/Home.vue'; b)挂载组件 components: { 'v-home': Home } c)在模板中使用组件 ...原创 2018-09-03 16:45:16 · 852 阅读 · 0 评论 -
Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的1.首先最明显的不同 就是调用的时候,methods要加上()2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理...转载 2018-09-05 17:18:52 · 191 阅读 · 0 评论 -
Vue.js框架--封装localStorage组件实现保存的历史记录来完善todolist(八)
主要操作技能: 1.生命周期函数 vue页面刷新就会触发的方法 mounted{} 2.封装localStorage组件 3.使用模块化, 导入引用 import storage from './model/storage.js' 编写代码:<template> <div id="app"> <...原创 2018-08-30 12:02:36 · 943 阅读 · 0 评论 -
Vue.js框架--双向数据绑定实现todolist(七)
主要操作技能: 1. MVVM :双向数据绑定: 复选框checked=true/false 2. 条件判断 v-if 复选框checked 3. 输入框中的键盘按下事件keydown=doAdd($event) 4. 用样式美化页面要实现 http://www.todolist.cn这个效果!编写代码:<templat...原创 2018-08-30 09:19:34 · 446 阅读 · 0 评论 -
Vue.js框架--请求网络接口中图片403异常(三十)
解决方法: 在index页面加上这个就行了<meta name="referrer" content="no-referrer" /> 效果: 转: https://www.jianshu.com/p/b12c5b4fd9df原创 2018-11-06 12:20:09 · 1971 阅读 · 2 评论