Vue(核心思想) - 爱码网

1.Es6语法普及

let和var的区别:

var:定义变量时,在全局范围内都有效;所以在变量没有声明之前就能使用,值为undefined,
称为变量提升;

let:声明的变量一定要在声明后使用,而且在for循环时,变量都会被重新定义

let不允许在相同的作用域内,重复声明一个变量;

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

所以,在函数内部重新声明参数也报错

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

const命令
const声明一个只读的常量,一旦声明,常量的值不能修改;
所以const一旦声明,就必须立即初始化,不能留着以后赋值,只声明不赋值也报错;

　　2.模板字符串

``:在输出模板是,可以在里面输出标签叠加
${变量名}:在字符串中嵌入变量时,跟反引号配合着使用,在script中使用,在页面没办法渲染,而{{}}是vue插入值的语法,可以在模板上渲染;

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

　　3.箭头函数

let f = a => a
//等价于
let f = function(a){
         return a}

let f = () => 5
//等价于
let f=function()=>{return 5}

let sum = (sum1, sum2) => sum1+sum2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

注意事项:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

import和export

//导出多个声明
export let name = 'gx'
export function aa(){}

export {age,name,aa}

//批量导出
import {age,name,aa} from './main'
console.log(name)
console.log(age)
console.log(aa())
// 整个模块导入 把模块当做一个对象
// 该模块下所有的导出都会作为对象的属性存在
import * as obj from "./main"


/ 一个模块只能有一个默认导出
// 对于默认导出 导入的时候名字可以不一样
// main.js
var app = new Vue({

});
export default app
// test.js
// import app from "./main"
import my_app from "./main"

2.Vue的基础语法及命令

<template>
<div>
  <h2>head</h2>
  <p v-text="msg"></p>
  <p v-html="html"></p>
</div>
</template>

<script>
    export default {
        name: "head",
      data(){
          return {
            msg: "消息",
            html: `<h2>插入h2标题</h2>`

          }
      }

    }
</script>

v-text v-html