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的基本操作的更多相关文章

  1. 前端Vue之vue的基本操作

    1.1 vue.js的快速入门使用 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中 ...

  2. vscode+vue 一些基本操作

    1.安装好 vscode 和 node.js 安装node.js是为了用npm(管理项目依赖) 2.调出终端 crtl +~ , 3.终端全局安装 vue-cli  安装整个脚手架,能快速给我们构建v ...

  3. Vue的生命周期--代码片段

    Vue 实例有一个完整的生命周期,也就是从开始创建. 初始化数据. 编译模板. 挂载 Dom. 渲染→更新→渲染. 销毁等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销 ...

  4. Vue插件plugins的基本操作

    前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...

  5. vue学习之路 - 2.基本操作(上)

    基本操作(上) 本章节简介: vue的安装 vue实例创建 数据绑定渲染 表单数据双向绑定 事件处理 安装 安装方式有三种: 一.vue官网直接下载 http://vuejs.org/js/vue.m ...

  6. vue学习之路 - 4.基本操作(下)

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  7. vue学习之路 - 3.基本操作(中)

    基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if .  ...

  8. vue.js的基本操作

    1.{{message}}输出data数据中的message. 2.v-for="todo in todos"输出data数据中的dotos数组 3.v-on:click=&quo ...

  9. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

随机推荐

  1. 分布式存储ceph理论

    一.ceph简介 Ceph是一种具有优秀性能,可靠性和可扩展性,统一的分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展.在国内一些公司的云环境中,通常 ...

  2. <玩转Django2.0>读书笔记:邮件和分页

    1. 发送邮件 # settings.py设置 # 邮箱设置 EMAIL_USE_SSL = True # 邮件服务器 EMAIL_HOST = 'smtp.qq.com' # 邮件服务端口 EMAI ...

  3. Mysql表的约束设计和关联关系设计

    https://blog.csdn.net/u012750578/article/details/15026677 Mysql表的约束设计和关联关系设计 ======================表 ...

  4. windows server 远程桌面连接问题。

    远程桌面连接相当于 linux 服务器root权限连接 mstsc /admin /v:目标IP mstsc /admin /

  5. CGI、FastCGI、PHP-FPM联系与区别(理解总结自其他博文)

    参考:http://blog.csdn.net/tyrantbear/article/details/52077321 参考:http://mp.weixin.qq.com/s?src=11& ...

  6. dedecms自定义模型内容调用多个Ueditor

    关于dedecms后台如何整合百度编辑器(ueditor)网上有很多了,本站就不再赘述了,主要问题是,涉及到如果有内容模型的修改,则按照网络上介绍的方法会发现有BUG.当修改过默认的文章模型或者其他模 ...

  7. Mybatis_4.DBUtil.java

    1.获取SqlSessionFactory /** * @author:滕鹏飞 * @version: 1.0 * @Created on: 2018-8-31 下午2:10:45 * 类说明:加载配 ...

  8. Flutter 页面入栈和出栈

    Docs demo import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp ...

  9. 一致性Hash算法在数据库分表中的实践

    最近有一个项目,其中某个功能单表数据在可预估的未来达到了亿级,初步估算在90亿左右.与同事详细讨论后,决定采用一致性Hash算法来完成数据库的自动扩容和数据迁移.整个程序细节由我同事完成,我只是将其理 ...

  10. java中的堆,栈和方法区(转)

    来源:https://www.cnblogs.com/iliuyuet/p/5603618.html https://blog.csdn.net/lin542405822/article/detail ...