几个vue的demo
摘要： 跨浏览器的web前端开发 前端开发哪个浏览器 学前端开发还要懂浏览器 学vue陆续做了一些demo，简单到复杂； 分页导航切换 基于bootstrap + vue的用户信息表 模态框UI组件 分页导航切换 这里用到的知……
| 跨浏览器的web前端开发 |
| 前端开发哪个浏览器 |
| 学前端开发还要懂浏览器 |
学vue陆续做了一些demo，简单到复杂；
分页导航切换
这里用到的知识点是
active类是否添加取决于：后面的表达式是否为真
@是v-on的缩写
v-for='(n, index) in p’ 处在第一位的“n”是值，第二个为真index是索引
html 代码
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>分页导航条</title>
<script
type=”text/javascript”
charset=”utf-8″
></script>
<style type=”text/css”>
ul > li {
list-style: none;
display: inline-block;
border: 1px solid aquamarine;
padding: 5px 10px;
cursor: pointer;
}
li + li {
border-left: none;
}
li:hover {
background-color: #63b8ff;
}
.active {
background-color: #a6e1ec;
color: #460215;
}
</style>
</head>
<body>
<ul id=”box”>
<!–类名 active 是否更新，取决于：后的表达式是否为真值–>
<!–绑定toggle方法，并传入当前的n值用以修改activeIndex值–>
<li v-on:click=”prev”><</li>
<li
v-for=”(n, index) in p”
v-bind:class=”{active:n==activeIndex}”
@click=”toggle(index)”
>
{{ n }}
</li>
<li @click=”next”>></li>
</ul>
<script type=”text/javascript”>
new Vue({
el: ‘#box’,
data: {
p: 5,
activeIndex: 1,
},
methods: {
toggle: function(index) {
this.activeIndex = index + 1
},
prev: function() {
this.activeIndex =
this.activeIndex > 1 ? this.activeIndex – 1 : 1
console.log(this.activeIndex)
},
next: function() {
this.activeIndex =
this.activeIndex < this.p
? this.activeIndex + 1
: this.p
},
},
})
</script>
</body>
</html>
基于bootstrap + vue的用户信息表
例子展示了vue的拓展性，可以和boostrap配合使用
例子中有 添加和删除的功能，对实例中的data数据进行操作，但官方文档中明确指出，由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength
要使用Vue.set 或者example1.items.splice(indexOfItem, 1, newValue) 来对数据进行操作
html 代码
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>基于bootstrap+vue的用户信息表</title>
<script
src=”https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js”
type=”text/javascript”
charset=”utf-8″
></script>
<link
href=”http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css”
rel=”stylesheet”
/>
<style type=”text/css”>
#app {
max-width: 500px;
}
#addTable {
text-align: center;
max-width: 500px;
}
td > input {
width: 120px;
}
</style>
</head>
<body>
<div id=”app”>
<form role=”form”>
<div class=”form-group”>
<label
for=”firstname”
class=”col-sm-2 control-label clearfix”
>用户名</label
>
<input
type=”text”
class=”form-control”
id=”firstname”
placeholder=”请输入用户名”
v-model=”newData.name”
/>
</div>
<div class=”form-group”>
<label
for=”lastname”
class=”col-sm-2 control-label clearfix”
>年龄</label
>
<input
type=”text”
class=”form-control”
id=”lastname”
placeholder=”请输入年龄”
v-model=”newData.age”
/>
</div>
<div class=”form-group”>
<button class=”btn btn-info” @click.prevent=”addData”>
添加
</button>
<button type=”reset” class=”btn btn-danger”>重置</button>
</div>
</form>
<hr />
<table id=”addTable” class=”table table-bordered”>
<caption class=”text-info”>
用户信息表
</caption>
<tr class=”text-danger”>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for=”(item, $index) in lists”>
<td>{{ item.id }}</td>
<td>
{{ item.name }}
<input
type=”text”
:value=”item.name”
v-if=”ischange == $index”
v-model=”newName”
:key=”$index”
/>
</td>
<td>
{{ item.age }}
<input
type=”text”
:value=”item.age”
v-if=”ischange == $index”
v-model=”newAge”
:key=”$index”
placeholder=”新的年龄”
/>
</td>
<td>
<button
class=”btn btn-primary btn-sm”
v-if=”ischange == $index”
@click=”comfirmChange($index)”
>
确认
</button>
<button
class=”btn btn-primary btn-sm”
@click=”changeMsg($index)”
v-if=”ischange !==$index “
>
修改
</button>
<button
class=”btn btn-danger btn-sm”
@click=”delMsg($index)”
v-if=”ischange !== $index”
>
删除
</button>
<button
class=”btn btn-primary btn-sm”
@click=”ischange=-1″
v-if=”ischange == $index”
>
取消
</button>
</td>
</tr>
<tr>
<td colspan=”4″>
<button
class=”btn btn-danger pull-right”
@click=”delMsgAll”
>
删除全部
</button>
</td>
</tr>
<tr class=”text-center text-muted”>
<td colspan=”4″>暂无数据…</td>
</tr>
</table>
</div>
<script type=”text/javascript”>
var vm = new Vue({
el: ‘#app’,
data: {
lists: [
{
id: 1,
name: ‘bob’,
age: ’36’,
},
{
id: 2,
name: ‘lili’,
age: ’18’,
},
],
newData: {
name: ”,
age: ”,
},
ischange: -1,
newAge: ”,
newName: ”,
lastIndex: 3,
},
methods: {
addData: function() {
var maxID = 0
//获取lists数组中最后一个id
this.newData.id = this.lastIndex++
this.lists.push(this.newData)
//添加完毕后清除输入框数据
this.newData = {}
},
delMsgAll: function() {
//由于JavaScript的限制，这样做不会被vue捕获
// this.lists.length = 0;
//这样也可以清空数组
this.lists.splice(0)
},
delMsg: function(index) {
this.lists.splice(index, 1)
},
changeMsg: function(index) {
this.ischange = index
},
comfirmChange: function(index) {
if (this.newAge == ” || this.newName == ”) {
alert(‘不能为空’)
return
}
this.ischange = -1
var id = this.lists[index].id
var newDate = {
id: id,
age: this.newAge,
name: this.newName,
}
//替换数据
this.lists.splice(index, 1, newDate)
//初始化
this.newAge = ‘1111’
this.newName = ‘2222’
},
},
})
</script>
</body>
</html>
模态框组件
这个demo的知识点比较多，比前面2个demo复杂了一点
使用了slot，
prop传递数据以及验证
使用$emit定义自定义事件，供父组件触发
直接修改组件props的数据，vue会发出警告。最好用计算属性对props进行处理并返回。
html 代码
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>Document</title>
<script
src=”https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js”
type=”text/javascript”
charset=”utf-8″
></script>
<style type=”text/css”>
h2 {
margin: 0;
}
.modal {
position: relative;
width: 500px;
margin: 10px auto;
border: 1px solid #adadad;
border-radius: 6px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
padding: 10px 10px 0;
}
.modal-header {
padding: 10px;
border-bottom: 1px solid #adadad;
}
.modal-content {
padding: 15px;
}
.modal-footer {
padding: 10px;
text-align: right;
border-top: 1px solid #adadad;
}
.modal-footer input {
padding: 5px 10px;
}
.close {
position: absolute;
right: 10px;
top: 25px;
}
</style>
</head>
<body>
<div id=”app”>
<!–模态框组件将–>
<button @click=”openModal”>打开模态框</button>
<modal-component
:header=”header”
:visible=”visible”
@on-close=”openModal”
@on-confirm=”Submit”
@on-cancel=”Cancel”
>
<ul slot=”slot-content”>
<li v-for=”item in lists”>
{{ item }}
</li>
</ul>
</modal-component>
</div>
<script type=”text/javascript”>
Vue.component(‘modal-component’, {
props: {
header: {
//props验证，必须是字符串
type: String,
//默认内容
default: ‘这是一个模态框’,
},
visible: {
type: Boolean,
default: true,
},
},
//因为直接修改props，vue会发出警告所以使用计算函数来来处理props的值并返回
computed: {
Visible: function() {
return this.visible
},
},
template: `
<div class=”modal” v-if=’Visible’>
<div class=”modal-header”>
<h2>{{header}}</h2>
<button class=’close’ @click=’close’>×</button>
</div>
<div class=”modal-content”>
<!–插槽，如果父组件没有提供内容，插槽将显示–>
<slot name=’slot-content’>
请输入内容
</slot>
</div>
<div class=”modal-footer”>
<slot name=’slot-footer’>
<input type=”button” value=”确认” @click=’confirm’/>
<input type=”button” value=”取消” @click=’cancel’/>
</slot>
</div>
</div>
`,
methods: {
//点击确认
confirm() {
//绑定触发事件
this.$emit(‘on-confirm’)
},
//点击取消
cancel() {
this.$emit(‘on-cancel’)
//修改计算函数Visible
this.Visible = false
this.$emit(‘on-close’)
},
//点击关闭的按钮
close: function() {
console.log(this)
this.Visible = false
this.$emit(‘on-close’)
},
},
})
var vm = new Vue({
el: ‘#app’,
data: {
header: ‘确认信息’,
lists: [123456789],
visible: false,
},
methods: {
Submit: function() {
alert(‘你点击的确定’)
},
Cancel() {
alert(‘你点击了取消’)
},
openModal: function() {
this.visible = !this.visible
},
},
})
</script>
</body>
</html>
| web前端开发中浏览器兼容 |
| 前端开发必备浏览器是哪几个 |
| 前端开发 双核浏览器使用ie |
» 本文来自：前端开发者 » 《几个vue的demo》
» 本文链接地址：https://www.rokub.com/8216.html
» 您也可以订阅本站：https://www.rokub.com
近期评论