VUE页面基本组成与个人理解

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;
    }