Vue基础
引入vue.js
<script src="vue.js路径"></script>
<script>
// 这里写相关JS的代码
</script>
实例化vue对象
const app = new Vue({
// 这里写相关的配置
})
配置
el
挂载点，讲对应符合选择器要求的挂载点，作为vue的模板（只有变成模板才能去使用模板语法）
new Vue({
el: "#app"
})
data
如果我们把数据放在data中，那么我们就可以在页面模板中直接使用这些data，如果实在new Vue中的相关函数里，我们可以使用this.xxx获取对应的data
new Vue({
el: "#app",
data: {
msg: "消息"
}
})
/*
模板插值可以使用 {{msg}}
new Vue的函数中可以使用 this.msg获取 this.msg="新的值"设置
*/
methods
我们可以把项目中涉及到的函数以及事件函数防止在methods中。
事件函数绑定
我们需要使用v-on指令，具体操作在v-on内容
直接调用
如果想要在一个函数中调用另外一个函数，可以使用this.函数名()
插值
插值可以使用 {{}}
<html>{{msg}}</html>
指令
v-show
设置元素的显示隐藏状态，是css级别的（display）
v-text、v-html
相当于innerText、innerHTML
v-if、v-else-if、v-else
我们可以通过条件判断来决定html是否渲染（在一些页面上，相同的位置，有不同的状态，就可以使用该方法去解决对应的渲染问题）
<div id="app">
<!-- 当arr有数据是渲染数据，没有数据时显示暂无数据 -->
<div v-if="!arr.length">暂无数据</div>
<div v-else>{{arr}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
arr: []
}
})
</script>
v-for
当我们要对数据进行遍历渲染列表时可以使用v-for
v-for一定要添加key，v-for和v-if尽量不要在同一个标签上使用，可以利用template标签
<!--
item是自定义的名字，表示数组中遍历出的每一个单个的内容
index是下标，也可以自定义名字
arr是data中的数据的属性名
-->
<div v-for="item in arr"></div>
<div v-for="(item, index) in arr"></div>
<div v-for="(value, key, index) in obj"></div>
v-bind
在页面标签里插入内容用 {{}}，如果我们想要在标签属性中插值，可以使用v-bind:属性="动态值"
v-bind可以缩写为:
<img :src="data中相关属性名">
class的绑定
class的绑定有多种用法
<div :class="className"></div>
<div :class="[className1, className2, className3]"></div>
<div :class="{active: activeStatus}"></div>
<div :class="['box', {active: activeStatus}]"></div>
style的绑定
样式的绑定后面跟着的可以是一个对象，对象中包含相关css属性及值
<div :style="{width: '100px', height: '100px'}"></div>
v-model
v-model是实现双向绑定的指令，v-model支持表单的各种元素。v-model就是为了方便我们获取表单中value值
见到表单元素就添加v-model，并且在data中给单独的表单设置单独的对象，对象中包含的所有属性都是每个表单元素的value
<input v-model="value">
v-on
v-on为了实现事件的绑定
<button @click="methods中的函数名">
<button v-on="{click: mehtods中函数, 其他事件类型: methods中函数}">
v-pre
不让vue进行渲染
v-once
只渲染一次，渲染后会失去和数据之间的管理
v-cloak
需要结合css使用
[v-cloak] {
display: none;
}
扫一扫
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
