VueJs开发入门-程序员宅基地

技术标签: vue  

之所以选择vuejs,除了vuejs比较轻量外,同时还有vuejs的语法结构,非常简单,明了,很容易学习。
vuejs主要负责数据渲染的部分,和一些事件,在项目中还可以完美插入Jepto框架。
vuejs 2.0版本
公司开发项目为公众号商城。用vue来写数据渲染方面和开发公共组件十分方便。
使用npm安装: npm install vue
当然你也可以在github上clone最新的版本并作为单文件引入,或者使用CDN:
[v-cloak] { display: none }
Vue的一些基本用法,这里可以参考文档 http://www.open- open.com/lib/view/open1447060624960.html

数据渲染:
v-bind -----用来绑定元素属性的。在vue里面,元素的属性绑定,要用v-bind.
<a v-bind:src="item.src"></a>
v-for ------ 从官方文档里面已经了解,它可以把数组或json循环把数据渲染到页面。同时v-for还可以用filter来进行筛选。
<tr v-for="item in books ">
<td>{ {item.id}}</td>
<td>{ {item.name}}</td>
<td>{ {item.author}}</td>
<td>{ {item.price}}</td>
</tr>
v-for 还可以得到渲染元素的Index:
<tr v-for = "(item,index) in book">
同时在vue里面 { {item.split("")}}也是可以的,可以在{ {}}里面对数据进行js操作。
v-if ------ 判断元素是否渲染到页面上 值为true or false
v-show -----判断元素是否显示到页面上 值为true or false
v-if 和 v-show 可以在里面进行数据操作的判断:
<a v-if="item.num+1>3"></a>
v-model
v-model可用于一些表单元素,常见的input,checkbox,radio,select
v-model="selected"
筛选:
{ {item|filter}}其中filter可以是vue自带的筛选器,也可以用户自定义筛选器,如:
Vue.filter("goZero",function(value){
return 0;
})
{ {item|goZero}} 就是在页面显示出“0”.
注意:filter只能在{ {}}里面用 ,v-bind 绑定属性里面不能用,不过可以用折中的方法
在v-bind里面可以写一个函数:
<a v-bind:src="goZero(item)"></a>
然后在Vue的methods方法里面写到:
goZero:function(value){
retrun 0;
}
这样就可以实现在属性里面进行筛选.....

显示bug:
如果你比较细心的话,在数据还未加载完时是会有闪烁的情况出现,解决方法也很简单,使用v-cloak,然后定义css:
[v-cloak] { display: none }

v-on指令(vue事件):
v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:
<a v-on:click="do">
var vm = new Vue({  
el: '#app',  
data: {  
ms: 'Vue.js!'  
},  
// 在 `methods` 对象中定义方法  
methods: {  
go: function() {  
alert(this.ms)  
},  
}  
})
这就是一个点击事件。
同时里面可以带参数。<a v-on:click="do(ms,$event)">
var vm = new Vue({  
el: '#app',  
data: {  
ms: 'Vue.js!'  
},  
// 在 `methods` 对象中定义方法  
methods: {  
go: function(temp,e) {  
alert(temp);  
},  
}  
})
其中ms是在js中或者Vue中定义的变量,e是这个元素 是原生JS的event;Vue里面需要在参数里面加$event;

其中事件还有一些用法,例:
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

v-bind和v-on的缩写:
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。
v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。
<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{ { n + 1 }}</a>
<!--缩写语法--
><a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{ { n + 1 }}</a>
<!--完整语法--><button v-on:click="greet">Greet</button>
<!--缩写语法--><button @click="greet">Greet</button>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_24073885/article/details/60141432

智能推荐

动态版通讯录_动态通讯录-程序员宅基地

文章浏览阅读278次,点赞15次,收藏7次。目录一.通讯录的准备工作二.通讯录的实现步骤创建主菜单存放个人信息(静态)存放个人信息(动态)增加联系人(静态)增加联系人(动态)显示联系人删除指定的联系人查找指定联系人修改指定的联系人销毁通讯录(动态)三.源代码(动态)一.通讯录的准备工作首先我们要想一想开辟一个通讯录我们需要做哪些工作。要存放一些人的基本信息(名字+性别+年龄+电话+住址),增加联系人,删除联系人,修改联系人,查找联系人,最后要存入文档以便找不到。这里我们..._动态通讯录

win10和ubuntu的pyCharm配置python解释器_ubuntu conda环境文件夹中没有python.exe-程序员宅基地

文章浏览阅读2.5k次。ubuntu配置python3.6文件---新建项目---选择需要的python版本(基本解释器python3.6)创建---新建Python文件test01.py打开设置添加系统Python解释器,点齿轮--添加--系统解释器 选择python3 点击确定点击添加配置点击 “+” -> Python选定脚本路径点击确定,配置完成..._ubuntu conda环境文件夹中没有python.exe

StringUtils工具类常用方法汇总(判空、转换、移除、替换、反转)_stringutils.remove-程序员宅基地

