vue.js实践应用
对于vue.js，不想多比比，直接搞上源码+图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<!--<script src="https://cdn.bootcss.com/vue/1.0.27/vue.js"></script>-->
</head>
<body>
<!-- 2.0往上的版本已经不支持v-for中的$index和$key了 -->
<div class="container-fluid" id="box1">
<h2 class="text-center">创建模态框（Modal）</h2>
<form role="form" class="clearfix form">
<div class="form-group">
<label for="name" class="h3">名称:</label>
<input type="text" class="form-control" id="name" v-model="username" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="age" class="h3">年龄:</label>
<input type="text" class="form-control" id="age" v-model="age" placeholder="请输入你的年龄">
</div>
<div class="form-group pull-right">
<input v-on:click = "add()" type="button" class="btn btn-primary" value="确定">
<input type="reset" class="btn btn-success" value="取消">
</div>
</form>
<table class="table text-center table-hover">
<thead>
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in mydata">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">删除</a>
</td>
</tr>
<tr v-show="mydata!=''">
<td colspan="4" class="text-right">
<button v-on:click="newindex = -5" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">删除全部</button>
</td>
</tr>
<tr v-show="mydata==''"><td colspan="4" class="text-center text-moted">暂无数据</td></tr>
</tbody>
</table>
<!-- 模态框（Modal） -->
<div role="dialog" class="modal fade bs-example-model-lg" id="myModal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
模态框（Modal）标题{{newindex}}
</h4>
</div>
<div class="modal-body">
您确定删除吗？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">
{{reset}}
</button>
<button type="button" v-on:click="delectmsg(newindex)" class="btn btn-danger" data-dismiss="modal">
{{enter}}
</button>
</div>
</div>
</div>
</div>
<script>
window.onload = function () {
new Vue({
el: '#box1',
data: {
mydata:[],
username:'',
age:'',
newindex: -100,
enter:"确定",
reset:"取消"
},
methods:{
add:function () {
this.mydata.push({
name:this.username,
age:this.age
});
this.username = '';
this.age = '';
},
delectmsg:function (n) {
if(n == -5){
this.mydata = [];
}else {
this.mydata.splice(n,1);
}
}
}
});
};
</script>
</body>
</html>
图片示意
直接复制代码保存为以.html或是.htm结尾的文件测试下即可，简单粗暴，好用
不过在此我要说出一个问题，就是vue.js低版本的在v-for 这个标签中可以使用$index这个内置变量。意义为索引，但是在高版本中就取消了，替换的内容不知道修改为什么了。搜了一些，都是一些带有vue的模板(可兼容html5的代码模板)
关于v-for版本2.0与1.x的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{display: block;}
</style>
</head>
<body>
<div id="for5">
<a v-for="(item,index) in items" v-on:click="onclick(index)" href="javascript:void(0)">{{ index }}{{ item.text }}</a>
</div>
<input type="text" name="" id="index" value=""/>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#for5',
data: {
items: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
},
methods: {
onclick:function(index){
console.log(index);
document.getElementById('index').value = index;
// window.location.href = "http://www.baidu.com";
window.location.href = "#";
}
}
})
</script>
</body>
</html>
变化如下：
- el处需id，写body报错；
- 参数index需写在item后面；
- 作为事件参数时不用加$符。
此外，也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
欢迎各位大神留言沟通
vue.js cdn引入 http://www.bootcdn.cn/
我推荐使用百度静态资源库 http://cdn.code.baidu.com/
详细可参考 https://vuefe.cn/v2/guide/list.html
vue.js实践应用的更多相关文章
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
- Vue.js组件间通信方式总结
平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- Vue.js最佳实践
Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- Vue.js最佳实践--给大量子孙组件传值(provide/inject)
开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...
- 《Vue.js 2.x实践指南》 已出版
<Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...
- 前端开发工具vue.js开发实践总结
最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- C# .NET中自带的委托Actoin、Func详解
委托是.NET中强大的功能,而.NET为我们提供了2个非常实用的泛型委托,分别是Action.Func [Action] Action是.NET内部提供的一个无返回值.泛型的委托,有16重载,分别是0 ...
- dt4.0上传图片总是压缩解决办法，为什么我设置了不压缩图片，程序还是压缩呢？
即使后台设置也解决不了图片被压缩的厄运如图: 解决办法: 这个是上传控件名称和版本号 这个是文件的路径 在文档中找到 compress: 把windth和height后面的1600 改成更大的数值就可 ...
- Maven，SVN，快捷键，数据库等
1.Eclipse中Maven的搭建: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven 下载地址: http://maven. ...
- html+css杂记
overflow可设置超出后隐藏 子元素撑开父级元素:①父级元素宽度不固定,②父级元素设置为inline-block或者添加float: html中的中文在浏览器打开为乱码(已经写了<meta ...
- Oracle数据表比较记录差异（转）
liuyx_know|七级 你可以参照一下Oracle的UNION [ALL], INTERSECT, MINUS操作符,至于你的问题你可以使用MINUS操作符,语句如下: SELECT * FROM ...
- redhat7.3忘记root密码后如何重置root密码
redhat7系如果忘记root密码,重置密码方法与redhat6系不同! 1.开机启动系统,在grub选择启动内核项时 按‘e’进入编辑模式 2.这时看到的参数并不全,要按上下键滚动显示, 3.在l ...
- 验证tensorflow版本是GPU还是CPU
reference: https://blog.csdn.net/zlase/article/details/79261348 import numpy import tensorflow as tf ...
- 使用ABAP和JavaScript代码生成PDF文件的几种方式
ABAP 方法1:使用ABAP + Adobe Lifecycle Enterprise Service 详细步骤参考我的博客Convert word document into PDF via Ad ...
- Android（java）学习笔记59：类继承的 注意事项
1. 类继承的注意事项: /* 继承的注意事项: A:子类只能继承父类所有非私有的成员(成员方法和成员变量) B:子类不能继承父类的构造方法,但是可以通过super(马上讲)关键字去访问父类构造方法. ...
- 2017.9.20 HTML学习总结----下拉列表标签
接上: 1.下拉列表框<option>,<selcct> (1)解释:在表单中,通过option select标记可设计一个下拉式的列表或带有滚动条的列表, 用户可以在列表中选 ...