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 · 244 阅读 · 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 · 194 阅读 · 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 · 292 阅读 · 0 评论 -
Vue教程14 (router)
路由router-基本使用后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称...原创 2020-04-15 14:52:27 · 274 阅读 · 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 · 319 阅读 · 0 评论 -
Vue教程12(组件综合案例)
组件案例-评论列表实现效果组件添加好后，我们通过点击 发表评论 来添加内容到 评论列表中。实现的逻辑是1.通过点击 发表评论 触发点击事件 调用组件中methods中定义的方法2.在methods中定义的方法中 加载保存中 localStorage中的列表数据到list中3.将 录入的信息 添加到list中，然后将数据保存到 localStorage中4.调用父组件中的方法来刷新列表数...原创 2020-04-13 14:35:24 · 968 阅读 · 1 评论 -
Vue教程11 (父子组件传值)
Vue教程(组件-父子组件传值)父组件传值给子组件现在我们想要将Vue实例中的 msg 的值传递给 子组件，实现步骤如下1.父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用2.在子组件中有个 props 属性，该属性中保存的都是 父组件传递给子组件的数据，注意：props 中的数据，...原创 2020-04-13 14:19:56 · 175 阅读 · 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 · 236 阅读 · 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 · 651 阅读 · 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 · 219 阅读 · 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 · 181 阅读 · 0 评论 -
Vue教程06(过滤器)
过滤器概念： Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(" | ")；分类：过滤器分为全局过滤器和局部过滤器(私有过滤器)<!DOCTYPE html><html lang="en"><...原创 2020-04-10 15:23:08 · 215 阅读 · 1 评论 -
Vue教程05(综合小案例)
小案例实现对表单数据的添加，删除和关键字查询的操作表单布局使用bootstrap来设置table，在vscode中安装bootstrap插件删除记录删除记录的实现逻辑:点击删除链接，获取要删除记录的id，然后调用数组的splice方法来移除记录，==注意：方法名称不要使用delete! ==数组常用的循环方法比较循环方法说明forEach不可终止循环so...原创 2020-04-07 17:22:21 · 743 阅读 · 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 · 270 阅读 · 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 · 222 阅读 · 0 评论 -
Vue教程02
跑马灯效果案例本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果1.分析a.点击"加油"按钮绑定一个点击事件，使用v-on或者缩写:"@"b.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；为了实现点击下按钮，自动截取的功能，需要把 2 步骤...原创 2020-04-07 15:03:45 · 217 阅读 · 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 · 253 阅读 · 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 · 262 阅读 · 0 评论