今日内容

es6的语法

let
特点：

1.局部作用域

2.不会存在变量提升

3.变量不能重复声明
const
特点：

1.局部作用域

2.不会存在变量提升

3.不能重复声明，只声明常量 不可变的量
模板字符串
tab键上面的反引号 ${变量名}来插值

let name = '未来';

let str = `我是${name}`
箭头函数

function(){} === ()=>{} this的指向发生了改变

es6的类

原型 prototype 当前类的父类（继承性）

​

	class Person{

		constructor(name){

			this.name = name;

		}

		fav(){

		}

	}

	Vue的基本用法

vue的介绍

前端有三大框架： 可以去github查看三个框架的 star星

框架 介绍
vue 尤雨溪,渐进式的JavaScript框架
react Facebook公司，里面的高阶函数非常多，对初学者不用好

| angular | 谷歌公司，目前更新到6.0，学习angular得需要玩一下typescript

Vue angular2.0 3.0~6.0 React(高阶函数 es6)初学者不友好 |

vue的基本引入和创建

  • 1.下载

    cdn方式下载

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  • 2.引包

  <script src='./vue.js'></script>

  • 3.实例化

    //2.实例化对象
    
new Vue({
    
    el:'#app', //绑定那块地
    
    data:{
    
        //数据属性  种子
    
        msg:'黄瓜',
    
        person:{
    
            name:'wusir'
    
        },
    
        msg2:'hello Vue'
    
    }
    
});
Vue的模板语法

可以插入任何你想插入的内容，除了if-else if-else用三元运算符代替

<!--模板语法-->

<h2>{{ msg }}</h2>

<h3>{{ 'hhahda' }}</h3>

<h3>{{ 1+1 }}</h3>

<h4>{{ {'name':'alex'} }}</h4>

<h5>{{ person.name }}</h5>

<h2>{{ 1>2? '真的': '假的' }}</h2>

<p>{{ msg2.split('').reverse().join('') }}</p>
Vue的指令系统之v-text和v-html**
v-text相当于innerText

v-html相当于innerHTML
Vue的指令系统之v-if和v-show
v-show 相当于 style.display

v-if和v-show的区别

记住：

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-bind 和v-on
v-bind可以绑定标签中任何属性

v-on 可以监听 js中所有事件

简写：

v-bind:src  等价于   :src

v-on:click 等价于 @click


