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. Akka边学边写(1)-- Hello, World!

    Akka Akka是什么呢?直接引用Akka站点上面的描写叙述吧: Akka is a toolkit and runtime for building highly concurrent, dist ...

  2. Java Swing界面编程(29)---JCheckBox事件处理

    JCheckBox和JRadioButton的事件处理监听接口是一样的,都是使用ItemListener接口. package com.beyole.util; import java.awt.Con ...

  3. python 教程 第十一章、 异常

    第十一章. 异常 1)    try/except/else格式 try: s = raw_input('--> ') except EOFError: print 'Why did you d ...

  4. 服务器做RAID10

    将接上Raid card的机器开机,根据提示按组合键进入Raid配置界面(一般是按Ctrl+H,具体的根据提示进行即可)   点击Configuration Wizard,选择new configur ...

  5. sqlserver检查sql执行时间

    set statistics profile onset statistics io onset statistics time onGO select * from mytable; goset s ...

  6. linux的自动化操作相关使用方法汇总 专题

    Crontab中的除号(slash)到底怎么用? crontab 是Linux中配置定时任务的工具,在各种配置中,我们经常会看到除号(Slash)的使用,那么这个除号到底标示什么意思,使用中有哪些需要 ...

  7. chrome 浏览器的常用命令收录

    chrome://settings(设置) chrome://extensions(扩展程序) chrome://history(历史记录) chrome://settings/clearBrowse ...

  8. foruok安晓辉的《程序员,你好哇》,都很不错

    http://blog.csdn.net/foruok 买书: http://item.jd.com/11904166.html

  9. Linux使用技巧:linux下将命令值赋给shell变量

    很多小伙伴在写shell脚本的时候需要把命令输出的值赋给一些变量,使得脚本在运行过程中能够顺利使用这些变量.例如:很多时候我们就需要获取当前目录的绝对路径,pwd这个命令大家在熟悉不过,可是要把这个命 ...

  10. 核心思想:评价早期SaaS创业公司时,投资人在关注什么?(是否有机会发展成一个平台,长期的护城河)

    编者按: 当聊到早期项目时,人们经常会问投资人一个问题:“在评价早期 SaaS 创业公司时,投资人会关注什么——指标还是其他方面?” Nakul Mandan 作为 Lightspeed 风投机构的合 ...