ES6常用语法

变量的定义

let定义变量

  • 不会变量提升

  • 有全局作用域和函数作用域,块级作用域{}

  • 不能重复定义

var定义变量

  • 会变量提升

  • 只有全局作用域和函数作用域

  • 能够重复定义

const定义变量

  • 定义的是一个 常量,定义之后不能进行修改

  • 没有变量提升

  • 不能重复定义

  • 带来了块级作用域

  • 定义常量的时候必须赋值

模板字符串

let username1 = "username"

oDiv.innerHTML = `

<h1>${username1}</h1>

<h2></h2>

`

用反引号进行字符串的拼接

用${}来存储变量

数据的解构和赋值

let ary = [1,2,3]

解构:

let [a, b, c] = ary

let obj = {

username: 'xxx',

age:23

}

let {username, age}= obj; # 没有赋值是默认两者相同

let {username:新的名字, age:新的名字}= obj;

  • 解构的左右两端为相同的数据类型

let a=1;

let b=2;

[a, b] = [b, a]

  • 交换数据的赋值需要放入数组中

函数的扩展

function foo(x, y){

let number = y || 10;

return number

}

foo(1, 2)

foo(1)

foo(1, 0)

function foo(x, y=10){}

  • ES6有了默认值参数

  • 箭头函数

    • 一个参数

    • v => v;

      let foo = v => v;
      ret = foo(10);
      console.log(ret); 10
    • 0和或者多个参数

    • let bar = (x, y)=>{return x + y;}

  • 箭头函数的使用规则

    • 定义的时候在什么地方,将来就不会改变了

    • 箭头函数的this指向定义时的作用域

    • 普通函数的this指向调用者的作用域

类的扩展

<script>
# ES5
function Person(){
      this.username = 'xxx';
      this.age = 20;
}
Person.prototype.showInfo = function(){
    console.log(this.username);  
}
let xxx = new Person();
</script>
ES6

class Person{
  constructor (username, age, mind){
      this.username = username;
      this.age = age;
      this.mind = mind;
  }
  // 直接写方法不需要逗号
  showInfo(){
      console.log(this.username, this.age. this.mind)
  }
}
let xxx = new Person('xxx', 18, '000);
xxx.showInfo()
  • class关键字定义一个类

    • 必须有constructor方法(构造方法,如果没有,constructor{}

    • 必须使用new来实例化,否则报错

  • 类的继承

    • 必须在子类的constructor方法中写super方法


class Peiqi extends Person{
constructor (username, age){
super()
      this.username = username;
      this.age = age;
  }    
}

let peiqi = new Peiqi('peiqi', 73)
peiqi.shoeInfo() # 继承了父类

模块化编程

对象的单体模式

let obj = {
  naem : 'xxx'.
  foo(){
      console.log(this.name);
  }
}
obj.foo() # xxx
  • 解决了箭头函数的this指向问题

Vue.js

为什么用框架

// 数据模板引擎       ----   渐进式的框架
// v-开头的指令是帮助我们渲染数据用的
<div id='app'> {{ greeting }} </div>

new Vue({
  el: '#app',
  data: {
      greeting : 'hello Vue',
  }
})

Vue之常用指令(用来渲染数据)

{{ greeting }}
v-text
<div id='app' v-text='greeting'></div>

new Vue({ // 根实例
  el: '#app',
  data: {
      greeting : 'hello Vue',
  }
})
v-html
<div id='app' v-html='greeting'></div>

new Vue({ // 根实例
  el: '#app',
  data: {
      greeting : '<h1>hello Vue</h1>',
  }
})
v-for
<div id='app'>
<ul>
<li v-for="aihao in hobby">{{aihao}}</li>
</ul>
<ul>
<li v-for="student in students">
姓名:{{student.name}}
年龄:{{student.age}}
爱好:{{student.hobby}}
</li>
</ul>
</div>

new Vue({ // 根实例
  el: '#app',
  data: {
      hobby: ['抽烟','喝酒','烫头'],
      students: [
          {
              name: '张',
              age: 12,
              hobby: 'girls',
          },
          {
              name: '李',
              age: 18,
              hobby: 'boys'
          },
          {
              name: '王',
              age: 90.
              hobby: '无',
          }
      ]
  }
})
v-if
<div id='app'>
<div v-if="role == 'girl'">
       <h1>
          女的
       </h1>
   </div>
   <div v-else-if="role == 'boy'">
       <h1>
          男的
       </h1>
   </div>
   <div v-else>
       <h1>
          不男不女
       </h1>
   </div>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           role: "girl"
      }
  })