<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        .box {

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .active{

            background-color: green;

        }

    </style>

</head>

<body>

<div id="app">

    <!--<button v-on:click = 'handlerChange'>切换颜色</button>-->

   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->

    <!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->

    <!--<div class="box" v-bind:class = '{active:isActive}'></div>-->

     <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>

   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->

    <img :src="imgSrc" :alt="msg">

    <div class="box" :class = '{active:isActive}'></div>

</div>

<!--1.引包-->

<script src='./vue.js'></script>

<script>

    //数据驱动视图  设计模式 MVVM  Model  View  ViewModel

    //声明式的JavaScript框架

//    v-bind和v-on的简便写法 :  @

    new Vue({

        el: '#app',

        data() {

            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return

            return {

                imgSrc:'./1.jpg',

                msg:'美女',

                isActive:true

            }

        },

        methods:{

            handlerChange(){

//                this.isActive = !this.isActive;

                this.isActive = false;

            },

            handlerLeave(){

                this.isActive = true;

            }

        }

    })

</script>

</body>

</html>
v-for 遍历列表
v-for可以遍历列表，也可以遍历对象

在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM


<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        .box {

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .active {

            background-color: green;

        }

    </style>

</head>

<body>

<div id="app">

    <ul v-if="data.status === 'ok'">

        <!--v-for的优先级是最高的     diff算法-->

        <li v-for = '(item,index) in data.users' :key="item.id" >

            <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>

        </li>

    </ul>

    <div v-for = '(value,key) in person'>

        {{ key }}-----{{ value }}

    </div>

</div>

<!--1.引包-->

<script src='./vue.js'></script>

<script>

    new Vue({

        el: '#app',

        data() {

            return {

                data: {

                    status: 'ok',

                    users: [

                        {id: 1, name: 'alex', age: 18},

                        {id: 2, name: 'wusir', age: 30},

                        {id: 3, name: 'yuan', age: 48}

                    ]

                },

                person:{

                    name:'alex'

                }

            }

        },

        methods: {}

    })

</script>

</body>

</html>

MVVM设计模式

数据驱动逻辑流程

Typora中markdown图片相对路径设置

​ 文件-》偏好设置->

2、初始ES6及Vue的更多相关文章

  1. 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

  2. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  3. es6下 vue实例属性template不能使用

    esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...

  4. ES6（vue）对象词法扩展

    ES6 允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作: function getCar(make, model, value) { retur ...

  5. 1.Vue初始及相关Vue核心组件

    1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...

  6. 2017 年比较 Angular、React、Vue 三剑客(转载)

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...

  7. [译] 2017 年比较 Angular、React、Vue 三剑客

    原文地址:Angular vs. React vs. Vue: A 2017 comparison 原文作者:Jens Neuhaus 译文出自:掘金翻译计划 本文永久链接:github.com/xi ...

  8. vue进阶：基于vue-cli创建项目（搭建手脚架）

    vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...

  9. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. 开发API整理（转）

    附送一个 android 源码 查看地址 http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android ...

  2. 【题解/模板】P1248 加工生产调度(贪心)

    [题解/模板]P1248 加工生产调度(贪心) 分析: \(A\)流水线的时间是确定的,所以现在就是要让\(b\)的时间尽量短 \(tB > tA\),除非所有东西都不需要\(b\).(t指结束 ...

  3. 重新精读《Java 编程思想》系列之final关键字

    在java中final关键字标识无法被修改.接下来从final修饰数据.方法和类进行介绍. final数据 final用来告知编译器这一块数据是恒定不变的.数据恒定不变又如下作用: 1.一个永不改变的 ...

  4. 《带你装B，带你飞》pytest修仙之路3 - setup/teardown

    1. 简介 学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次.当然还有更高级一点的setupClass和teardownClass ...

  5. 为什么大家都说Java中只有值传递？

    最近跟Java中的值传递和引用传递杠上了,一度怀疑人生.查了很多资料,加上自己的理解,终于搞清楚了,什么是值传递和引用传递.也搞明白了,为什么大家都说Java只有值传递,没有引用传递.原来,我一直以来 ...

  6. 日志冲突解决方案(基于gradle)

    日志冲突解决方案 前提:我使用gradle管理项目 最近在项目中需要用curator客户端操作zookeeper,在maven仓库拉取的jar包导致日志冲突,会报以下的错误: 经常会有如上图2处红色框 ...

  7. caffe实战笔记

    Caffe简要介绍: Caffe还没有windows版本,所以我需要远程登录linux服务器 Caffe主要处理图片/图片序列 Caffe读取的数据格式 从专用的数据库中读取(lmdb.leveldb ...

  8. schedule of 2016-09-19~2016-09-25（Monday~Sunday）——1st semester of 2nd Grade

    2016/9/19 Monday 1.make ppt for today's group meeting 2.recite 100 words 3.review <图解机器学习>ch1~ ...

  9. c++中减字符0的作用(转)

    在刷OJ题的时候遇到要读取“2013-3-1”形式的日期然后计算这个日期是该年的第几天, 显然我们读取的是字符串,但是计算第几天却要整型数来计算,这是这个问题的难点,下面是解决这个问题的代码: int ...

  10. A*寻路算法的个人理解

    A*寻路算法是一个求两点之间的最短路径的方法 算法详情如下: 准备工作: 两个容器:   open容器和close容器 价值估算公式:    F = G + H G:从起点移动到指定方格的移动代价: ...