ES6(ECMAScript)

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范
ES6就是javascript用的最多语言规范.被各个浏览器实现了.

语法

(1)let 它是块级局部变量, var 不是块级全局变量
(2)const 一旦有值就不能修改(掌握)
const i=10;
(3)解构表达式

	/*
	let arr = [1,2,3];
	//解构表达式
	let [a1,a2,a3]=arr; // let a1 = arr[0],a2=arr[1]
	console.log(a1,a2,a3);
	console.log(a3);
	*/
	//对象解构
// let obj = {"name":"信哥","age":18};
// let {name,age} = obj;
// console.log(name+"年龄是:"+age);

(4)箭头函数
var obj = {
eat:function(){
console.log(“键哥中午吃饭”);
},
eat1(){
console.log(“键哥早上喝奶”)
},
eat2:(food)=>{
console.log(“键哥晚上吃”+food+“不用牙齿吃”)
}
}

什么是Vue

(1)Vue是构建界面的渐进式的js框架

(2)只关注视图层，采用自底向上增量开发的设计。

(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定

vue使用

(1)在项目里面运行 npm install vue

(2)在页面引入vue.js
(3)测试代码

    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"xxxx"
        }
    });
</script>

el挂载

（1）id方式挂载（class方式类似）

<body>
    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"xxxx"
        }
    });
</script>

data数据

里面放字符串，数组，对象等都可以

methods方法

 var app = new Vue({
        el:"#app",
        methods:{
           eat(food){
               console.log("何亮今天中午吃"+food)
           },
            drink(){
                console.log("何亮今天中午喝什么呀")
            }
        }
    });

vue生命周期里面钩子方法:

（1）created:
表示创建完vue对象的时候,执行内容
（2）mounted:相当于 window.onload
表示页面所有的内容加载完之后,执行内容

Vue指令

v-model：数据双向绑定
v-text：相当于innerText
v-html：相当于innerHtml
v-for：循环结构
v-bind：绑定的标签里面属性的值
v-show：控制display这个属性
v-if/else：判断

秃然爆发

发布了8 篇原创文章 · 获赞 0 · 访问量 61

私信关注

ES6 和Vue-01