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. [Songqw.Net 基础]WPF实现简单的插件化开发

    原文:[Songqw.Net 基础]WPF实现简单的插件化开发 版权声明:本文为博主原创文章,未经博主允许可以随意转载 https://blog.csdn.net/songqingwei1988/ar ...

  2. OpenGL(十二) 纹理映射(贴图)

    OpenGL绘制纹理的步骤: 1. 开启纹理功能 使用glEnable(GL_TEXTURE_2D)开启2D纹理功能,使用glDisable(GL_TEXTURE_2D)关闭纹理,默认情况下纹理是关闭 ...

  3. ng-zorro 子菜单

    效果 代码 // 初始化菜单 // res.menu是一个Menu数组 // 在后端创建子菜单 res.menu.push({ text: "", i18n: "子菜单& ...

  4. js动态创建表格

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Django 下添加左侧字段显示和搜索

    在对应的apps下建立xadmin.py from .models import EmailVerifyRecord import xadminclass EmailVerifyRecordAdmin ...

  6. 没必要看源码。。把文档学通就已经牛逼了(我们大多还是在应用层,还达不到研究的程度。附class与examples大全链接)

    [学霸]深圳-鑫 2017/7/11 13:54:07只是学习怎么用QT的话,不用看源码.看帮助文档就很好要学习编码风格与思路,就看看源码 [学神]武汉-朝菌 2017/7/11 13:54:39没必 ...

  7. TaskBarProgress(任务栏进度条)

    原文:TaskBarProgress(任务栏进度条) </Grid> { { InitializeComponent(); Loaded += } { BackgroundWorker w ...

  8. 2018-4-25 1.如何在GitHub上新建一个新的项目并下载该项目及如何提交新的文件

  9. RDLC报表 分组排序设置

    原文:RDLC分组排序设置 RDLC中反复设置表的排序字段,设置数据源排序后绑定均无效. 需要在分组字段右击组属性中,修改对应的排序字段,即可.

  10. shell产生随机数

    #!/bin/bash # 每次调用$RANDOM都会返回不同的随机整数. # 一般范围为: - (有符号的16-bit整数). MAXCOUNT= count= echo echo "$M ...