VUE基本配置
Vue 不New是函数 New才是对象
.的左边是对象 ()左边是函数
const vm = new Vue({
el: '#app', //绑定DIV的ID值
data: {}, //数据的存储
methods: {}, //方法的创建于调用
computed: {}, //计算Data属性值并返回
watch: {} //监视
mounted(){} //初始化显示之后立即调用
})
vue属性执行详解:
data:
属性值组件
methods:
方法组件
computed:
计算组件
watch:
监视组件
computed:初始化显示/相关的data属性数据发生改变
get(){} set(){} 只可以在computed组件里定义 不能再watch里定义
在computed与watch里声明的方法不可以在Data里进行属性Key声明
强制标签绑定
全写绑定 v-bind:src ="imgUrl"
缩写绑定 :src="imgUrl"
按钮绑定
全写绑定 v-on:click="test"
缩写绑定 @click="test2(msg)"
class绑定 分为三种
:class="'aClass'"
"''"与""的区别: "'aClass'"这个是纯字符串 "aClass" 这个是Data组件的属性值key
字符串绑定 直接输入类选择器名称 切记一定要加''不然会被Vue识别为变量从而导致找不到样式
:class="{'aClass':true,bClass:isB}"
对象绑定 直接以对象形式传输aClass为变量名true为布尔值true为激活false为不激活 isB为Data里的属性名,同为布尔值
:class="['aClass','bClass']"
数组绑定,aClass直接输入类选择器名称就可以
style绑定
:style="{color:activeColor,fontSize:fontSizi+'px'}"
activeColor与fontSizi为Data属性
条件渲染指令 v-if v-else v-show
ok为true
v-if="ok"
如果v-if判断为true则执行v-if所在标签
v-else
如果v-if判断为false则执行v-else所在标签
v-show="ok"
v-show 显示的内容始终是v-show所在的标签
知识点:
v-if v-else 标签会直接删除缓存
v-show 使用display: none;隐藏标签内容
列表渲染
渲染数组
v-for="(p,index) in person" :key="index"
渲染对象
v-for="(item,key) in person[0]" :key="key"
其他标签
获取标签ref内容
ref="content"
this.$refs.content.textContent
content这个可以自定义
刷新网页出现未加载内容
v-cloak
style里写入
[v-cloak]{ //防止闪退
display: none;
}