1.创建第一个Vue案例
1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现
<div id="test">
<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 id="app">
<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>
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
