vue的基本操作

vue的基本概念

挂载点：就是el属性对应html中的节点，实例只会处理挂载点下的内容。

模版：在挂载点内部的内容，也可以将模版内容卸载实例里面

如果有template属性会用模版替换外部html，只要有此属性app中的内容就没有意义，只能有一个根元素，不能是本文节点

插值表达式：<h1>{{message}}</h1> 使用插值表达式可能会出现闪屏问题

v-text表达式：<div v-text="message"></div>

v-html表达式：<div v-html="message"></div>

注意：v-text和v-html的区别：v-html会进行内容转义为html，而v-text则不会

v-once：挂载点的内容页面只渲染一次

基本指令

v-on（可以简写成@）：绑定指令例如：<div v-on:click="onchange"/>

v-bind（可以简写为：）：绑定数据。例如：<div v-bind:class="title" class="title"/> class和:class绑定不会发生冲突

v-model：双向绑定例如：<input v-model="message" type="text"/> <div>{{message}}</div>

v-computed：计算属性只有它依赖的属性的值发生变化的时候他才会重新计算

computed计算“属性”不是方法
-方法不会有缓存，computed会根据依赖(归vue管理的数据，可以响应式变化的)
的属性进行缓存
-两部分组成有get和set（不能只写set） 一般情况下  通过js复制影响其他人或者表单元素设置值的时候可以调用set方法
get()//返回什么结果，就会赋予给checkAll属性
set()//val是给checkAll  赋予值的时候传递过来的

watch观察者，只有值变化的时候才会触发
watch:{
a(newval,oldval){       //watch的属性名字要和观得人的名字一致
console.log(newval,oldval)
}
}
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
使用watch选项允许异步操作，设置中间状态

localStorage()将数据存储在本地
localStroage.setItem('data',JSON.stringify(this.todos));存储数据，名为data

created(){
JSON.parse(localStorage.getItem('data'));
}

filters:过滤属性用于筛选或规范数值例如：{{message | filter1}} filters:{filter1:function(arg){arg++}}

v-watch：侦听属性侦听某某以数据发生变化事发生的时间

v-if:/v-show:判断事件值为true时模块显示，否则消失或隐藏

注：v-if和v-show的区别 v-if会将整个标签在dom树中移除，而v-show只是将display设为none；

v-for：遍历事件例如：<li v-for="(item,index) of list" :key="index">{{item}}</li>

localStorage()：将数据存储在本地

例如： localStorage.setItem('data',JSON.stringify(this.todos)); //存储数据在本地，名为data

created(){ this.todos = JSON.parse(localStorage.getItem('data')); } //读取本地数据

keep-alive:缓存组件一旦缓存不会重复加载，不会走crated和mounted等钩子函数

钩子函数

生命周期：beforCreate created 创建期

beforeMount mouted 挂载期

beforeUpdate updated 更新期

beforeDestroy destroyed 结束期

如果有template属性会用模版替换外部html，只要有此属性app中的内容就没有任何意义了，只能有一个根元素，不能是文本节点

this.$data vm上的数据
this.$watch监控
this.$el 当前el元素
this.$set 后加的属性实现响应式变化
this.$options

this.$refs.dom 获取元素 //如果不是通过v-for循环出来的只能获取一个
<p ref="myp">hello</p>
console.log(this.$refs.myp); //<p>hello</p>

如何数据变化后想要获取都没中的真实内容，需要等待页
面渲染完毕以后再获取,所有最好放在nextTict
例如： this.$nextTick(()=>{console.log(this.$refs.wrap)})

keep-alive缓存组件
一旦缓存不会再走created mounted等钩子函数

子组件和父组件同时拥有mounted，需要等子组件挂载完成后再触发父组件。

巴特西

vue的基本操作

最新文章

热门文章