2.1 模板语法
alert 和 console.log不能用
原因:因为vue中的this指向vue的实例,所以在浏览器中无法输出 eg:{{this.msg}}
if条件改成使用三元表达式
方法一定要写在methods里面, 不要直接写在模板语法中
模板语法中支持使用匿名函数可以直接写
2.2 列表渲染
v-for指令:
html:
<ul id="example-1">
<li v-for="item in items"> {{ item.message }} </li>
</ul>
js:
var example1 = new Vue({
el: '#example-1',
data: {
items: [ { message: 'Foo' }, { message: 'Bar' } ]
}
})
结果:
如果需要 索引 index
v-for = "(item,index) in data "
{{ item }} --- {{ index }}
对象:
v-for = "(index,item,key) in obj"
总结:
v-for 最多可以有三个参数 (顺序不可以更改)
格式
v-for = "(index,item,key) in data"
名词解释:
index: 索引
item; data中的每一个
key; 如果是对象, 表示对象的key
4. v-for如果有循环嵌套, 那么value可以写成一样的命名, 但是建议大家写成不一样的命名,
理由: 比较语义化
5. v-for 可以循环 数字或是一个字符
扩展:
v-for = ' item in data'
底层:
function v-for( arg ){
//做字符串处理,设data为处理后的数据
var data = 'data'
for( var i = 0 ; i < data.length; i++ ){
}
}
2.3. 条件渲染
两种:
- v-if 的绑定
单路分支
<p v-if = " f ">true</p>
双路分支
<p v-if = " f ">true</p>
<p v-else>false</p>
多路分支
<p v-if = " text === 'A'"> A </p>
<p v-else-if = " text === 'B'"> B </p>
<p v-else> C </p>
- v-show 的绑定
<p v-show = " f ">if条件</p>
注意:v-if 和v-show的不同点
v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
性能
a.如果条件为假,v-show有较高的初始渲染开销
b.v-if 有更高的切换开销
项目中建议:
如果需要非常频繁地切换,则使用 v-show 较好;
如果在运行时条件很少改变,则使用 v-if 较好。
2.4. 事件处理
事件的组成:
DOM
on 添加事件的形式
事件类型 click
事件处理函数
原始的事件:
- 属性绑定
<div onClick = "alert"></div>
function alert(){
alert('hello vue.js')
}
- js操作
获取数据
var data = 'hello vue.js'
1
获取DOM
```javascript
var app = document.querySelector('#app')
渲染数据
app.innerHTML = data
添加事件
app.onclick = function(){
app.style.background = 'red'
}
vue的事件:
vue使用第一种事件添加的形式 —》 v-on
格式:
v-on:eventType = eventFnName;
<button v-on:click="changeMsg">
{{ msg }}
</button>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
methods: {
/* 一个key 就是一个方法 */
changeMsg() {
this.msg = 'hello 我骏哥~~~'
}
})
简写:
@eventType = eventFnName
<button @click="argHandler('hello 骏哥~~~')">
eventArgument
</button>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
methods: {
/* 一个key 就是一个方法 */
argHandler(value) {
alert(value)
}
})
事件修饰符
举例:事件冒泡(阻止事件冒泡)
e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案: 使用事件修饰符(modify)
格式:
v-on:eventType.modify = eventFnName
类型:
.stop : 阻止冒泡行为
.prevent :阻止浏览器默认行为
.capture : 阻止捕获行为
.self : 自身触发
.once : 只执行一次
.passive : 行为结束后触发(scroll)
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键修饰符 ( 键盘事件 keyup keydown keypress)
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符
- 全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用:
@keyup.自定义修饰符 = eventFnName - 自定义事件(自定义事件类型)
- 使用new Vue() 的到的实例来定义
vm.$on(eventName,callback)
如何触发呢?
vm.$emit(eventName)
this.$emit(eventName)
2.5.数据绑定
1.单项数据绑定:
- 概念;
将数据和属性进行绑定, 也就是原生身上的属性的值就是数据 - 格式
v-bind:attr = data
简写:
:attr = data
数据更改 , 视图就更新
<div id="app">
<input type="text" v-bind:value="msg">
</div>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
- 双向数据绑定
数据改变, 视图更新,
视图改变, 数据更新
格式:
- v-model:attr=data
简写:可以省略属性
v-model=data - 特别强调:
v-model用于表单, v-model默认绑定了value属性(绑定的时候value值可以省略)
<div id="app">
<input type="text" v-model="msg">
</div>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
需求: 使用单项数据绑定实现双向数据绑定?
注:input事件:
oninput 事件在用户输入时触发,它是在元素值发生变化时立即触发;
<div id="app">
<input type="text" v-bind:value = "msg" @input = "inputHandler">
</div>
new Vue({
el: '#app',
data: {
msg: 'hello 骏哥'
},
methods: {
inputHandler(e){
// console.log( e )
this.msg = e.target.value
}
}
})