vue:基础整理(一)
程序员文章站
2024-02-19 13:58:30
...
一.vue的基本代码
<div id="app">
<p>{{ msg }}</p>
</div>
desc:id为app的元素区域的所有内容,是将来new的vue实例所要控制的
<script>
var vm = new Vue({
el:'app',
data:{
msg:'HelloWorld'
}
})
</script>
desc:
1.new出来的这个vm对象,就是mvvm中vm的调度者
2.data:{ }就是mvvm中的M,用来保存每个页面的数据
3.message:‘HelloWorld’:通过vue指令 v-bind 属性绑定渲染到页面,不需要再手动操作dom
二.v-指令
1.v-cloak:解决插值表达式闪烁的问题
<p>{{msg}}</p>
<p v-cloak>{{ msg }}</p>
2.v-text:用于渲染普通文本,会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空。
<div>===={{msg}}===</div>
<div v-text="msg"></div>
3.v-html
<div v-html="msg_html"></div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg_html:'<h1>HelloWorld</h1>'
}
})
</script>
4.v-bind: Vue提供的属性绑定机制 缩写是 :
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
5.v-on:Vue提供的事件绑定机制 缩写是 @
<input type="button" value="按钮" :title='myTitle' v-on:click="alert('hello')">
<input type="button" value="按钮" @click="show">
三.事件修饰符
- .stop 阻止冒泡事件
- prevent 阻止默认行为 如标签的跳转;表单的提交submit事件
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
- .capture 实现捕获触发事件的机制;组件嵌套从外到里执行
<div @click.capture = "handlerDiv">
<input type="button" value="戳" @click = "handlerInput">
</input>
</div>
点击“戳”按钮时,先执行handlerDiv的方法,再执行handlerInput的方法
- .self 实现只有点击当前元素时候,才会触发事件处理函数
<div class="inner" @click.self="divHandler">
<input type="button" value="戳" @click="btnHandler">
</div>
点击“戳”按钮,只会走btnHandlere方法(即阻止冒泡),只有当点击div的时候才会触发divHandler方法
- .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
只阻止一次linkClick行为 第二次会跳转到百度首页
四.v-model指令:实现表单元素和Model中数据的双向绑定
注意:v-model 只能运用在 表单元素中 常见的有
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button" value="确认" />
<input type="submit" value="提交" />
等等… 因为其他元素的值没法在页面修改,也就不能实现V中数据传给M,只能M传给V
<input type="text" style="width:100%;" v-model="msg">
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'zzzz'
},
methods: {
}
});
</script>
五.v-for
1.循环普通数组
<p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
data: {
list: [1, 2, 3, 4, 5, 6]
},
2.循环对象数组
<p v-for="(user, i) in list">Id:{{ user.id }},名字:{{ user.name }},索引:{{i}}</p>
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
3.循环对象
<!-- 注意:在遍历对象身上的键值对的时候, 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是: {{ val }} ,键是: {{key}} ,索引: {{i}}</p>
data: {
user: {
id: 1,
name: 'xxx',
gender: '男'
}
},
4.循环数字
<!-- 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
5.key属性的使用
<!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
<!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
data: {
id: '',
name: '',
list: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' },
{ id: 4, name: 'D' },
{ id: 5, name: 'E' }
]
},
六.v-if,v-show的使用
<input type="button" value="toggle" @click="flag=!flag">
<!-- v-if 的特点:每次都会重新删除或创建元素 -->
<!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
总体结构:
1.vue的基本代码
2.vue指令
3.事件修饰符( .stop .prevent .capture .self .once)
4.v-model
5.v-for
6.v-if与v-show
上一篇: 基础整理(一)