vue基础学习（一）
01-01 vue使用雏形
<div id="box">
{{msg}}
</div>
<script>
window.onload= function(){
var c = new Vue({
el:"#box",//选择器
data:{
'msg':'welcome vue'
}
});
}
</script>
01-02 v-model一般用于表单元素数据双向绑定
<div id="box">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<p>{{msg}}</br>{{msg2}}</br>{{arr}}</br>{{json}}
</p> </div>
<script>
// 知识说明:
// v-model:数据双向绑定
window.onload= function(){
var c = new Vue({
el:"#box",//选择器
data:{
'msg':'welcome vue',
'msg2':'12',
arr:['apple','oramge','pear'],
'json':{a:'apple',b:'orange',c:'pear'}
} });
}
</script>
01-03 v-for循环数据
<div id="box">
<!--数组的循环-->
<ul><li v-for="value in arr">{{value}} {{$index}}</li></ul> <hr>
<!--json的循环-->
<ul><li v-for="value in json">{{value}} {{$index}} {{$key}}</li></ul>
<ul><li v-for="(k,v) in json">{{k}} {{v}} {{$index}} {{$key}}</li></ul>
</div>
<script>
// 知识说明:
// v-for:数据循环 // json数据: (value,key,index) in json
// {{value}}:json的值
// {{$key}}:json的key
// {{$index}}:数据索引
window.onload= function(){
var c = new Vue({
el:"#box",//选择器
data:{
'arr':['apple','oramge','pear'],
'json':{a:'apple',b:'orange',c:'pear'}
}
});
}
</script>
01-04 v-click等等基础事件
<div id="box">
<button type="button" v-on:click="show()">按钮</button>
<button type="button" v-on:click="add()">添加</button>
<br>
<ul><li v-for="value in arr">{{value}}</li></ul>
</div>
<script>
// 知识说明:
// 基础事件举例: v-on:click/mouseout/mouseover/dblclick/mousedown…… window.onload= function(){
var c = new Vue({
el:"#box",//选择器
data:{//数据
'arr':['apple','oramge','pear'],
},
methods:{//函数储存器
show:function(){
alert();
},
add:function(){
alert(this.arr);//this表示的是这个c=new Vue这个对象
this.arr.push('tomato');
}
}
});
}
</script>
01-05 点击按钮div消失：v-show(false/true)
<div id="box">
<button type="button" v-on:click="a=false">消失</button>
<div v-show="a" style="width:300px;height:300px;background:red;"></div>
</div>
<script>
// 知识说明:
// v-show="true/false"//true显示，false隐藏 window.onload= function(){
var c = new Vue({
el:"#box",//选择器
data:{//数据
a:true,
}
});
}
</script>
01-06 案例添加删除用户
<body>
<article id="box" class="container">
<form role="form">
<div class="form-group">
<label for="uername">用户名：</label>
<input v-model="username" type="text" class="form-control" id="username" placeholder="输入用户名">
</div>
<div class="form-group">
<label for="age">年 龄：</label>
<input v-model="age" type="text" class="form-control" id="age" placeholder="输入年龄">
</div>
<div class="form-group">
<input v-on:click="add()" type="button" value="添加" class="btn btn-primary">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</form> <hr> <table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr> <!--循环数据-->
<tr v-for="item in mydata" class="text-center"><td>{{$index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><button v-on:click="nowIndex=index" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button></td></tr> <tr v-show="mydata.length==0" class="text-center text-muted"><td colspan="4"><p>暂无数据……</p></td></tr>
<tr v-show="mydata.length!=0" class="text-right text-muted"><td colspan="4"><button v-on:click="nowIndex=-2" class="btn btn-danger" data-toggle="modal" data-target="#layer">删除全部</button></td></tr>
</table> <!--模态框，弹出框-->
<div role="dialog" id="layer" class="modal fade">
<div class="modal-dialog">
<div class="modal-content"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
确认删除吗？
</h4>
</div>
<div class="modal-body">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button v-on:click="delateMsg(nowIndex)" data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
</div> </div>
</div>
</div> </article> <script>
// 知识说明:
// v-show="true/false"//true显示，false隐藏 window.onload= function(){
var c = new Vue({
el:"#box",//选择器
data:{//数据
//通过v-show="mydata.length==0"来控制“暂无数据”"删除全部"显示隐藏
mydata:[
{name:'XXX',age:'XX'},
{name:'XXX',age:'XX'},
],
username:'',
age:'',
nowIndex:"-1000",
},
methods:{
add:function(){
this.mydata.push({
name:this.username,
age:this.age
}); //添加后清空表格
this.username="";
this.age="";
},
delateMsg:function(n){
if(n==-2){
this.mydata=[];
}else{
this.mydata.splice(n,1);
}
}
}
});
}
</script>
vue基础学习（一）的更多相关文章
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- vue基础学习（二）
02-01 vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...
- 【转】vue基础学习
1.基本绑定: new Vue( { el:'#elID', data:{ // data obj ...
- vue基础学习（三）
03-01 vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...
- 【vue基础学习】vue.js开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
随机推荐
- Python测试开发之random模块
random模块是一个生成随机数.随机字符的模块,平时被使用的也非常多,下面是random模块的常用方法: random.random()生成一个0-1的随机小数,如果想要对随机小数保留两位小数,可以 ...
- php加密解密处理类
[PHP]代码 <?php /*=========================================================== = 版权协议: = GPL (The GN ...
- calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
- [Elasticsearch] 邻近匹配 (二) - 多值字段，邻近程度与相关度
多值字段(Multivalue Fields) 在多值字段上使用短语匹配会产生古怪的行为: PUT /my_index/groups/1 { "names": [ "Jo ...
- 【Access2007】解救被阉割的truncate
Access2007使用被阉割的J-SQL语句,语法跟T-SQL语句.也就是寻常最标准的SQL语句一模一样,但就是仅保留insert into,delete,select,update与没太大意义的过 ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- COM-IE-(2)
# -*- coding:UTF-8 -*- import sys from time import sleep import win32com.client from win32com.client ...
- 主从DB与cache一致性
本文主要讨论这么几个问题: (1)数据库主从延时为何会导致缓存数据不一致 (2)优化思路与方案 一.需求缘起 上一篇<缓存架构设计细节二三事>中有一个小优化点,在只有主库时,通过" ...
- 关于 getsockname、getpeername和gethostname、gethostbyname
一.gethostname,gethostbyname的用法 这两个函数可以用来获取主机的信息.gethostname:获取主机的名字gethostbyname:通过名字获取其他的信息(比如ip) 1 ...
- linux 磁盘管理三部曲——（2）管理分区，文件系统类型格式化
上篇小编给大家讲解了磁盘结构和分区的介绍,这篇小编就给大家演示如何管理分区和文件系统类型格式化. 小编上篇已经提到如何使用磁盘,今天这两步,就是其中很重要的两步.(前几天写的有点急,有点乱,今天又整理 ...