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的基本操作的更多相关文章
- 前端Vue之vue的基本操作
1.1 vue.js的快速入门使用 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中 ...
- vscode+vue 一些基本操作
1.安装好 vscode 和 node.js 安装node.js是为了用npm(管理项目依赖) 2.调出终端 crtl +~ , 3.终端全局安装 vue-cli 安装整个脚手架,能快速给我们构建v ...
- Vue的生命周期--代码片段
Vue 实例有一个完整的生命周期,也就是从开始创建. 初始化数据. 编译模板. 挂载 Dom. 渲染→更新→渲染. 销毁等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销 ...
- Vue插件plugins的基本操作
前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...
- vue学习之路 - 2.基本操作(上)
基本操作(上) 本章节简介: vue的安装 vue实例创建 数据绑定渲染 表单数据双向绑定 事件处理 安装 安装方式有三种: 一.vue官网直接下载 http://vuejs.org/js/vue.m ...
- vue学习之路 - 4.基本操作(下)
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- vue学习之路 - 3.基本操作(中)
基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if . ...
- vue.js的基本操作
1.{{message}}输出data数据中的message. 2.v-for="todo in todos"输出data数据中的dotos数组 3.v-on:click=&quo ...
- 使用eclipse初步学习vue.js的基本操作 ①
一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...
随机推荐
- ios6和ios5横竖屏切换
记录于2013/8/5 在切换横竖屏的时候调用到的一些委托方法: #pragma mark - UIApplicationDelegate //写在Appdelegate中,在具体的某一视图控制器 ...
- 多个PVSS数据点属性读写的优化处理
注:本译文出自15多年前,尚未用最新软硬件平台进行重新测试,只提供方法论层面的参考,具体性能指标不具备参考意义. 多个PVSS数据点属性读写的优化处理 本文档概述了测试三种读取和写入多个PVSS数据点 ...
- Dancing Links 学习笔记
Dancing Links 本周的AI引论作业布置了一道数独 加了奇怪剪枝仍然TLE的Candy?不得不去学了dlx dlxnb! Exact cover 设全集X,X的若干子集的集合为S.精确覆盖是 ...
- rhel 7安装Mysql
rhel7安装mysql服务 环境: 1)rhel 7虚拟机 2)配置完163网络yum源,并且保证网络通畅 安装过程: 1) 安装Mysql和Mysql-devel 命令:yum install m ...
- php 记录日志时 基础的日志格式
2019-02-19 11:29:56 /api/shop/shopManagements?shopId=undefined REQUEST:HTTP://mutest.drcloud.cn/mo ...
- 性能之ab简单使用
ab是apache自带的性能测试工具,他所有关注的请求返回的状态码(2XX),不关心后续处理过程,所以测试时间很小,严重依赖CPU颗粒数 一.进入ab存放的目录执行./ab.其中/ab [option ...
- 图解Raft之领导者选举
图解Raft领导者选举,这里通过五张图来解答Raft选举的全过程: Raft集群各个节点之间是通过RPC通讯传递消息的,每个节点都包含一个RPC服务端与客户端,初始时启动RPC服务端.状态设置为Fol ...
- python中的单向循环链表实现
引子 所谓单向循环链表,不过是在单向链表的基础上,如响尾蛇般将其首尾相连,也因此有诸多类似之处与务必留心之点.尤其是可能涉及到头尾节点的操作,不可疏忽. 对于诸多操所必须的遍历,这时的条件是什么?又应 ...
- grunt 插件
一个简单的 grunt 插件, 作用是 把 css 文件中的 /images/ 替换成指定的 url path, 以实现 图片 cdn 路劲改造 插件项目文件结构 grunt-contrib-s ...
- ubuntu Anaconda install
在文件目录下执行: bash Anaconda3-4.2.0-Linux-x86_64.sh 根据提示输入回车 这里需要查看注册信息,回车浏览完信息即可 阅读完注册信息后,这里输入“yes” 回车即可 ...