今日内容

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. linux下文件的一些文件颜色的含义

    红色---->代表压缩文件 红色闪烁---->代表链接文件有问题 黄色---->代表设备文件 深蓝色---->代表目录 浅蓝色----->代表链接文件 绿色----> ...

  2. Python3 安装pylint 及与PyCharm关联

    使用如下命令: pip3 install pylint 安装完后可以看到在你的python3的目录底下的Scripts目录下有pylint.exe了 然后就可以使用pylint 评估你的代码了,如: ...

  3. python中交换两个变量值的方法

    a = 4b = 5 #第1种c = 0c = aa = bb = c #第2种a = a+bb = a-ba = a-b #第3种a,b = b,a print("a=%d,b=%d&qu ...

  4. react-native-vector-icons 安装、使用

    react-native-vector-icons 安装.使用 前言 任何库的安装与使用都离不开官文,按照官方文档一步步操作可以规避大多数问题.不过很多库只有英文文档,想要完全参透需要时间.react ...

  5. 菜鸟系列Fabric源码学习 — committer记账节点

    Fabric 1.4 源码分析 committer记账节点 本文档主要介绍committer记账节点如何初始化的以及committer记账节点的功能及其实现. 1. 简介 记账节点负责验证交易和提交账 ...

  6. Qt listWidget和QListWidgetItem的简单使用

    简单的来实习了下 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QListWid ...

  7. $Loj10157$ 皇宫看守 树形$DP$

    loj Description 有一些宫殿,它们呈树形结构,相邻的宫殿之间可以互相望见.在一些宫殿设立士兵,使得所有的宫殿都有士兵或是被士兵望见.求最小士兵数. Sol 状态: f[x][0] 表示结 ...

  8. (推荐)linux用一键安装包

    linux一键安装包内置了XXD.apache, php, mysql这些应用程序,不需要再单独安装部署. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...

  9. 1051 复数乘法 (15 分)C语言

    复数可以写成 (A+Bi) 的常规形式,其中 A 是实部,B 是虚部,i 是虚数单位,满足 i^​2=−1:也可以写成极坐标下的指数形式 (R×e​(Pi)​ ),其中 R 是复数模,P 是辐角,i ...

  10. 微信小程序开发笔记（二）

    一.前言 继承上一篇所说的,有了对微信小程序的基础概念后,这边将会示范动手做一个小程序,在动手的过程中我们可以更快的熟悉小程序里面的架构和开发流程. 二.小程序的设计 这次要做的是一个猜数字的程序,程 ...