Vue.js
xiaoqiu_net
学无先后,达者为师。
展开
-
Vue.js开发环境搭建-工具安装(vue-cli)
进入github上可以看到vue.js发布的开发环境 vue-cli使用npm命令安装vue-cli,具体安装方法见github具体介绍。这里npm安装会比较慢,因为github访问的是国外的服务器。国内也有一个npm对应的淘宝镜像服务器,他们自动去同步npm服务器上的文件,如果我们访问国内的服务器进行安装下载,速度就会快很多了。推荐使用cnpm。安装好cn原创 2017-03-25 20:15:30 · 1141 阅读 · 0 评论 -
Vue.js开发环境搭建-新建项目
安装好Vue.js脚手架工具(vue-cli)后,根据Vue.js模板新建一个项目.1.使用vue指令-vue list 获取官方模板,官方提供多种模板.2.使用vue init 根据相应的模板来建立vue项目假设根据webpack模板来新建,就是vue init webpack,根据一系列提示在当前目录下建立vue项目。3.项目新建后可以看到对应的vue项目的目录结构,参考如原创 2017-03-25 20:51:04 · 520 阅读 · 0 评论 -
vue.js删除动态绑定的radio的指定项
上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除。视图代码 view:"" + "{{option.text}}" +"",数据绑定model.options:options: [{ id: 1, text: '选项1', checked: false }, { id: 2, text: '选项2', checked: false }原创 2017-06-02 08:57:52 · 3231 阅读 · 1 评论 -
vue.js选中动态绑定的radio的指定项
上一文,介绍了vue.js动态添加、删除绑定的radio选项,本文介绍如何选中radio的某一项绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是:不管 你的checked属性值是true或者false,他都会选中。选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用chec原创 2017-06-02 09:23:30 · 56844 阅读 · 5 评论 -
vue.js给动态绑定的radio列表做批量编辑
每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中:vm.options.push({ id: "", text: "新选项", checked: false });现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器.textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行原创 2017-06-07 14:53:06 · 5006 阅读 · 0 评论 -
vue.js操作select
vue获取当前select选中的value和text原创 2017-06-06 15:16:04 · 23921 阅读 · 1 评论 -
js缓存变量,减少DOM操作开销
DOM是页面元素对象的体现,DOM是个树,每个DOM节点和其他节点有子父、兄弟关系,每次寻找的时候,都会一层层的去寻找,对于相同且已经查找过的节点,每次都去重新找,如果节点层级关系多了,性能就很低了。每次$()都会创建一个新的DOM对象。 在一个事件/区域内的this对象,就是代表事件调用本对象。如果每次使用到再重新去取,显然多余了。如果使用该对象频率高,应该吧变量缓存起来。不要再每次$(t原创 2017-06-14 17:22:02 · 1508 阅读 · 0 评论 -
vue.js移动数组位置,同时更新视图
使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作。需要对options里面数组的位置进行交换,通常是这样来写:假设向前移动一个:var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引。var tempOption = this.options[index-1]; //存储前一个原创 2017-09-12 16:52:01 · 7474 阅读 · 0 评论 -
js去掉html字符串中的所有标签元素,结合vue表达式使用
1.没去掉之前,绑定的代码是:显示的效果是将对应的html元素也显示出来了,这里我只需要他的纯文本就好了, 不含任何格式(html代码):2.去掉html字符串中的所有标签元素js代码:function delHtmlTag(str){ return str.replace(/]+>/g,"");}3.vue绑定更改:4.只显示纯文本原创 2017-09-28 18:15:51 · 8344 阅读 · 3 评论