用了Vue也一年多了,虽然对大部分内容都比较熟悉,但有些用法可能会起到意想不到的作用. 今天在做一个关于抽奖的需求,要求是每次点击编辑按钮显示编辑框,要求自动聚焦. 一开始想到了autofocus属性,结果发现每次只有刷新页面的第一次会生效,之后无论怎么点击都不能自动聚焦,于是网上查了很多资料, 最终问题指向了vue的指令,因此先回过头看看vue的指令部分. vue指令 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代…

1.方法 在vue模板里函数被定义为方法来使用,将函数放在methods对象里,作为一个属性,就可以在模板里使用它 this:在方法中this指向该方法所属的组件,可以使用this方文档data对象的属性和其他方法.this.属性/方法名  即可 2.计算属性 计算属性介于data的对象和方法之间,可以像访问data对象一样访问,但需要函数的方式来定义它   计算属性会被缓存,只会执行一次,之后的每次调用都用的是被缓存的值.只有依赖值发生变化时代码才会被再次执行 这种方式可以确保代码只有在必要的…

①.组件的注册 全局注册: // 注册 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 创建根实例 new Vue({ el: '#example' }) 局部注册: var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: {…

一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段queryset对象  所以说related_name='coursedetail_by' 3 Vue生命周期钩子可以直接发axios 二 Vue样式用elemen(jq用bootstap) 网站http://element-cn.eleme.io/#/zh-CN/guide/design 1 em…

npm install axios sass-loader vue-infinite-scroll vue-router vuex express superagent --save --save 和 --save-dev 的区别: --save 安装的插件位于 dependencies 之下 --save-dev 安装的插件位于 devDependencies 之下 安装 vue-router $ npm install vue-router --save-dev 安装 mint-ui $ n…

vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue实例或组件的directives属性,或者使用vue.directive()注册一个全局指令.传入指令的名字以及包含钩子函数的对象,这些钩子函数会在设置了该指令的元素的生命周期的各个阶段运行. <div v-blink>闪烁的盒子</div> Vue.directive('blink'…

当了解到尤大大的vue的时候,就很想在项目里用一下,不过当用了vue cli 创建了一个脚手架之后,感觉现有的项目改造难度太大了,毕竟原来是JQ的.这个项目已经上线,基本功能也完成了,客户提出来后台对项目需要有时间,省市,进度,提交时间的筛选,还有项目名的筛选.后台的同事已经沉溺于其他项目,再拉他回来写api有点麻烦. 于是,我决定把vue嵌入到现有的项目中,并不使用npm,webpack,gulp等家伙,也就不用配置啦,就像以前使用jquery插件一样. 这样的话就很简单了 <script s…

陆陆续续也用vue开发或重构了不少项目,在这期间遇到不少的坑,也尝试过优化.在此记录一下,想到一点算一点吧: 一.尽可能的减少watcher的数量   当监听数据是一个对象的时候,最好具体到监听对象的属性: 二.渲染 1.可以用懒加载.分页.滚动加载或者tab方式去展示其他内容,减少每次渲染的数量:     2.结合v-if,异步显示dom结构,减少不必要组件的加载: 3.hybird开发的app,可通过app框架预加载的方式,将单页应用的资源提前缓存. 三.key值 给列表渲染加上唯一的key…

1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称,用法如下: <component :is="view"></component> 示例如下: Example.vue: <template> <div id="app"> <ul class="tabs&q…

1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制DOM元素是否插入,v-show是控制css的display属性 (3)v-if适合隐藏尚未加载的内容或切换显示与隐藏频率较低的地方,v-show反之; 此外还有两个条件语句和v-if有关:v-else-if ,v-else <div v-if="state==='loading'"…