![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
yangsen159
这个作者很懒,什么都没留下…
展开
-
Vue教程17(methods,watch及computed的区别)
一、案例实现1.普通DOM操作实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-04-15 17:46:54 · 164 阅读 · 1 评论 -
Vue教程16(Router-嵌套)
Vue路由嵌套注意 通过children 配置的 path 中的路由地址 不能加 / 开头。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...原创 2020-04-15 17:12:54 · 143 阅读 · 0 评论 -
Vue教程15 (router传值)
Vue路由传参第一种方式实现路由传参的第一种方式是在 router-link 的 to 跳转地址后拼接通过工具调试,我们发现传递的数据实际保存在了 $route.query 对象中,那么我们就可以通过此对象来获取了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2020-04-15 15:14:02 · 224 阅读 · 0 评论 -
Vue教程14 (router)
路由router-基本使用后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,称...原创 2020-04-15 14:52:27 · 194 阅读 · 1 评论 -
Vue教程13(ref 和 $refs)
ref和$refs的使用refref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。$refs$refs 是一个对象,持有已注册过 ref 的所有的子组件。ref使用我们通过 ref 属性 获取值<h3 id="myh3" ref="myh...原创 2020-04-14 15:53:18 · 254 阅读 · 0 评论 -
Vue教程12(组件综合案例)
组件案例-评论列表实现效果组件添加好后,我们通过点击 发表评论 来添加内容到 评论列表中。实现的逻辑是1.通过点击 发表评论 触发点击事件 调用组件中methods中定义的方法2.在methods中定义的方法中 加载保存中 localStorage中的列表数据到list中3.将 录入的信息 添加到list中,然后将数据保存到 localStorage中4.调用父组件中的方法来刷新列表数...原创 2020-04-13 14:35:24 · 891 阅读 · 1 评论 -
Vue教程11 (父子组件传值)
Vue教程(组件-父子组件传值)父组件传值给子组件现在我们想要将Vue实例中的 msg 的值传递给 子组件,实现步骤如下1.父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用2.在子组件中有个 props 属性,该属性中保存的都是 父组件传递给子组件的数据,注意:props 中的数据,...原创 2020-04-13 14:19:56 · 128 阅读 · 0 评论 -
Vue教程10(组件-切换)
Vue 组件切换案例一、通过v-if控制实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-13 14:10:34 · 175 阅读 · 0 评论 -
Vue教程09(组件-data和methods)
Vue的data和methods属性在上篇文章的基础上我们继续来介绍下Vue组件中的data和methods属性,这两个属性和我们介绍的Vue实例中data和methods属性很类似,使用方式也是一样的data属性使用注意 data 属性 我们需要显示的返回一个对象,而不是返回一个具体的数据<!DOCTYPE html><html lang="en"><...原创 2020-04-13 14:02:26 · 553 阅读 · 0 评论 -
Vue教程08(组件)
Vue组件组件是可复用的 Vue 实例,且带有一个名字。1.通过extend方式我们先通过最原始的方式来实现看看,首先通过Vue.extends方法来定义一个全局组件。template 就是组件将来要展示的HTML内容 // 1.使用 Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ template: "<h3>这是个V...原创 2020-04-13 13:51:55 · 169 阅读 · 0 评论 -
Vue教程07(指令)
自定义指令1.效果实现定义全局指令:v-focus==> document.getElementById(‘search’).focus()// 定义全局的指令 v-focusVue.directive("focus",{ bind:function(el){ }, inserted:function(el){ el.focus() ...原创 2020-04-13 12:03:34 · 128 阅读 · 0 评论 -
Vue教程06(过滤器)
过滤器概念: Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示(" | ");分类:过滤器分为全局过滤器和局部过滤器(私有过滤器)<!DOCTYPE html><html lang="en"><...原创 2020-04-10 15:23:08 · 151 阅读 · 1 评论 -
Vue教程05(综合小案例)
小案例实现对表单数据的添加,删除和关键字查询的操作表单布局使用bootstrap来设置table,在vscode中安装bootstrap插件删除记录删除记录的实现逻辑:点击删除链接,获取要删除记录的id,然后调用数组的splice方法来移除记录,==注意:方法名称不要使用delete! ==数组常用的循环方法比较循环方法说明forEach不可终止循环so...原创 2020-04-07 17:22:21 · 669 阅读 · 1 评论 -
Vue教程04(v-if & v-for)
(v-if和v-for指令)v-if和v-show的作用有点类似 案例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2020-04-07 16:02:02 · 190 阅读 · 0 评论 -
Vue教程03 (v-model)
v-model指令介绍怎么实现动态的在M和V之间数据传递呢,本文我们就来介绍下v-model这个非常有用的指令v-bind 和 v-model 指令的使用前面的文章中我们已经介绍过了v-bind指令,该指令可以获取vue对象中的数据,但是这个指令只能实现 M 到V的数据传递,反过来实现不了,如下:<!DOCTYPE html><html lang="en">&...原创 2020-04-07 15:28:53 · 173 阅读 · 0 评论 -
Vue教程02
跑马灯效果案例本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果1.分析a.点击"加油"按钮绑定一个点击事件,使用v-on或者缩写:"@"b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;为了实现点击下按钮,自动截取的功能,需要把 2 步骤...原创 2020-04-07 15:03:45 · 174 阅读 · 0 评论 -
Vue教程01
基础入门1.第一个案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...原创 2020-04-07 14:42:57 · 176 阅读 · 0 评论 -
Vue入门篇
10分钟搭建Vue环境及安装脚手架国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。npm install -g cnpm –registry=https://registry.npm.taobao.org 安装webpackcnpm install webpack -g 安装全局vue-cli脚手架cnpm install vue-cli -g 创建...原创 2020-04-02 14:30:36 · 191 阅读 · 0 评论