原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app&quo

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods添加ref属性<div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho"></h

一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过

关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. directives 怎么用###不错的示例,可以参考下,点击访问 directives 在生命周期内用 export default { data() { return { }; }, directives:{ 'local-test':function(el,binding,vnode){ /**

目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写博客需要在第三方博客平台注册帐号,且需要第三方博客平台提供API接口.目前的有的博客平台均已关闭博客接口,所以无法使用Word来发布博客. 2.发布到博客或公众号平台的图片无法转载.由于所有博客平台,公众号平台(如微信)开启了图片防盗链功能,作者发布到这些平台上的图片则无法转载到其它的网站中,这限制

第一次 第二次 教程不会在博客园上写了,具体的看我官网博客吧,谢谢大家了 ================= 我是个有素质的程序员 艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹

1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'px'}" ref="refName"> <ul> <li>编辑部门</li> <li @click="append()">添加子部门</li> </ul> </div>

1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-model="active.name" required name="name" value=""> </div> 这样在vue中我们可以使用$ref来获取dom节点,进行一些dom的操作 下面示例:控制input输入框的文字个数 n

0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目,所以SSR至关重要.虽然跟本文要讲的登录注册没有什么关系,但是文章如果用axios来异步获取的话,那么搜索引擎是抓不到任何数据的.用nuxt.js可以说是为了整个项目考虑. 第二点就是省事,Nuxt.js的项目条理非常清晰,有非常方便的路由和模板功能,而且方便前端和服务端进行沟通.而且自动支持es

感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前后端分离,对于博客类系统seo肯定很重要,索性就自己动手写了这个项目,其中也遇到了不少问题, 因为基于服务端渲染的项目不多,自己能力也有限,所以用了好长时间.这里特别感谢@lincenying,提供了登录功能的解决思路,也是我在开发过程中遇到最难解决的问题,本项目基于vue-hackernews-2

ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法. 3.如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意: 1.ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成.比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用. 2.如果ref 是循环出

这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功能特点 一个基本的博客内容管理器功能,如发布并管理文章等 每个用户可以通过注册拥有自己的博客 支持markdown语法编辑 支持代码高亮 可以管理博客页面的链接 博客页面对移动端适配优化 账户管理(修改密码) 页面足够大气.酷炫嘿 二.用到的技术和实现思路: 2.1 前端:Vue全家桶 Vue.js

1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}); 2.this.$router.push({path: '/order/page1',query:{ id:'2'}}); 3.this.$router.push({name: '/order/page2',params:{ id:'6'}}); 第一种不传参直接跳转到某一个页面,第二种,第三种传

1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive>  <router-view v-if="$route.meta.keep_alive"&

在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的index.js文件, 这样,我们准备工作就做好了,那么在.vue文件中,我们就可以调用啦: 大功告成,其实很好理解的!

指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 例如: <p v-if="seen">现在你看到我了</p> 如上所示:其中,v-是Vue的标识,if是指令ID,yes是expression.yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示.

1.dajngo ORM查询中select_related的作用 select_related()方法一次性的把数据库关联的对象都查询出来放入对象中,再次查询时就不需要再连接数据库,节省了后面查询数据库的次数和时间.主要用于外键查询. blogobj = Blog.objects.filter(site=site).select_related('user').first() 2.博客主题的定制 将各个模块的css样式固定,然后通过.css文件导入,可以在数据里面设置.css文件的名字在模板中通

这是笔者第一次在博客园里发表文章,也同样是第一次来写关于OI的一些想法,此篇的主题是想总体对日后的博客有具体的规划. 首先,笔者创办博客并发表观点于看法的目的是记录自己对于题目或竞赛的观念,主要以题解.比赛技巧.OI模板和一些对OI与人生的想法为主,与诸位读者共同进步. 其次,我所发表的题解的题目来源主要是洛谷与李煜东先生的<算法竞赛进阶指南>中的题目,有时假期集训时会将老师所讲授的其他如POJ.BZOJ.CF上的题目, 鉴于笔者能力有限,有时对于题目的理解并不透彻,但只要一发现错误与纰漏定将

0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.后端搭建 1.1项目结构 首先看一下后端的server目录 挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,modules就是操作数据库的mongoose模型. config.js是为了方便修改数据库数据. interface就是接口文件夹,utils就是工具的意思呗,接口需要用到的axios和账号集权的passport都在这里修改(passport是啥待会儿再细说). 和utils同级的就是users.js

百篇博客系列篇.本篇为: v58.xx 鸿蒙内核源码分析(环境脚本篇) | 编译鸿蒙原来如此简单 | 51.c.h.o 本篇用两个脚本完成鸿蒙(L1)的编译环境安装/源码下载/编译过程,让编译,调试鸿蒙从此变的简单. 编译构建相关篇为: v50.xx 鸿蒙内核源码分析(编译环境篇) | 编译鸿蒙防掉坑指南 | 51.c.h.o v57.xx 鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程 | 51.c.h.o v58.xx 鸿蒙内核源码分析(环境脚本篇) | 编译鸿蒙原来如此简单 |

指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签的属性中 {{}} & v-text & v-html 在视图显示数据 {{}} 和 v-text 只能显示普通文本 {{}} 里面还可以进行一些简单的运算,或是三目表达式,但是不要写太复杂的逻辑,比如if判断,循环不支持 v-html 它可以将模型中字符串中带有的html标签,解析出来 v-