最近刚跳到一个新公司 不是很忙 决定系统的学习一下VUE这个前端框架 参考官方API

好了 废话不多说 开始了

首先 说一下吧 现在很火的主流三大前端框架 Vue,Angular、React, 为什么选择Vue呢 因为它的作者尤雨溪是中国人 所以有中文API文档

其次 这个名字 也太好听了吧

ok 废话不多少 开始

开始之前呢 首先要有Jquery的基础 熟悉Jquery 的dom和bom 操作

然后再颠覆对Jquery操作dom的认知

对了 学习之前呢 还要有一些es6的基础

说一点简单的吧

1. let 和 const

  可能之前了解Jquery的都知道var  但是var 存在一个什么问题呢  变量提升!

这个相信大家都可以看得懂

那么大家认为 会输出什么的 6 对不对

结果却不是

是10  为什么 变量提升 对

而let 和 const就不会存在这个问题

好 现在整理一下 let  const 和 var  的区别

1.let 和 const 是局部作用域

2.let 和 const 不会存在变量提升

3. let 和 const 不可重复声明

那let 和 const 有什么区别呢

const 只声明常量

什么意思呢 const 声明一个变量后 不可被改变 赋值 修改

2.模板语法

这样 会输出什么呢

没错 我是张三

注意的是 要用tab键上面的反引号

3. 箭头函数

下面是浏览器输出结果

第一个是传统写法 第二个是es6 箭头函数写法 第三个是es6 沙雕的变态写法

ok 相信大家已经掌握了

4.es6 里的对象

这是js里面一个传统的对象

下面我们把他改造成箭头函数

ok 没有什么问题 mike同学说的很对

但是大家一定发现了一个问题 什么呢 this的指向变了 从当前对象变成了 父级对象 也就是上下文  所以箭头函数会改变this 指向

敲黑板  重点啊

这种写法 被称为单体模式 和第一种function的匿名函数 效果一样 不会发生this的指向改变

OK 这就差不多了 下面正式学习Vue

首先 我们在项目中引入了 vue.js 这是一种比较简单的方法 如果后期你需要做带项目 可以搭脚手架 引入包

这就是Vue的核心思想 数据驱动 对 将数据渲染进 DOM 的系统 然后实现数据绑定

需要注意的是el 需要绑定一个对象

绑俩也行

new 两个Vue

可以 但是没必要 我这么讲 你懂吧

然后 Vue 还可以这么玩

行了 今天就这样吧 今天有点累 睡了睡了

VUE 从零开始 学习笔记 一的更多相关文章

  1. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  2. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  3. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  4. Vue 新手学习笔记:vue-element-admin 之安装,配置及入门开发

    所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架 ...

  5. Vue.js——学习笔记(一)

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  6. Vue.js 学习笔记之二:数据驱动开发

    在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...

  7. Vue.js 学习笔记之三:与服务器的数据交互

    显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...

  8. Vue.js 学习笔记之四:Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  9. Vue.js 学习笔记之五:编译 vue 组件

    正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...

随机推荐

  1. windos批处理启动redis与哨兵

    为各个启动单独建立脚本后用总的bat调用 创建脚本,redis6379.bat脚本内容:@echo offtitle redis-serverset ENV_HOME6379="G:\Red ...

  2. Android Stuido中断点调试和高级调试

    写一个简单的调试程序 import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class M ...

  3. 动态执行表不可访问,或在v$session

    PLSQL Developer报“动态执行表不可访问,本会话的自动统计被禁止”的解决方案 PLSQL Developer报“动态执行表不可访问,本会话的自动统计被禁止”的解决方案 现象: 第一次用PL ...

  4. C#连接内存数据库redis【1、安装配置】

    Redis是一个不错的缓存数据库,读取数据速度效率都很不错.今天大家共同研究下redis的用法.结合网上的资料和自己的摸索,先来看下安装与配置把. 咱们主要看在WINDOWS上怎样使用REDIS数据库 ...

  5. 转:Zepto的使用以及注意事项

    为什么选择Zepto.js的原因: zepto.js的语法借鉴并且兼容jQuery,会使用jquery就会使用Zepto.js.Zepto.js是移动端的js库.Zepto.js相当于PC端的jQue ...

  6. JAVA_day2_运算符

    Java运算符 一.算术运算符 ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果不同 1.++在左边,a先自增1再赋值给b int a=3 int b=++a 2.++在右边,先赋值 ...

  7. 亚马逊s3存储: aws cli上传工具速度和各文件大小关系探究

    1,背景介绍 公司最近最近统一了存储环境,由ftp文件存储全量转换为ceph存储.有业务组表示以前往ftp文件批量上传30万个文件1.3GB只需要16分钟左右.切换为ceph存储需要1个多小时,也就是 ...

  8. 【AMAD】beaker -- 用于session和缓存的WSGI中间件

    简介 动机 作用 个人评分 简介 Beaker1是一个web session和通用缓存库,并且包含一个WSGI中间件可以用于你的web应用. 动机 Beaker是基于MyghtyUtils2(一个古老 ...

  9. 手写k-means算法

    作为聚类的代表算法,k-means本属于NP难问题,通过迭代优化的方式,可以求解出近似解. 伪代码如下: 1,算法部分 距离采用欧氏距离.参数默认值随意选的. import numpy as np d ...

  10. c++ 读入优化通用模板

    struct ioss { #define endl '\n' ; char obuf[LEN], *oh = obuf; std::streambuf *fb; ioss() { ios::sync ...