我的Vue朝圣之路2
1.创建第一个Vue案例
1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现
<div ><input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
msg: 'helloVue'
}
})
</script>
2.列表
1. 在data中初始数组数据
2. 在页面中遍历显示: v-for
数据: [
{id : 1, name : '张三'},
{id : 2, name : '李四'},
{id : 3, name : '王五'}
]
<div ><ul>
<li v-for="(todo, index) in todos">{{index+1}}----{{todo.id+'+++'+todo.name}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: function () {
return {
todos: [
{id : 2, name : '张三'},
{id : 3, name : '李四'},
{id : 5, name : '王五'}
]
}
}
})
</script>
3.事件
1. 绑定监听的指令:
v-on:xxx="函数名或函数调用"
@xxx="函数名或函数调用"
2. 定义事件处理的函数:
methods : {
函数名 : function(){...}
}
<div id="app"><!--就是mvvm中的view--><p>{{msg}}</p>
<!--<button v-on:click="reverse">倒序</button>-->
<button @click="reverse">倒序</button>
</div>
<script type="text/javascript">
new Vue({ // vm对象
el : '#app',
data : { // 一般数据 model对象
msg: 'I Love You!'
},
methods: { // 事件回调函数
reverse () {
//this是Vue实例对象
this.msg = this.msg.split('').reverse().join('')
}
}
})
</script>
3.综合使用
1. 页面指令:
v-model
@click
@keyup.enter
v-for / $index
v-text
2. Vue对象
初始化数据: data
事件处理函数: methods
<div id="app"><input type="text" v-model="inputTodo" @keyup.enter="addTodo">
<ul>
<li v-for="(todo, index) in todos">
{{todo.name}}
<button @click="removeTodo(index)">X</button>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
inputTodo: '',
todos: [
{id : 2, name : '吃饭'},
{id : 3, name : '睡觉'},
{id : 5, name : '打豆豆'}
]
},
methods : {
addTodo () {
// 判断是否是正常输入
var inputTodo = this.inputTodo.trim()
if(!inputTodo) {
return
}
// 根据输入创建todo对象
var todo = {
id: Date.now(),
name: inputTodo
}
// 添加到todos
this.todos.unshift(todo)
// 清除输入数据
this.inputTodo = ''
},
removeTodo (index) {
this.todos.splice(index, 1)
}
}
})
</script>
4.模板语法
1. 表达式 :
语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据
可以调用对象的方法
2. 强制数据绑定:
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
3. 事件监听:
完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'
简洁写法:
@keyup='xxx'
@keyup.enter='xxx'
<div id="app"><h2>1. 表达式</h2>
<p>{{message}}</p>
<p>{{message.toUpperCase()}}</p>
<h2>2. 强制数据绑定:</h2>
<a :href="url">跳转</a>
<h2>3. 事件监听:</h2>
<input type="text" @keyup.enter="test">
<input type="text" @keyup.enter="test2($event, 'abc')">
<!--模板页面自动去vm对象中找属性-->
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#app',
data : {
message: 'atguigu.com',
url: 'http://www.xxxx.com'
},
methods : {
test (event) {
alert(event.target.value)
},
test2 (event, msg) {
alert(event.target.value + '----'+msg)
}
}
})
console.log(vm) // 数据代理(vm代理data中数据的操作(读/写))
vm.message = "xfzhang"
5.计算属性
计算属性
1. 在computed属性对象中定义计算属性的方法
2. 在页面中使用{{方法名}}来显示计算的结果
监视属性:
1. 通过通过vm对象的$watch()或watch配置来监视指定的属性
2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级:
1. 通过get/set方法实现对属性数据的显示和监视
2. 计算属性存在缓存, 多次读取只执行一次
<div id="demo">姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名1(单向): <input type="text" placeholder="Full Name" v-model="fullName1">--{{fullName1}}<br>
姓名2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#demo',
data : {
firstName: '上官',
lastName: '婉儿',
fullName2: '上官-婉儿'
},
computed: {
fullName1 () { // 相当于只是指定了get
console.log('fullName1()')
return this.firstName + '-' + this.lastName
},
fullName3: {
get () {// 获取当前属性值, 当读取当前属性值时回调
return this.firstName + '-' + this.lastName
},
set (value) { // 监视当前属性值的变化, 当属性值发生变化时调用
var names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {
firstName (value) {
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
}
}
})
// 监视lastName
vm.$watch('lastName', function (value) {
// 更新fullName2
this.fullName2 = this.firstName + '-' + value
})
</script>
6.class与style绑定
动态绑定class
:class="a" a是一个data属性
:class="{ 'class-a': isA, 'class-b': isB }" 其中isA/isB是布尔型data属性
:class="[classA, classB]" 其中classA/classB是字符串值
动态绑定style
:style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是data属性
<div id="demo"><p class="classB" :class="a">测试v-bind:class 变量语法</p>
<p :class="{classA:isA, classB:isB}">测试v-bind:class 对象语法</p>
<p :class="['classA', classB]">测试v-bind:class 数组语法</p>
<p :style="{ color: activeColor, fontSize: fontSize + 'px' }">测试v-bind:style</p>
</div>
<script type="text/javascript">
new Vue({
el : '#demo',
data : {
a: 'classA',
isA: false,
isB: true,
classB: 'classB',
activeColor: 'green',
fontSize: 30
}
})
</script>
7.条件渲染
切换一个元素:
v-if
v-else
v-show
切换多个元素
<template v-if="ok"> //不能用v-show
注意:
如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好
<div id="demo"><h1>测试: 切换一个元素</h1>
<p v-if="ok">aaaaa</p>
<p v-else>bbbbbb</p>
<p v-show="ok">sssssss</p>
<h1>测试: 切换多个元素</h1>
<template v-if="ok">
<h2>xxxx</h2>
<h2>yyyy</h2>
<h2>zzzzz</h2>
</template>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript">
new Vue({
el : '#demo',
data : {
ok: false
}
})
</script>
8.列表渲染
1. 遍历显示数组 : v-for / index
2. 遍历显示对象 : v-for / key
<div id="demo"><h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in filterPersons">
{{index}}--{{p.name}}--{{p.age}}
--<button @click="removeP(p)">删除</button>
--<button @click="updateP(p, {name:'Cot', age:18})">更新</button>
</li>
</ul>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[1]">
{{key}}----{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el : '#demo',
data : {
persons: [
{name: 'Tom', age: 12},
{name: 'Jack', age: 15},
{name: 'Bob', age: 14}
]
},
methods: {
removeP (p) {
// 得到元素在数组中下标
var index = this.persons.indexOf(p)
// 删除
this.persons.splice(index, 1)
},
updateP (oldP,newP) {
// 得到元素在数组中下标
var index = this.persons.indexOf(oldP)
console.log(index)
// 更新下标所对应的数组元素
// this.persons[index] = newP
this.persons.splice(index, 1, newP)
}
},
computed: {
filterPersons () {
// 哪些数组元素会放入返回的数组中? 只有回调函数返回值为true的p
return this.persons.filter(p => p.name.indexOf('o')>=0)
}
}
})
</script>
9.方法与事件处理器
1. 绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
2. 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
<div id="example"><h2>1. 绑定监听</h2>
<button v-on:click="test1">测试1</button>
<button @click="test1">测试2</button>
<button @click="test2('abc', $event)">测试3</button>
<h2>2. 事件修饰符</h2>
<!--阻止事件的默认行为-->
<p><a href="http://baidu.com" @click.prevent="test3">百度</a></p>
<!--停止事件冒泡-->
<div style="background: red;width: 300px;height: 300px" @click="test4">
<div style="background: yellow;width: 200px;height: 200px" @click.stop="test5"></div>
</div>
<h2>3. 按键修饰符</h2>
<input type="text" @keyup.enter="test6">
<input type="text" @keyup.65="test6">
</div>
<script type="text/javascript">
new Vue({
el : '#example',
data : {
},
methods : {
test1 (event) {
alert(event.target.innerHTML)
},
test2 (msg, event) {
alert(msg + '---' + event.target.innerHTML)
},
test3 () {
alert('点击链接')
},
test4 () {
alert('点击了外部div')
},
test5 () {
alert('点击了内部div')
},
test6(event) {
alert(event.keyCode + '---' + event.target.value)
}
}
})
</script>
10.表单控件绑定
1. 使用v-model对表单项数据双向绑定
text/textarea
checkbox : 绑定boolean/string值
radio
select
2. 失去焦点才更新: .lazy
3. 自动去除两端空格: .trim
<div id="demo"><input type="text" v-model="msg"><br>
<textarea cols="30" rows="5" v-model="msg"></textarea>
<p>{{msg}}</p>
<hr>
<input type="checkbox" v-model="ok"> {{ok}}<br>
<input type="checkbox" name="students" value="Tom" v-model="selectStudents">TOM
<input type="checkbox" name="students" value="Jack" v-model="selectStudents">JACK
<input type="checkbox" name="students" value="Bob" v-model="selectStudents">BOB
{{selectStudents}}
<hr>
<input type="radio" name="sex" value="male" v-model="sex">男
<input type="radio" name="sex" value="female" v-model="sex">女
{{sex}}
<hr>
<select name="city" v-model="selectCityId">
<option :value="city.id" v-for="city in citys">{{city.name}}</option>
</select>
{{selectCityId}}
<hr>
<input type="text" placeholder="失去焦点才同步数据" v-model.lazy="msg2">{{msg2}}
<input type="text" placeholder="自动trim" v-model.trim="msg3">---{{msg3}}---
</div>
<script type="text/javascript">
new Vue({
el : '#demo',
data : {
msg: 'atguigu',
ok: true,
selectStudents: ['Jack'],
sex: 'female',
citys: [
{id: 1, name: 'BJ'},
{id: 3, name: 'SZ'},
{id: 5, name: 'SH'}
],
selectCityId: 3,
msg2: '',
msg3: ''
}
})
</script>
以上是 我的Vue朝圣之路2 的全部内容， 来源链接： utcz.com/z/375740.html
