今日内容

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. Qt configure 参数说明（中文）

    Qt configure 在编译QT前,可加各种参数来定制自己想要的QT库.这对需要裁减QT库的朋友来说非常重要.对于如何编译QT,可以参考:http://hi.baidu.com/agassi%5F ...

  2. 深入CAS的底层实现机制，以及对应的使用风险

    概述 CAS(Compare-and-Swap),即比较并替换,是一种实现并发算法时常用到的技术,Java并发包中的很多类都使用了CAS技术.CAS也是现在面试经常问的问题,本文将深入的介绍CAS的原 ...

  3. 浪潮服务器装linux系统无法识别硬盘

    先说无法识别硬盘的原因是没有安装和系统相对应的raid驱动. 公司需要两台Linux的物理服务器来部署业务系统. 客户给了两台浪潮的服务器. 1.先把linux系统刻录到u盘 2要先看一下raid卡的 ...

  4. 【题解】歌唱王国(概率生成函数+KMP)+伦讲的求方差

    [题解]歌唱王国(概率生成函数+KMP)+伦讲的求方差 生成函数的本质是什么呀!为什么和It-st一样神 设\(f_i\)表示填了\(i\)个时候停下来的概率,\(g_i\)是填了\(i\)个的时候不 ...

  5. $bzoj2560$ 串珠子 容斥+$dp$

    正解:容斥+$dp$ 解题报告: 传送门$QwQ$ $umm$虽然题目蛮简练的了但还是有点难理解,,,我再抽象一点儿,就说有$n$个点,点$i$和点$j$之间有$a_{i,j}$条无向边可以连,问有多 ...

  6. 洛谷$P$2468 粟粟的书架 $[SDOI2010]$ 主席树

    正解:主席树 解题报告: 传送门! 题目大意是说,给定一个矩形,然后每次会给一个,这个大矩形中的一个小矩形,询问从小矩形中最少选多少个数字能满足它们之和大于等于给定数字$x$ 看起来很神的样子,完全不 ...

  7. acwing 1250. 格子游戏 并查集

    地址 https://www.acwing.com/problem/content/1252/ Alice和Bob玩了一个古老的游戏:首先画一个 n×nn×n 的点阵(下图 n=3n=3 ). 接着, ...

  8. ECShop二次开发指南-文件结构（二）

      ecshop文件架构说明 注意:因各版权不一,大概参考/* ECShop 2.5.1 的结构图及各文件相应功能介绍 ECShop2.5.1_Beta upload 的目录 ┣ activity.p ...

  9. PHP高级程序员必看知识点：目录大全（不定期更新）

    面试题系列: 分享一波腾讯PHP面试题 2019年PHP最新面试题(含答案) Redis 高级面试题 学会这些还怕进不了大厂? 阿里面试官三年经验PHP程序员知识点汇总,学会你就是下一个阿里人! ph ...

  10. 从 posix_spawn() 函数窥探漏洞逃逸

    posix_spawn() 函数是用来在Linux上创建子进程的,头文件是 #include <spawn.h> ,语法如下: #include <spawn.h> int p ...