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 ...
随机推荐
- MFC中小笔记(二)
6.有三个API函数可以运行可执行文件WinExec.ShellExecute和CreateProcess. 关于这三者的概述总结,有好几篇,自己选择. 1.CreateProcess因为使用复杂, ...
- ASP.NET Core 一步步搭建个人网站（2）_一键部署和用户注册登录
俗话说,磨刀不费砍柴工.为了更方便的进行项目管理,我们先将个人网站项目配置一下,满足以下2个目标: VS2017中支持Git存储库,绑定Github项目,实现本地VS程序与线上Github一键代码提交 ...
- ##5.1 Nova控制节点-- openstack pike
##5.1 Nova控制节点 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##5.1 Nova控制节点 # co ...
- thinkphp中各字母代表的发放和具体实例
hinkphp单字母函数使用指南A方法 A方法用于在内部实例化控制器,调用格式:A('[项目://][分组/]模块','控制器层名称') 最简单的用法: $User = A('User'); 复制代码 ...
- O（nlogn）算法，最长上升子序列，，非动规
//最长上升子序列最快算法,非动态规划,运用了二分思想,还有栈的思想, //用每一个数去和栈中的栈顶元素相比较,如果大于栈顶元素,则入栈,否则运用二分查找,寻找出第一个比这个数大的那个数替换 #inc ...
- easyUI带复选框的组合树
代码: <input id="depts"><script type="text/javascript">$(document).rea ...
- Mecanim动画系统
序言:Mecanim动画系统是Unity4.0之后退出的新版动画系统,非常适合人类动画系统.本文是作为自己的学习来讲解的, 可能会有些啰嗦,但尽量把自己的坑都为大家列出来,让大家理解透彻. 一.文件的 ...
- JaveScript变量的简介及其变量的简单使用(JS知识点归纳一)
变量简介 "变量是一个容器" 为什么要有变量? 程序的执行过程中,会使用到许多的数据(用户输入的内容,动态效果的运动数据等),当这些数据需要重复在多个地方使用的时候,就需要一个容器 ...
- 企业级Tomcat安全管理优化方案
telnet管理端口保护 1. 修改默认的8005管理端口为不易猜测的端口(大于1024): <Server port=" shutdown="dangerous" ...
- java 可变參数列表
Java SE5加入了可变參数列表特性 參数能够这样定义.(Object-args).可变參数用"..."来定义,args是可变參数的数组.举个样例: package sample ...