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 ...
随机推荐
- Codeforces 890C - Petya and Catacombs 模拟
C. Petya and Catacombstime limit per test1 secondmemory limit per test256 megabytesinputstandard inp ...
- 51Nod 1352 集合计数 扩展欧几里得
基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 给出N个固定集合{1,N},{2,N-1},{3,N-2},...,{N-1,2},{N,1}.求出有多少个集合满足 ...
- 51Nod1136--欧拉函数
1136 欧拉函数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命 ...
- 蓝桥杯第七届C/C++B省赛凑算式
第三题: 凑算式 B DEF A + --- + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~I代表1~9的数字, ...
- php计算多个集合的笛卡尔积实例详解
笛卡尔积 笛卡尔积是指在数学中,两个集合X和Y的笛卡尔积(Cartesian product),又称直积,表示为X*Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员. 假设集合A ...
- C# Dictionary根据Key排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- Qt---自定义界面之QStyle
最近想学习下Qt的自定义界面,因此花了点时间看了下QStyle,,,,结果很难受,这一块涉及到一大块GUI的具体实现方式,看得我很头疼.想看第一手资料并且英语功底不错的可以直接上qt文档,下面我会以易 ...
- Qt快速上手（学习笔记四）
拖了大半年,今天终于有更新了...我自己都不好意思,最近太忙了! 今天讲一下:QML语法 一 概述 QML是一种专门用于构建用户界面的编程语言,它允许用户构建高性能,具有流畅特效的可视化应用程序,QM ...
- PHP 数据库连接池实现
摘要 xml 读取配置文件 简易方式 常规方式 PHP解析XML 配置文件 解析 数据库连接池 測试 申请过多时拒绝请求 已满后拒绝放入 总结 摘要 之前总是以脚本面向过程的方式写PHP代码,所以非常 ...
- 我的Android进阶之旅------>Android知识图谱
Android知识图谱.快来看看哪方面有漏洞? 该图转自:http://blog.csdn.net/xyz_lmn/article/details/41411355