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 ...
随机推荐
- JavaScript OOP（一）之构造函数与new命令
面向对象编程:Object Oriented Programming,简称OOP. 典型的oop语言,如hava.c++,存在着类的概念,类就是对象的模板 (类可以类比为人类:而实例化类后变为对象,对 ...
- Zepto中的Swipe事件失效
需要阻止浏览器默认滑动的事件 document.addEventListener('touchmove', function (event) { event.preventDefault(); }, ...
- Linux基础-最基础
Linux基础 为了更好的学习知识,开通此博客,以前博客丢了...记录一下知识点,希望能在这里与大家互相学习交流. 20171113 14:00 Linux基础-基本知识 Linux树状文件系统结构 ...
- 直播二：iOS中硬编码（VideoToolBox）
硬编码相对于软编码来说,使用非CPU进行编码,如显卡GPU.专用的DSP.FPGA.ASIC芯片等,性能高,对CPU没有压力,但是对其他硬件要求较高(如GPU等). 在iOS8之后,苹果开放了接口,并 ...
- 机器学习笔记1 - Hello World In Machine Learning
前言 Alpha Go在16年以4:1的战绩打败了李世石,17年又以3:0的战绩战胜了中国围棋天才柯洁,这真是科技界振奋人心的进步.伴随着媒体的大量宣传,此事变成了妇孺皆知的大事件.大家又开始激烈的讨 ...
- 有关JS控制时间的几个小Demo
一.Document自带的定时和延时方法: 循环运行:var timeid = window.setInterval("方法名或方法"."延时");windo ...
- MyBatis_动态SQL
一.动态SQL 动态SQL,主要用于解决查询条件不确定的情况:在程序运行期间,根据提交的查询条件进行查询. 动态SQL,即通过MyBatis提供的各种标签对条件作出判断以实现动态拼接SQL语句. 二. ...
- matplotlib简介及安装
官网介绍: Matplotlib is a Python 2D plotting library which produces publication quality figures in a var ...
- wget 下载百度网盘文件
上传文件到服务器,有许多种方法,罗列一下我用过的 xftps之类的工具 rz tz命令 git 上传到码云 通过wget方式,上传文件到百度网盘,七牛云等只要支持wget方式下载即可 下面介绍一下怎么 ...
- 自学Python2.7-collections系列
Python collections系列 Python拥有一些内置的数据类型,比如str, int, list, tuple, dict等, collections模块在这些内置数据类型的基础上,提供 ...