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随笔的更多相关文章

  1. Vue随笔记录

    一.创建Vue步骤(VS Code)    1.全局安装       npm install -g vue-cli 2.新建项目    vue init webpack "project-n ...

  2. VUE随笔-20181020

    常用的一些指令 -------------------------------------------------------------------------------------------- ...

  3. vue 随笔3

    在整个vue项目中index.js只能有一个 ,创建vue组件实例的代码只能写在main.js中或者index.js中,别的文件中都是使用export default 常量 或者是方法

  4. vue 随笔 vue 的属性和方法

    新建的项目中main.js是项目的入口文件 npm run dev 运行文件 npm run bulid  编译 属性与方法 每个Vue实例都会代理其 data 对象里所有的属性: var data= ...

  5. vue随笔2

    vue2.0中移除.sync修饰符 .sync可是实现props的双向数据绑定,但是会破坏[单向数据流]的假设.这样的话在改变子组件时,父组件同时也改变,你完全不知道它是何时悄悄地改变了父组件的状态. ...

  6. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  7. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  8. vue使用中的随笔

    在vue中vue-router配置的路径默认有"#"号,虽然无伤大雅,但是很多客户都不想看到,所以在初始配置路由的时候加上下面一句代码就可以了 mode:'history', 路径 ...

  9. VUE之随笔小总结1

    VUE 它是一个构建用户界面的JavaScript框架vue指令: 是带有v-前缀的特殊属性,通过属性来操作元素 v-text:在元素当中插入文本 eg:属性值会覆盖自己插入的值 //插入一段文本&l ...

随机推荐

  1. Global Contrast based Salient Region Detection (Ming ming Cheng)

    abstract: Automatic estimation of salient object regions across images, without any prior assumption ...

  2. python 教程 第二章、 类型

    第二章. 类型 常量 5,1.23,9.25e-3,’This is a string’,”It’s a string!” 1) 数 整数:2 长整数: 浮点数:3.23,52.3E-4 复数:-5+ ...

  3. WPF 窗体显示最前端

    原文:WPF 窗体显示最前端 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/jjx0224/article/details/8782845 如何做一 ...

  4. 使用HANDLE_MSG宏简化Win32应用的开发

    http://blog.csdn.net/daiyutage/article/details/17241161 Win32应用中的回调函数WndProc用于接收Windows向应用程序直接发送的消息, ...

  5. MQTT协议学习及实践(Linux服务端,Android客户端的例子)

    前言 MQTT(Message Queuing Telemetry Transport),是一个物联网传输协议,它被设计用于轻量级的发布/订阅式消息传输,旨在为低带宽和不稳定的网络环境中的物联网设备提 ...

  6. ajax默认form表单提交,导致实体不识别

    出现位置:实体比较复杂,包含List之类的时候 public class AdvertisementType { /// <summary> /// 广告位名称 /// </summ ...

  7. 【C#】WindowsAPICodePack-Shell使用教程

    原文:[C#]WindowsAPICodePack-Shell使用教程 1.首先在项目中添加WindowsAPICodePack的Nuget包.   点击安装即可. 2.获取<我的电脑>的 ...

  8. 一个字体,大小,颜色可定义的自绘静态框控件-XColorStatic 类(比较好看,一共19篇自绘文章)

    翻译来源:https://www.codeproject.com/Articles/5242/XColorStatic-a-colorizing-static-control XColor Stati ...

  9. iOS UIScrollView使用Autolayout

    最近项目在迭代更新的时候,需要在之前用Autolayout写的界面里添加一个button,添加完这个button后,iPhone5,iPhone4显示不全了.遇到整个问题后很自然就想到了用UIScro ...

  10. window下golang生成静态库给C语言调用

    buidmod为c-archive能在window下生成 ,c-shared则不行 1.golang生成c-archive静态库 main.go package main import "C ...