一、vue简介:
1.是JavaScript框架,需要遵守规则才能使用
2.简化DOM操作
3.响应式数据驱动
二、vue属性
1.el:挂载点:设置Vue实例挂载(管理)的元素
(1)el命中的元素范围内都是作用范围,可以嵌套其他双标签(最好不要挂在body、HTML标签上,尽量使用div)
(2)可以用类选择器、标签选择器,但一般使用id选择器
2.data属性
<div id="app">
{{message}}
<h2>{{school.name}}</h2>
{{campis[0]}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello xiaominmin!',
school: {
name: "小敏敏",
mobile: "110"
},
campis: ["四川", "福建"]
}
})
</script>
三、本地应用
1.v-text:设置标签的文本值,会替换标签内所有的文本,插值表达式{{message}}只替换大括号内的。
<!-- 导入开发版本的VUE.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- 引号里可以是表达式 -->
<h2 v-text="message"></h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello 小敏敏'
}
})
</script>
2.v-html:设置标签的innerHTML,对于普通文本效果和v-text相同,但对于htm结构可以把值解析为相应的结构
<!-- 导入开发版本的VUE.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- 引号里可以是表达式 -->
<h2 v-text="message"></h2>
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello 小敏敏',
content: "<a href='https://www.bilibili.com/video/BV12J411m7MG?p=8&spm_id_from=pageDriver'>Hello 小敏敏</a"
}
})
</script>
3.v-on:为元素绑定事件
.修饰符对绑定事件进行修饰,例如.enter是限制按下enter键才触发事件
v-on:可以用@替换,message与data、el平级
<!-- 导入开发版本的VUE.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on指令" @click="doIt">
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
doIt: function() {
alert("揍你!");
}
}
})
</script>
4.v-show:根据表达式值的真假,切换元素的显示和隐藏。
v-show的值可以是变量、表达式,只要能得到布尔值(true/false)就行。
<!-- 导入开发版本的VUE.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="切换" id="" @click="changeIshow">
<br>
<img src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg" alt="" v-show="ishow">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
ishow: false
},
methods: {
changeIshow: function() {
this.ishow = !this.ishow
}
}
})
</script>
5.v-if:根据表达式真假切换元素的显示状态(直接操作元素,不是改变样式)
用法与v-show一样,不过v-if隐藏时直接把元素从结构(dom树中)中去除
频繁切换用v-show,反之用v-if
6.v-bind:设置元素的属性(src、img等)
v-bind:可以用:代替,常用于点击时被选中元素改变样式:设置class值,可以使用三元表达式或对象形式
7.v-for:根据数据生成列表结构
<!-- 导入开发版本的VUE.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in arr">你好</li>//生成arr.length个你好的li
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
methods: {
// }
}
})
</script>
8.v-model:获取和设置表单元素的值(双向数据绑定:绑定的数据回合表单元素相关联,更改任意一边都会改变)
<div id="app">
<input type="text" v-model="message">
<!-- 改变input里时下面message同步更新 -->
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "xiam"
},
methods: {
}
})
</script>