1.ecmascript6
/*
let关键字:用来声明变量
1.不允许重复声明
2.块级作用域(比如方法里面声明的变量外面不能用)
3.不存在变量提示
4.不影响作用域链
注意:以后声明变量用let不用var
const:声明常量
1.不允许重复声明
2.块级作用域
3.声明必须赋初值
4.值不允许修改
5.标识符一般为大写
注意:声明对象类型用const,非对象类型声明用let
模板字符串:增强版的字符串,用反引号 ` 标识
1.字符串可以出现换行符
2.可以使用$(XXX)形式输出变量
简化对象写法
es6允许在大括号里面直接写入变量和函数作为对象的属性和方法,这样更简洁
箭头函数
es6允许使用箭头 => 来定义函数
*/
let str=`1
2
3
`
console.log(str);
//变量拼接
let name="你"
let result=`
欢迎${name}来
`
console.log(result);
//简化对象写法
let name1="ni"
let age=18
let speak=function(){
console.log(this.name);
}
let person={
name,age,speak
}
//箭头写法
let f=()=>{
console.log("箭头写法");
}
let f2=(num)=>{
}//带参数函数 当形参只有一个时,括号可以省去
//当函数语句只有一条时,花括号可以省去
2.遍历
let arr=[1,2,3,4,5]
let person={
name:"ni",
age:18
}
for(let item in person){
console.log(item+"为"+person[item])
}
for(let item of arr){
console.log(item);
}
3.初识vue2
本地导航或者在线引入(借助网络较慢)
cdn.jsdelivr.net/npm/vue@2/d…
<div id="app">
{{m}}
{{arr[1]}}
// view视图 拆分成 vm:view model
new Vue({
el: "#app",//挂载点 决定vue的生效范围 可以选择标签/类/id/子元素 不能是body和html
data: {//data来存放数据
m: "替换",
arr:[1,2,3,4,5]
}
})
4.v-text与v-html
<div id="app">
<h1 v-text="message">热
热{{message}}
<h2 v-text="a">
<h2 v-html="a">
new Vue({
el:"#app",
data:{
message:"冷",
a:'点击'
}
})
5.v-bind:可以替换标签属性,简写方式为在属性前加 :
<div id="app">
<h1 v-bind:style="color">黑色
<a v-bind:href="link">baidu
<h2 v-bind:class="c">123
<h2 :class="c">123
new Vue({
el:"#app",
data:{
color:'color:pink',
link:"www.baidu.com",
c:"c1"
}
})
6.事件
<div id="app">
<h1 v-on:click="f1">点一下
<h1 @click="f1">点一下
new Vue({
el:"#app",
data:{
},
methods:{
f1(){
alert("你好")
}
}
})