文章浏览阅读4.9k次,点赞8次,收藏26次。Apache commons lang3包下的StringUtils工具类中封装了一些字符串操作的方法,非常实用,使用起来也非常方便。最近自己也经常在项目中使用到了里面的一些方法,在这里将常用的方法总结了一下,方便以后查阅,大家有兴趣也可以看一下。  首先需要说明的一点是,StringUtils类在操作字符串时,即使操作的为null值也是安全的,不会报NullPointerException,这一..._stringutils.remove

html如何做点击按钮左侧展开收起,如何使用CSS3 实现侧边栏展开收起动画-程序员宅基地

文章浏览阅读1.2k次。@keyframes规则用于创建动画。@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:规定动画的名称规定动画的时长animationanimation 属性是一个简写属性,用于设置动画属性:animation-..._keyframes向左展开动画

python游戏程序代码大全_童年游戏,Python一行代码就能实现!-程序员宅基地

文章浏览阅读2.5k次。大家好,儿童节到了,虽然秃头程序员没有头发,但是童心还是一直都在的,今天就分享一个私藏的GitHub项目——free-python-games,一行代码就能进入使用Python开发的小游戏快乐玩耍!安装与使用安装当然也很简单一行代码就可以pip install freegames由于该项目中的所有游戏均是基于Python内置模块Turtle制作,所以没有太多依赖,安装不会有困难。安装完之后我们可以..._童年游戏代码大全

Eclipse中项目Src看不到.Java文件_eclipse导入的项目src下没java-程序员宅基地

文章浏览阅读5.2k次。Eclipse中项目Src看不到.Java文件需要从Java切换到java EE 工作空间_eclipse导入的项目src下没java

随便推点

YOLOV3实战4:Darknet中cfg文件说明和理解_yolo cfg-程序员宅基地

文章浏览阅读4.7w次,点赞89次,收藏435次。大家好,我是小p,从今天起,将逐渐从源码角度解析Darknet,欢迎加入对象检测群813221712讨论和交流,进群请看群公告!今天将要说明的是Darknet中的cfg文件,废话少说,直接干!(以cfg/yolov3.cfg为例,其它类似)[net] ★ [xxx]开始的行表示网络的一层,其后的内容为该层的参数配置,[net]为特殊的层,配置整个网..._yolo cfg

python生成唯一Id的几种方法_python并发生成唯一数据-程序员宅基地

文章浏览阅读2w次,点赞2次,收藏4次。# coding:utf-8import randomdef createRandomString(len): print ('wet'.center(10,'*')) raw = "" range1 = range(58, 65) # between 0~9 and A~Z range2 = range(91, 97) # between A~Z and a~..._python并发生成唯一数据

Maven1-配置及创建JavaSE项目_maven 创建javase工程-程序员宅基地

文章浏览阅读431次。一、Maven简介项目构建工具(不只是管理jar包),项目设计和编码由程序员来做,它做不了;而编译,运行,测试,打包,部署,jar管理它都能做Apache提供,Java开发的,运行Maven要有基本的java开发工具包Maven仓库:存储jar包本地仓库:当前本地电脑远程仓库:局域网中的服务器中央仓库:远程服务器有远程仓库:本地连接远程,远程仓库中有就下载到本地,没有就去连中央仓库,中央仓库下载到远程,远程再下载到本地,适合团队开发,远程仓库可以连接多个本地仓库,所以很多公_maven 创建javase工程

【转载】FPGA配置方式_quartus烧录-程序员宅基地

文章浏览阅读6.3k次,点赞2次,收藏31次。【概要】FPGA配置方式首先介绍下AS、PS、JTAG三种模式的区别。AS模式: 主动串行配置模式。将.pof文件烧写到flash(掉电不丢失)芯片,FPGA器件每次上电时,作为主控制器从配置器件flash(EPCS)主动读取程序文件并存放至FPGA内部的配置存储器(configure RAM),实现逻辑运作,该方法适用于不需要经常升级的场合,一次性读取程序文件;PS..._quartus烧录

GitHub集成Circle CI(附 Circle CI 配置示例文件)_circleci building status github-程序员宅基地

文章浏览阅读1.6k次。文章目录GitHub 集成Circle CICI(持续集成) 简单解释CI 工具Circle的使用将GitHub项目授权给 Circle CI书写 config.yml文件测试 Circle CI 配置文件是否生效备注写在最后GitHub 集成Circle CICI(持续集成) 简单解释CI 即 Continuous Integration. 当代码提交上来有变动的时候,在merge之前自动进行一些流程,如:代码风格检查、单元测试是否通过等。当被merge之后,又会自动进行一些流程,如:自动打包、_circleci building status github

matlab题目如何在一个圆形区域进行三维作图_meshgrid ,边界是圆-程序员宅基地

文章浏览阅读3.2k次,点赞3次,收藏7次。不废话上图[r,t]=meshgrid(0:0.1:2,0:0.02:2*pi);x=r.*cos(t);y=r.*sin(t);z=x.^2+y.^2;mesh(x,y,z)其实在数学上使用了一个圆的参数方程来实现绘制区域为圆形的效果在这个区域上面是一个碗状图形_meshgrid ,边界是圆