今日内容

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语言中的优先级和类型转换分析

    一.优先级 1.易错的优先级 二.类型转换 在C语言中,存在强制类型装换,也存在隐式类型转换,隐式类型转换实际上属于强制类型转换,隐式类型转换要点如图. (1)举例:算术运算式中,低类型转换为高类型 ...

  2. SQLite3的使用（封装很长，直接使用sqlite3_open函数，LIBS += sqlite3.dll 即可）good

    1.下载sqlite3相关文件sqlite3.dll.sqlite3.h(可从http://download.csdn.net/detail/mingxia_sui/5249070下载),添加到工程的 ...

  3. VRChat之blender2.8版本设置

    推荐先看:VRChat模型制作及上传总篇(包含总流程和所需插件):https://www.cnblogs.com/raitorei/p/12015876.html blender2.8视频:https ...

  4. xcode无线调试

    前言: xcode9 以上才会有无线调试这个功能,换了一个type-c口的mac,公司的新电脑,但是公司不给配转接口,到某东看了一下,type-c口同时可以转化usb和VGA的要198,官网差不多50 ...

  5. 它来了,它来了，centos 8 的时代到来了

    简介 Centos 8 已经在2019年9月24日正式发布.由于这是从Red Hat Enterprise Linux(RHEL)派生的Linux发行版,因此CentOS团队必须构建基础结构来支持新引 ...

  6. go微服务框架kratos学习笔记五(kratos 配置中心 paladin config sdk [断剑重铸之日，骑士归来之时])

    目录 go微服务框架kratos学习笔记五(kratos 配置中心 paladin config sdk [断剑重铸之日,骑士归来之时]) 静态配置 flag注入 在线热加载配置 远程配置中心 go微 ...

  7. 013 CephFS文件系统

    一.Ceph文件系统简介 CephFS提供兼容POSIX的文件系统,将其数据和与那数据作为对象那个存储在Ceph中 CephFS依靠MDS节点来协调RADOS集群的访问 元数据服务器 MDS管理元数据 ...

  8. 天猫SSM项目学习记录(一）----第一个相对完整的SSM项目

    来源:  http://how2j.cn/k/tmall_ssm/tmall_ssm-1516/1516.html?p=78908 目的:记录一个相对完整的SSM项目模板 1.工具:idea2018商 ...

  9. 1071 小赌怡情 (15分)C语言

    常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算机给出第二个数.若玩家猜对了,则 ...

  10. 小小知识点（三十六）EXCEL闪退解决办法

    1. 首先打开控制面板,从系统和安全中选择管理工具打开Windows事件查看器 2. 点击展开Windows日志-->应用程序.然后在右侧列表中找到出现的错误(点击后,查看下面的信息就知道是不是 ...