</script>
v-show
<div id='app'>
<div v-show="isShow">Hello Word</div>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           isShow: true
      }
  })
</script>
  • v-开头的指令是帮助我们渲染数据用的

  • v-show切换性能高一些,用display控制的

  • v-if的切换是同append控制的,慢

  • 加载性能v-show的慢v-if加载的快

v-bind //绑定
<style>
   .active {
       width: 10px;
       height: 10px;
       background-color: black;
  }
</style>
<div id='app'>
<a v-bind:href="jingdong">去京东</a>
  <div v-bind:class="{ active: isActive,..., }"></div>
   <div v-bind:class="[ isActive,..., ]"></div>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           jingdong: "www.jd.com",
           isActive: true,  // 1
           isActive: 'active',
      }
  })
</script>
v-on
<style>
   .active {
       width: 10px;
       height: 10px;
       background-color: black;
  }
</style>
<div id='app'>
<h1 :class="{active: isActive}">
      sao
   </h1>
  // 简写<button @:click="changeColor">
   <button v-on:click="changeColor">
      点击变色
   </button>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           isShow: false
      }.
       methods:{
       changeColor: function(){
      this.isAcative = !this.isActive;
  },
       changeColor1: function(){},        
  }
  })
</script>
v-model         ----   双向数据绑定

<div id='app'>
<input v-model="name" type="text">
  <input type="chackbox" value="men" v-model="genders">
   <input type="chackbox" value="women" v-model="genders">
   <select v-model="girls">
       <option>女友1</option>
       <option>女友2</option>
       <option>女友3</option>
   </select>
   <textarea></textarea>
   <hr>
  {{name}}
  {{genders}}
  {{girls}}
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           name: 'xxx',
           genders: [],
           girls: [],
      }
  })
</script>

指令修饰符

<div id='app'>
<table border="1">
       <thead>
      <tr>
          <th>学科</th>
               <th>成绩</th>
           </tr>
       </thead>
      <tr>
               <td>python</td>             // 修饰符
               <td><input type="text" v-model.number="python"></td>
      </tr>
      <tr>
               <td>Vue</td> // 修饰符(失去焦点后计算)
               <td><input type="text" v-model.lazy="vue"></td>
      </tr>
      <tr>
               <td>Go</td> // 去左右空格
               <td><input type="text" v-model.trim="go"></td>
      </tr>
      <tr>
               <td>总成绩</td>
              // 不合适,引入了计算属性
              //<td>{{python + vue + go}}</td>
               <td>{{sumScore}}</td>
      </tr>
       <tbody>        </tbody>
   </table>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           python: 98,
           vue: 100,
           go: 90,
      },
       // 计算属性
       computed: {
           // 页面刷新的时候就渲染了
           sumScore: function(){
               return this.python+this.vue+this.go
          }
      },
       // 侦听属性
       // 解耦 - 监听
       watch: {
           // 数据变动的时候才执行,不会刷新页面的时候执行
           python: function(){
               // 没有return的,没有接收值
               return this.python + 1
               // 进行一些逻辑操作
               alert("python 被修改")
          }
      }
       
  })
</script>
.number
.lazy

获取DOM元素

ref="名字"
<style>
   .active {
       width: 10px;
       height: 10px;
       background-color: black;
  }
</style>
<div id='app'>
  // 国定格式
<div ref="myRef">peiqi</div>
  // 简写<button @:click="changeColor">
   <button v-on:click="changeColor">
      点击变色
   </button>
</div>

<script>
   let vm = new Vue({
       el: '#app',
       data: {
           
      },
       methods:{
       changeColor: function(){
          // this.$refs is a object
          // this.$refs.myRef就是那个标签
      this.$refs.myRef.style.color = 'red';
      this.isAcative = !this.isActive;
  },
  }
  })
</script>

自定义指令

<style>
   .box {
       width: 100px;
       height: 100px;
       background-color: red;
  }
</style>
<div id='app' v-bind:class="{box: isShow}">
   <div v-pos="position">Hello Vue</div>
</div>

