![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE学习
鱿小鱼儿
随遇而安
展开
-
Vue初级入门学习大纲
Vue初级入门学习大纲1.Vue的介绍 Vue环境搭建 运行项目2. Vue目录结构分析 绑定数据 绑定对象 循环数组渲染数据3. Vue绑定属性 绑定Html 绑定class 绑定style4. Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点5. Vue事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象6. Vue 事件结...原创 2019-07-09 11:29:36 · 265 阅读 · 0 评论 -
12.Vue vue-resource 请求数据
vue中请求数据有三种方式a.vue-resourceb.axiosc.fetch-jsonpvue是官方提供的插件用法如下:(1)安装模块npm install vue-resource --save 或者 cnpm install vue-resource --save–save操作时为了将安装的vue-resource写入package.json文件中,要不然将项目别人的时候...原创 2019-07-19 15:42:23 · 95 阅读 · 0 评论 -
13.Axios fetchJsonp请求数据
内容:Axios请求数据,fetchJsonp请求数据一、Axios请求数据由于Axios是第三方库用法和vue-resource有点区别(1)安装:npm install axios --save 或者 cnpm install axios --save—save是为了将安装的信息写入package.json文件中,方便别人使用项目时不会出问题(2)引入Axios是在哪个文件...原创 2019-07-19 15:52:05 · 123 阅读 · 0 评论 -
16.非父子组件之间得传值
内容:非父子组件之间得传值非父子组件之间得传值我们要用到得知识点是事件广播和广播事件监听,对于非父子组件之间得传值,我们主要分为以下几部:(1)新建广播事件文件;在src/model文件夹下添加VueEvent.js文件,并在VueEvent.js文件中引入vue实例,实例化vue实例,并暴露实例; import Vue from 'vue' new VueEvent = n...原创 2019-07-25 13:57:31 · 94 阅读 · 0 评论 -
17.Vue中的路由 以及默认路由跳转
内容:vue中得路由及默认路由跳转,路由要用到vue-router,所以首先需要安装vue-router安装插件:npm install vue-router --save / cnpm install vue-router --save引入安装得vue-router,并调用同vue-resource一样需要在main.jsz中引入,并用Vue.use()调用import VueRou...原创 2019-07-25 14:13:50 · 331 阅读 · 0 评论 -
14.Vue父组件给子组件传值
父组建可以给子组件传属性,传方法还可以将整个父组件传给子组件一、父组件给子组件传值:(1)父组件传值:需要再调用时给子组件传递属性写法为: <v-body v-bind:msg="msg"></v-body>(2)子组件接收:需要在data同级定义props数组,父组件传几个属性,这就接收几个属性 props:['msg'](3)调用:属性值可以直接在子组...原创 2019-07-22 11:17:01 · 300 阅读 · 2 评论 -
15.父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
一、父组件主动获取子组件的数据和方法父组件主动获取子组件的数据和方法,需要在调用的时候给子组件添加ref属性,通过ref属性获取子组件的属性和方法; 1.调用子组件的时候顶一个ref * <v-body ref='body'></v-body> * 2.在父组件里调用 * this.$ref.body.属性 * this.$ref.body.方法...原创 2019-07-22 13:44:18 · 188 阅读 · 0 评论 -
18.vue动态路由传值和get传值
内容:动态路由传值和get传值一、动态路由传值(1)新建并引入组件:新建需要动态路由传值得组件,并再main.js中引入import News from './components/News.vue'import content from './components/content.vue'(2)在路由静态变量中添加跳转路径以及对应得组件名称,添加格式为 {path:'/conten...原创 2019-07-26 12:09:56 · 218 阅读 · 0 评论 -
18-2.Vue路由结合请求数据 实现新闻列表 新闻详情数据渲染
内容:结合上一章得动态路由,实现从接口获取新闻列表以及新闻详情数据并在页面渲染展示,请求数据用vue-resource插件;代码示例列表页:Home.vue<template> <div>我是HOME组件 <ul> <li v-for="(item,key) in list"> ...原创 2019-07-26 13:38:54 · 445 阅读 · 0 评论 -
11 Vue中组件的生命周期函数
生命周期函数就是vue实例在某一个时间点会自动执行的函数生命周期函数在vue中使用如下图:方法有:created,beforecreate,mounted,beforemount,updated,beforeupdate,destroed,beforedestroy;用法是和mathods同级;第一个执行的时beforecreate方法,创建vue实例之前执行的方法,在vue中会先执行这个...原创 2019-07-19 15:31:37 · 184 阅读 · 0 评论 -
10 Vue中创建单文件组件 注册组件 以及组件的使用
内容:vue中组件的使用(1)新建组件文件在vue中的src文件夹中新建名为components的文件夹,这个文件夹是专门用来存放组件的,新建Home.vue的组件文件,组件文件和app.vue的写法结构都是一样的,有<template></template><script></script><style></style&...原创 2019-07-19 15:08:02 · 239 阅读 · 0 评论 -
1.Vue环境搭建
node.js 安装从官网上https://nodejs.org/en/download/,下载对应版本得node.js文件,我下载得是node-v10.16.0-x64.msi,安装完成后在命令行验证安装node.js主要是为了用包管理器npm, Node.js 的包管理器 npm,是全球最大的开源库生态系统。在命令行输入npm -v检测npm是否可用...原创 2019-07-09 23:12:04 · 101 阅读 · 0 评论 -
4.Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
一、vue中的双向数据绑定双向数据绑定 mvvm,mvvm是前端开发思想,主要是把前端每个页面分成了M,v,vm;vm是中间的调度者分割了M和V,每当V层想要获取或保存数据的时候都要经过vm层做中间的处理,m是model保存着每个页面的数据,v是view是每个页面的html结构,双向数据绑定是model改变影响view,view改变影响model,双向数据绑定必须在表单上用;view层值...原创 2019-07-14 01:34:21 · 144 阅读 · 0 评论 -
5. Vue事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象
一、Vue事件Vue中方法绑定用v-on或者@;方法需要在script中的export default中添加和data同级的methods节点,方法定义需要写在methods中;(1)单个事件绑定效果如下图:(1)多个事件绑定效果图如下:二、获取数据...原创 2019-07-14 03:02:16 · 346 阅读 · 0 评论 -
2.Vue目录结构分析 绑定数据 绑定对象 循环数组渲染数据
一、安装编译软件:这里用的编译软件是vscode;二、Vue目录结构分析这里以上一篇中的第一种创建项目方法创建的文件夹为例:buildbuild 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件、输出文件、使用的模块等;configconfig 文件夹主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api...原创 2019-07-11 11:02:42 · 126 阅读 · 0 评论 -
3.Vue绑定属性 绑定Html 绑定class 绑定style
一、vue绑定属性vue中通过v-bind将数据绑定到属性上,例如:给div得title属性绑定数据title之后,div下所有元素用鼠标放上去得时候都会出现"绑定属性测试"得字样;效果图如下:...原创 2019-07-12 00:18:26 · 334 阅读 · 0 评论 -
6. Vue 事件结合双向数据绑定实现todolist
todolist的效果实现需要用到之前几节课学到的只是,首先是数据的双向绑定v-model,循环v-for,事件绑定v-click,还有判断v-if,还有一个keydown方法的应用;代码实例<template> <div id="app"> <input type="text" v-model='todol' ref="todo"/> ...原创 2019-07-19 13:55:48 · 108 阅读 · 0 评论 -
09 Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化
内容:实现页面的数据在刷新后还保存在页面中;(1)h5中的localstorage方法实现缓存数据方法localStorage(h5的方法),每次增加和删除都需要缓存,setItem没法直接设置对象,必须先把对象转化为json对象,在转化为json字符串//封装操作localstorage本地存储的方法 模块化的文件/*localStorage.setItem("key", "val...原创 2019-07-19 14:47:41 · 190 阅读 · 1 评论 -
"router-link"的属性
在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导航里面结构是(ul>li>a),router-link可以渲染为任何元素,这里可以直接渲染成li标签,同样能实...转载 2019-08-02 10:23:41 · 105 阅读 · 0 评论