06_列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_列表渲染</title>
</head>
<body>
<!--
1. 列表显示
数组: v-for / index
对象: v-for / key
2. 列表的更新显示
删除item
替换item
-->
<div id="demo">
<h2>测试：v-for 遍历数组</h2>
<ul>
<!--下标和一个元素 key把一个文本变化成一个表达式-->
<li v-for="(p,index) in persons" :key="index">
<tr>
[{
{index+1}}]-[{
{p.name}}]-[{
{p.age}}]|
<!--根据索引删除-->
<button @click="deleteP(index)" v-shw="ok">删除</button>|
<!--记得是数组-->
<button @click="updateP(index,{name:'cat',age:18})" v-show="!ok">更新</button>
<button @click="ok=!ok">切换</button>
<button @click="addP({name:'tiger',age:10})">增加</button>
</li>
</ul>
<h2>测试：v-for 遍历对象</h2>
<ul>
<!-- item 是属性值 key是属性名-->
<li v-for="(item,key) in persons[1]":key="key">
{
{key}}:{
{item}}
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data: {
ok:true,
persons: [
{name: 'tom', age: 18},
{name: '小黄人', age: 12},
{name: 'jum', age: 10},
{name: 'job', age: 20}
]
},
methods:{
deleteP(index){
this.persons.splice(index,1)// 调用了不是原生数组的splice(), 而是一个变异(重写)方法
// 1. 调用原生的数组的对应方法
// 2. 更新界面
},
updateP(index,newP){
this.persons.splice(index,1,newP)
},
addP(newP){
this.persons.push(newP)
}
}
})
</script>
</body>
</html>
================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_列表渲染</title>
</head>
<body>
<!--
1. 列表显示
数组: v-for / index
对象: v-for / key
2. 列表的更新显示
删除item
替换item
-->
<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{
{index}}--{
{p.name}}--{
{p.age}}
--<button @click="deleteP(index)">删除</button>
--<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
</li>
</ul>
<button @click="addP({name: 'xfzhang', age: 18})">添加</button>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(item, key) in persons[1]" :key="key">{
{key}}={
{item}}</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
methods: {
deleteP (index) {
this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
// 1. 调用原生的数组的对应方法
// 2. 更新界面
},
updateP (index, newP) {
console.log('updateP', index, newP)
// this.persons[index] = newP // vue根本就不知道
this.persons.splice(index, 1, newP)
// this.persons = []
},
addP (newP) {
this.persons.push(newP)
}
}
})
</script>
</body>
</html>
07_列表渲染_过滤与排序
const声明一个只读的常量,
，常量的值是不能改变的，使用如下
const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': requestAnimationFrame('@/assets/languages/zh.json'),
'en': requestAnimationFrame('@/assets/languages/en.json')
}
})
export default i18n
另外，var 是函数级作用域，let是块级作用域
含义：es6 语法
扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
操作数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1. 列表过滤
2. 列表排序
-->
<div id="demo">
<input type="text" v-model="searchName">
<ul>
<li v-for="(p, index) in filterPersons" :key="index">
{
{index}}--{
{p.name}}--{
{p.age}}
</li>
</ul>
<div>
<button @click="setOrderType(2)">年龄升序</button>
<button @click="setOrderType(1)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
searchName: '',
orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
computed: {
filterPersons () {
// debugger
// 取出相关数据
const {searchName, persons, orderType} = this
/* 含义：扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。*/
let arr = [...persons]
// 过滤数组
if(searchName.trim()) {
arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
}
// 排序
if(orderType) {
arr.sort(function (p1, p2) {
if(orderType===1) { // 降序
return p2.age-p1.age
} else { // 升序
return p1.age-p2.age
}
})
}
return arr
}
},
methods: {
setOrderType (orderType) {
this.orderType = orderType
}
}
})
</script>
</body>
</html>
08_事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_事件处理</title>
<style>
.parent {
width: 400px;
height: 200px;
border: 0px red solid;
margin:0 auto;
position: relative
}
.child {
width: 100px;
height: 100px;
border: 1px red solid;
position:absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
}
</style>
</head>
<body>
<!--
1. 绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
2. 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
KeyDown、KeyPress和KeyUp事件的区别与联系,以后就可以根据需求来选择使用。
KeyDown：在控件有焦点的情况下按下键时发生。
KeyPress：在控件有焦点的情况下按下键时发生。
KeyUp：在控件有焦点的情况下释放键时发生。
1、KeyPress主要用来接收字母、数字等ANSI字符
KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键
2、KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
3、KeyPress 不显示键盘的物理状态（SHIFT键），而只是传递一个字符。KeyPress 将每个字符的大、小写形式作为不同的键代码解
释，即作为两种不同的字符。
KeyDown 和KeyUp 不能判断键值字母的大小。KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式：keycode — 显
示物理的键（将 A 和 a 作为同一个键返回）和 shift —指示 shift + key 键的状态而且返回 A 或 a 其中之一。
5、KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
6、KeyDown、KeyUp事件是当按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。
由于一般按下键盘的键往往会立即放开（这和鼠标不同），所以这两个事件使用哪个差别不大。
而且，up和其他两者还有一个区别：要判断key修改后的状态必须用up。
-->
<div id="example" class="parent">
<h1>1.监听绑定事件</h1>
<button @click="test1">test1</button>
<button @click="test2('欢迎你的到来')">test2</button>
<!--$event代表事件对象-->
<button @click="test3('abc',$event)">test3</button>
<h1>2.事件修饰符</h1>
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
<div style="width:200px;height: 200px;background: red" @click="test5">
<div style="width:100px;height:100px;background: blue" @click.stop="test6"></div>
</div>
<h1>3.按键修饰符</h1>
<input type="text" @keyup.13="test7">
<input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
},
methods:{
test1(event){
alert(event.target.innerHTML)
},
test2(msg){
alert(msg)
},
test3(msg,event){
alert(msg+'=========='+event.target.textContent)
},
test4(){
alert('prevent阻止事件的默认行为')
},
test5(){
alert("out")
},
test6(){
alert("inner")
},
test7(){
/ if(event.keyCode===13){
这是最原始的写法
alert(event.target.value)
},
test8(){
alert(event.target.value)
}
}
})
</script>
</body>
</html>