vue基础语法
模板语法
- alert console.log 不能用
- if条件改成使用三元表达式
- 方法一定要写在methods里面, 不要直接写在模板语法中
- 模板语法中支持使用匿名函数可以直接写
<div id="app">
<p> num: {{ num }}</p>
<p> str: {{ str }}</p>
<p> und: {{ und }}</p>
<p> nul: {{ nul }}</p>
<p> bool: {{ bool }}</p>
<p> obj: {{ obj }}</p>
<p> arr: {{ arr }}</p>
<p> fun: {{ (function(){ return 1+1 })() }}</p>
<p> fun: {{ sum() }}</p>
<p>
if:{{bool?str:num}}
</p>
</div>
new Vue({
el: '#app',
data: {
num: 100,
str: '五一要来了',
und: undefined,
nul: null,
bool: true,
obj: {
id: 1,
name: 'yyb',
age: 17
},
arr: [1, 2, 3, 4],
},
methods: {
sum() {
return 1 + 1
},
}
})
列表渲染
v-for指令
v-for = " xxx in data " {{ xxx }}
<ul>
<li v-for = " item in arr ">
{{ item }}
</li>
</ul>
如果需要 索引 index
v-for = "(item,index) in data " {{ item }} — {{ index }}
<ul>
<li v-for = " (item,index) in arr ">
{{ item }}---{{ index }}
</li>
</ul>
对象:
v-for = “(index,item,key) in obj”
<ul>
<li v-for = " (index,item,key) in obj ">
{{ index }}----{{ item }} -- {{ key }}
</li>
</ul>
json:
<ul>
<li v-for = "(item,index) in json">
{{ item.card }} --- {{ item.name }} --- {{ item.age }}
</li>
</ul>
总结:
- v-for 最多可以有三个参数
- 格式
v-for = “(index,item,key) in data”
名词解释:
index: 索引
item; data中的每一个
key; 如果是对象, 表示对象的key - v-for如果有循环嵌套, 那么value可以写成一样的命名, 但是我们建议大家写成不一样的命名, 理由: 比较语义化
<ul>
<li v-for = "item in json">
<ul>
<li v-for = "item in item">
{{ item }}
</li>
</ul>
</li>
</ul>
- v-for 可以循环 数字或是一个字符
<ul>
<li v-for = " item in 10 ">
{{ item }}
</li>
</ul>
<ul>
<li v-for = " item in 'yanyabing' ">
{{ item }}
</li>
</ul>
扩展:
v-for = ’ item in data’
底层:
function v-for( arg ){
//做字符串处理
var data = 'data'
for( var i = 0 ; i < data.length; i++ ){
}
}
条件渲染
两种:
- 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 vs v-show
1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能
* 如果条件为假,v-show有较高的初始渲染开销
* v-if 有更高的切换开销
项目中建议:
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好
事件
事件基础内容:
- 事件的组成部分:
1. DOM
2. on 添加事件的形式
3. 事件类型 click
4. 事件处理函数
vue使用第一种事件添加的形式-- - 》v - on
格式:
v - on: eventType = eventFnName
<button v-on:click="changeMsg">
{{ msg }}
</button>
//
changeMsg() {
this.msg = 'hello 我骏哥~~~'
},
简写:
@eventType = eventFnName
<h3> 事件传参 </h3>
<button @click="argHandler('hello 骏哥~~~')">
eventArgument
</button>
<h3> 事件对象 </h3>
<button @click="eventHandler">
event
</button>
//
argHandler(value) {
alert(value)
},
eventHandler(e) {
console.log(e)
},
事件处理函数写在配置项中 methods中
书写步骤:
先写方法, 再去绑定
需求:
我们有一个方法, 这个方法中有两个参数, 第一个参数是自定义参数, 第二个参数是事件对象
问题: 第二个参数 事件对象 = undefined
原因: 当我们自定义参数后, 系统无法自动识别, 是不是事件对象
解决: 传入事件对象的实际参数: $event
<h3> 事件多个参数 </h3>
<button @click="evHandler('骏哥',$event)">
args
</button>
//
evHandler(arg, e) {
console.log(arg)
console.log(e)
}
事件修饰符
举例:事件冒泡
通过举例告诉大家, e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案: 使用事件修饰符(modify)
格式:
v-on:eventType.modify = eventFnName
<button @click='destory'> 销毁 </button>
<div @click.self="bigHandler" v-if="f">
<p @click.stop='smallHandler'></p>
</div>
//
bigHandler(e) {
alert('bigger')
},
smallHandler(e) {
alert('small')
// e.stopPropagation()
}, destory() {
this.f = !this.f
},
类型:
.stop : 阻止冒泡行为
.prevent :阻止浏览器默认行为
.capture : 阻止捕获行为
.self : 自身触发
.once : 只执行一次
.passive : 行为结束后触发(scroll)
键盘修饰符( 键盘事件 keyup keydown keypress)
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<input type="text" @keyup.p="submitHandler">
//
submitHandler() {
alert('keyup')
},
自定义按键修饰符
- 全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用:
@keyup.自定义修饰符 = eventFnName
自定义事件(自定义事件类型)
如何定义?
- 使用new Vue() 的到的实例来定义
vm.$on(eventName,callback) - 如何触发呢?
vm. e m i t ( e v e n t N a m e ) t h i s . emit(eventName) this. emit(eventName)this.emit(eventName)
1. vm.$on('my-event', function() {
console.log('自定义事件')
})
2. <button @click="myEventHandler">
my-event
</button>
3. myEventHandler() {
this.$emit('my-event')
console.log('events')
}
单项 双向数据绑定
- 单项数据绑定:
- 概念;
将数据和属性进行绑定, 也就是原生身上的属性的值就是数据 - 格式
v-bind:attr = data
简写:
:attr = data
数据更改 , 视图就更新
- 概念;
- 双向数据绑定
数据改变, 视图更新,
视图改变, 数据更新- 格式:
v-model:attr=data
简写:可以省略属性
v-model=data - 特别强调:
v-model用于表单, v-model默认绑定了value属性
需求: 使用单项数据绑定实现双向数据绑定?
- 格式:
提示:
<div id="app">
<input type="text" v-bind:value="msg" @input="dobu">
<input type="text" v-model="msgmodel">
</div>
//
new Vue({
data: {
msg: 'hello vue.js',
msgmodel: 'model'
},
methods: {
dobu(e) {
this.msg = e.target.value
}
}
}).$mount('#app');