今日内容

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. C# 如何解析XML

  2. string的常见操作

    访问 遍历 不需修改:for(auto c : s)   需要修改:for(auto &c : s)​ for(decltype(s.size()) i = 0; i < s.size( ...

  3. Delphi中的Val函数和iif函数（出错的时候，会有索引值）

    在delphi中Val是一个将字符串转换为数字的函数,Val(S; var V; var Code: Integer)第一个参数是要转换的字符串,第二个参数存放转换后的数字,可以是整数或浮点数,第三个 ...

  4. python简单小程序

    #足球队寻找10 到12岁的小女孩(包含10岁和12岁),编写程序询问用户性别和年龄,然后显示一条消息指出这个人是否可以加入球队,询问10次,输出满足条件的总人数#询问10次,输出满足要求的总人数 o ...

  5. 谈谈模型融合之一 —— 集成学习与 AdaBoost

    前言 前面的文章中介绍了决策树以及其它一些算法,但是,会发现,有时候使用使用这些算法并不能达到特别好的效果.于是乎就有了集成学习(Ensemble Learning),通过构建多个学习器一起结合来完成 ...

  6. Redisson实现Redis分布式锁的底层原理

    一.写在前面 现在面试,一般都会聊聊分布式系统这块的东西.通常面试官都会从服务框架(Spring Cloud.Dubbo)聊起,一路聊到分布式事务.分布式锁.ZooKeeper等知识.所以咱们这篇文章 ...

  7. wide&deep模型演化

    推荐系统模型演化 LR-->GBDT+LR FM-->FFM-->GBDT+FM|FFM FTRL-->GBDT+FTRL Wide&DeepModel (Deep l ...

  8. 二、webdriver API

    目录 1. webdriver中常用属性 2. 浏览器页面操作 3. 鼠标操作 4. 键盘操作 5. 下拉框操作 1. webdriver中常用属性 import time from selenium ...

  9. shiro整合springmvc

    说明   代码及部分相关资料根据慕课网Mark老师的视频进行整理   其他资料: shiro官网 流程 配置 1) 配置web.xml整合shiro 把shiro整合到springMVC实质上是在we ...

  10. Hexo + Serverless Framework，简单三步搭建你的个人博客

    很多人都想拥有自己的个人博客,还得看起来漂亮.酷酷的.尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分.这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单3min即可 ...