vue随笔
1.vue基础
Vue 是一个mvvm 的渐进式框架。Angular 是一个mvc的。所以vue的重点更偏向于mv
他的使用方式
大家会发现里面带有大量的$的属性。
学习vue的指令
V-for 用于便利data中的数组
V-bind 用于动态绑定元素的属性 简写 : 如:class=”aa”
V-on 用于绑定元素的事件 v-on简写 @如 @click=“fn()”
V-if=”aa”
V-if 当值为true元素显示 值为false 元素消失 这个是Dom操作
V-model=”ss” 实现双向数据绑定,主要针对表单
补充 事件的修饰符
事件在操作的时候,会出现一些问题,冒泡和捕获。
V针对这些问题 做了一些修改 提出了一些修饰符 在事件后面加个点.写上对应得修饰符就OK了
V-html 跟{{}}
2,组件
组件 component
Vue本身就是一个大组件 根组件 其他的组件都是他的子组件。
组件三部曲
第一步 定义组件
第二步 注册组件
第三部 调用组件
组件模板: 注意 每个模板必须且只能有一个顶层div
嵌套组件
嵌套组件 首先 搞清父子关系 然后在老实的按照组件三部曲走。
组件的生命周期 (钩子函数)
因为组件本身没有这个东西,是我们人为创造的,那么就会出现一个从无到有的过程,这个过程叫生命周期,
三个步骤六个过程
Created 创造 beforeCreated created
Mounted 加载 beforeMounted mounted
Destroy 销毁 beforeDestroy destroyed
动态组件
组件通信
父组件将数据传递给子组件
子组件给父组件传递信息 (自定义事件)
Vue 给我们提供了自定义事件的方法$emit(参数1,参数2) 参数1 是事件名 参数2是数据
父传子 还是子传父 这种组件的数据通信只适合于中小型项目。如果出现大量数据处理,
我们就需要一个状态机专门来管理这些数据,
vuex
如何子传父,如何父传子。父组件如何去获取子组件里面的数据和方法?
Ref 是父组件获取当前下的子组件的实例对象。
第一步 需要给要获取的子组件标签上加 ref=”” 属性
第二步 可以在控制台 输出 this.refs 会发现这是由ref构成的一个集合
第三部 该干嘛干嘛
路由 router
Vue路由 我们分成两块
Html中的的书写格式
是我们路由配置模块 定配实挂(定义组件 配置路由 实例化路由 挂载对象的组件下)
在实例化的时候,我们的路由有两种,一种默认的hash路由,还有一种是history。
History就是通过path的感觉
路由补充的
结果是
传参
路由嵌套
分两部分
vue随笔的更多相关文章
- Vue随笔记录
一.创建Vue步骤(VS Code) 1.全局安装 npm install -g vue-cli 2.新建项目 vue init webpack "project-n ...
- VUE随笔-20181020
常用的一些指令 -------------------------------------------------------------------------------------------- ...
- vue 随笔3
在整个vue项目中index.js只能有一个 ,创建vue组件实例的代码只能写在main.js中或者index.js中,别的文件中都是使用export default 常量 或者是方法
- vue 随笔 vue 的属性和方法
新建的项目中main.js是项目的入口文件 npm run dev 运行文件 npm run bulid 编译 属性与方法 每个Vue实例都会代理其 data 对象里所有的属性: var data= ...
- vue随笔2
vue2.0中移除.sync修饰符 .sync可是实现props的双向数据绑定,但是会破坏[单向数据流]的假设.这样的话在改变子组件时,父组件同时也改变,你完全不知道它是何时悄悄地改变了父组件的状态. ...
- 深入了解Element Form表单动态验证问题 转载
随风丶逆风 2020-04-03 15:36:41 2208 收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- vue使用中的随笔
在vue中vue-router配置的路径默认有"#"号,虽然无伤大雅,但是很多客户都不想看到,所以在初始配置路由的时候加上下面一句代码就可以了 mode:'history', 路径 ...
- VUE之随笔小总结1
VUE 它是一个构建用户界面的JavaScript框架vue指令: 是带有v-前缀的特殊属性,通过属性来操作元素 v-text:在元素当中插入文本 eg:属性值会覆盖自己插入的值 //插入一段文本&l ...
随机推荐
- mysqldump 定时备份数据(全量)
MYSQL 数据库备份有很多种(cp.tar.lvm2.mysqldump.xtarbackup)等等,具体使用哪一个还要看你的数据规模.下面给出一个表 #摘自<学会用各种姿态备份Mysql数据 ...
- Linux 下非 root 用户安装 theano(配置 GPU)
非 root 用户,安装 Python 第三方的包,尤其像 theano,存在大量的依赖项,存在的主要问题,是安装各个包时的权限问题.所幸,存在这样一个集成工具,叫 anaconda,其已经内置了许多 ...
- EntityFrameworkCore 一对一 && 一对多 && 多对多配置
基本数据结构 表设计如下: 入学记录 public class AdmissionRecord { [Key] public long Id { get; set; } public DateTime ...
- 数据绑定(七)使用ObjectDataProvider对象作为Binding的Source
原文:数据绑定(七)使用ObjectDataProvider对象作为Binding的Source ObjectDataProvider就是把对象作为数据源提供给Binding,类似的还有XmlData ...
- 微信小程序把玩(十四)button组件
原文:微信小程序把玩(十四)button组件 button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type=&qu ...
- 15 款 jQuery 社交分享插件
过去几年中社交媒体越来越流行了,能够分享音乐.视频.图像甚至是其他的 docs 文档到互联网上去,这样子还能够提高页面的点击量.通常,一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台 ...
- 更改当前电源策略(使用SetActivePwrScheme API函数),自定义电源按钮动作(设置GLOBAL_POWER_POLICY)
#include <windows.h> #include <Powrprof.h> #pragma comment(lib, "Powrprof.lib" ...
- VS2010使用c++、gSOAP创建WebService 图文教程
VS2010使用c++.gSOAP创建的WebService 图文教程 环境 操作系统:Windows 7gsoap版本:2.8.32C++编译器/开发环境:Visual Studio 2010 gS ...
- Windows 7 频繁提示:计算机的内存不足
最近由于同时打开的程序比较多,Windows 7 频繁提示:计算机的内存不足,如下图: 问题原因: 经过一番尝试,得出一个大概的结论:当虚拟内存空间的大小小于物理内存空间的大小时,一旦程序开的太多,物 ...
- Memory Ordering (注意Cache带来的副作用,每个CPU都有自己的Cache,内存读写不再一定需要真的作内存访问)
Memory Ordering Background 很久很久很久以前,CPU忠厚老实,一条一条指令的执行我们给它的程序,规规矩矩的进行计算和内存的存取. 很久很久以前, CPU学会了Out-Of ...