<script>
   // 自定义指令
   Vue.directive("pos", function(el, bindding){
       // el标签   bindding绑定的数据
       if (bindding.value){
           el.style['position'] = 'fixed';
           el.style['right'] = 0;
           el.style['bottom'] = 0;
      }
  })
   let vm = new Vue({
       el: '#app',
       data: {
           position: true,
           isShow: true,
      },
  })
</script>
还有一种方法
<div id="app">
      <div v-bind:class="{ box: isShow}" v-pos.right.bottom="leftBottom">Hello Vue!</div>
  </div>

  <script>
      // 数据模板引擎
      // v-开头的指令是帮助我们渲染数据用的

      Vue.directive("pos", function (el, bindding) {
          console.log("el: ", el);
          console.log("bindding: ", bindding);
          if (bindding.value) {
              el.style['position'] = 'fixed';
              for (let key in bindding.modifiers) {
                  el.style[key] = 0;
              }
              // el.style['right'] = 0;
              // el.style['bottom'] = 0;
          }
      });

      let vm = new Vue({
          el: "#app",
          data: {
              leftBottom: true,
              isShow: true,
          },
      })
  </script>

Vue知识点小总结1的更多相关文章

  1. Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  2. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  3. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  4. Vue之小入门

    Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...

  5. 【vue知识点】1)vue生命周期

    [vue知识点]2)vue登录认证

  6. 跟我一起做一个vue的小项目(二)

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

  7. vue图书小案例

    小知识点: vue中计算属性有缓存(对象属性变化时才会更新),方法没有缓存,所以计算属性比方法效率高js中let有块级作用域,var没有块级作用域,所以var是有缺陷的this.letters[0] ...

  8. 基于Vue的小日历(支持按周切换)

      基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template> <div class="date"> <!-- 年份 ...

  9. vue.js小总结

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...

随机推荐

  1. codeforces 362A找规律

    刚开始以为是搜索白忙活了原来是个简单的找规律,以后要多想啊 此题是两马同时跳 A. Two Semiknights Meet time limit per test 1 second memory l ...

  2. 【HDOJ6118】度度熊的交易计划(费用流)

    题意: 度度熊参与了喵哈哈村的商业大会,但是这次商业大会遇到了一个难题: 喵哈哈村以及周围的村庄可以看做是一共由n个片区,m条公路组成的地区. 由于生产能力的区别,第i个片区能够花费a[i]元生产1个 ...

  3. zset(sorted set:有序集合)数据类型【八】

    一.概述:(zset) Sorted-Sets和Sets类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted-Sets中的每一个成员都会有一个分数 ...

  4. 牛客网 中南林业科技大学第十一届程序设计大赛J题 二分+线段树

    https://www.nowcoder.com/acm/contest/124#question 题意  找第一个不小于K的数的下标,然后对它前一个数加一 解析   我们可以维护一个最大值数组  1 ...

  5. Java内存分配与参数传递

    JAVA中方法的参数传递方式只有一种:值传递. JAVA内存分配: 1.栈:存放 基本类型的数据.对象的引用(类似于C语言中的指针) 2.堆:存放用new产生的数据 3.静态域:存放在对象中用stat ...

  6. 详解ORACLE数据库的分区表

    此文从以下几个方面来整理关于分区表的概念及操作:    1.表空间及分区表的概念    2.表分区的具体作用    3.表分区的优缺点    4.表分区的几种类型及操作方法    5.对表分区的维护性 ...

  7. Win7 文件加密存储操作后,如何在事后备份证书、秘钥

    这个密钥的特点是只有在此系统下用此账户才可以修改,即便是你用此账户设置加密后删除此账户再重新建一个同名的账户依然无法修改.而且此密钥无法破解.所以一旦加密后,重装系统或者更换账户就无法修改了.唯一的办 ...

  8. 基于Token的身份验证——JWT(转)

    本文转自:http://www.cnblogs.com/zjutzz/p/5790180.html 感谢作者 初次了解JWT,很基础,高手勿喷.基于Token的身份验证用来替代传统的cookie+se ...

  9. 【CV知识学习】early stop、regularation、fine-tuning and some other trick to be known

    深度学习有不少的trick,而且这些trick有时还挺管用的,所以,了解一些trick还是必要的.上篇说的normalization.initialization就是trick的一种,下面再总结一下自 ...

  10. Setting up Storm and Running Your First Topology

    http://www.haroldnguyen.com/blog/2015/01/setting-up-storm-and-running-your-first-topology/ --------- ...