Vue
LuckyBrown17
这个作者很懒,什么都没留下…
展开
-
你真的知道组件中的v-model吗?
你真的知道组件中的v-model吗? 目录v-model的神奇你好奇input事件是什么?组件中的v-model组件的v-model 生效原则给组件绑定v-model v-model的神奇html<div id="app"> <input v-model="poin"> {{ poin }}</div>js...转载 2019-04-10 11:29:41 · 713 阅读 · 0 评论 -
Vue的todolist实例 Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化
双向绑定App.vue<template> <div id="app"> <input type="text" v-model="todo"> <button @click="doAdd()">+增加</button> <ul> <li v-for="(item,key)...原创 2019-03-29 09:34:02 · 461 阅读 · 1 评论 -
axios的简单教程与实例
首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js是http客户端。axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。特点:支持浏览器和node.js 支持promise ...原创 2019-03-29 09:48:33 · 2946 阅读 · 0 评论 -
Vue 父子组件传值与验证props
实例:App.vue<template> <div id="app"> <h1>{{ msg }}</h1> <!-- 3.在模板中使用 --> <v-home></v-home> <br> </div></template>...原创 2019-03-29 09:56:37 · 1143 阅读 · 0 评论 -
vue之父子组件间通信实例讲解(props、$ref 、 $emit )
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示...转载 2019-03-29 10:16:26 · 260 阅读 · 0 评论 -
vue非父子组件传值完整
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值)方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件传值下图这种情况的组件间传值(父子组件间隔代传值,也是非父子组件间传值)方法:将第二层作为...原创 2019-04-07 20:31:57 · 1358 阅读 · 0 评论 -
vue2 ref的用法,简单易懂——vue2子组件索引
官网上的说明1.了解Vue中的$refs在Vue中是怎么访问到DOM元素的 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div id="app"> ...原创 2019-04-09 10:24:33 · 2444 阅读 · 0 评论 -
vueJs的简单入门以及基础语法
1)vue的基础语法介绍vue的下载以及是什么这里就不说了,直接看vue官网简单的说 这篇帖子只是把语法归类了vue的api vue官网APIimage.png1-1基本数据绑定<div id="app"> {{ msg }}</div>//scriptnew Vue({ el:"#app",//代表vue的范围 da...转载 2019-04-09 10:28:25 · 280 阅读 · 0 评论 -
Vue中watch的简单应用
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。下面写两个demo,参考demo来了解一下demo1<template> <div> <el-input v-model="demo"></el-input&...转载 2019-04-09 10:43:04 · 161 阅读 · 0 评论 -
Vue 生命周期函数 组件挂载、组件更新、组件销毁触发的一系列方法
生命周期先上图什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接...原创 2019-03-29 09:22:26 · 18519 阅读 · 0 评论 -
vue组件的引入
App.vue<template> <div id="app"> <h1>{{ msg }}</h1> <!-- 3.在模板中使用 --> <v-home></v-home> <br> <hr> <v-news></v...原创 2019-03-29 09:11:51 · 350 阅读 · 0 评论 -
Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> {{msg}} <br> <button v-on:click="run1()">执行是事件的第一种方法</button> <br> <button @click="run2()">执行是事件的第二种方法</but...原创 2019-03-29 09:07:35 · 770 阅读 · 0 评论 -
ES6中的箭头函数的定义和调用方式
基本用法:ES6中允许使用“箭头”(=>)定义函数var f = v => v;上面代码相当于:var f = function( v ) { return v;}根据箭头函数有参数和无参数来区分1、无参数的箭头函数var f = () => 5;等同于var f = function() { return 5};2、有参数...转载 2019-03-28 09:00:18 · 3508 阅读 · 0 评论 -
Vue与ref属性与refs
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册实例:这里为了在create的时候引用DOM元素...转载 2019-03-28 11:26:06 · 411 阅读 · 0 评论 -
Vuex的基本使用
Vuex 是一个专为 Vue.js 设计的状态管理模式vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时,会需要:多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。这需要你去学习下,vue编码中多个组件之间的通讯的做法。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同...原创 2019-04-08 09:28:10 · 178 阅读 · 0 评论 -
vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染01
├── index.html 入口页面├── build 构建脚本目录│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├─...原创 2019-03-29 08:55:24 · 125 阅读 · 0 评论 -
Vue绑定属性 绑定Class 绑定style
<template> <div id="app"> <h1>{{ msg }}</h1> <br> <!-- 绑定属性 --> <div v-bind:title="title">鼠标移动过来</div> <!-- 在tamplate中引入本地图...原创 2019-03-29 09:00:07 · 299 阅读 · 0 评论 -
Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
<template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="msg" /> <button v-on:click="getMsg()">获取表单里面的数据</button> <but...原创 2019-03-29 09:02:18 · 371 阅读 · 0 评论 -
关于vue中的$符号总结一下
vue的实例属性和方法除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$,以便与用户定义的属性区分开来。例如: var data = { a: 1 }var vm = new Vue({ el: '#example', data: data})vm.$data === data // => truevm.$el === doc...转载 2019-04-09 10:43:48 · 36658 阅读 · 0 评论