1.ES6语法
1.1 let与const
- let是声明块级变量，作用域某个代码块中，离开代码块失效！
报错：i is not defined
- const是声明一个常量，一旦赋值就不能更改！
1.2 解构表达式
- 解构数组
let array = [1,2,3];
let [a,b,c] = array;
console.debug(a,b,c)
将数组中的值取出来赋给a、b、c
- 解构对象
const person = {
name:"迪迦",
age:100
}
let{name,age} = person;
console.debug(name+"---"+age)
//把对象作为参数传递
function say({name,age}) {
console.debug("---"+name+"---"+age)
}
say(person)
解构对象要使用{ }
1.3 箭头函数
var 函数名 = (参数列表) => {函数内容}
等价于
var 函数名 = function(参数列表){
函数内容
}
如果参数只有一个可以省略(),函数内容只有一句代码可以省略{} , 没有参数不能省略（）要占位！
箭头函数this是属于当前创建环境this是一致的
如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window!
所以如果要在箭头函数中使用this则要小心！
let sayLove = name => console.debug("love"+name);
sayLove("云");
1.4 Promise对象
2. vue的导入
Node.js：他是可以用JavaScript 开发服务器代码！
npm是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架！相当于后台中maven！
使用npm的方式引入vue.js
- 安装node.js，其内置了npm
- idea中安装node.js插件
- 使用npm下载vue.js
Npm常用命令：
- 创建前端项目 初始化：npm init -y(跳过) -----相当于建了一个maven工程
- 安装模块：
全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(当前项目使用)
npm install/i vue - 查看模块：
查看某个模块：npm list vue - 列表模块：npm ls
卸载模块：npm uninstall vue
更新模块：npm update vue
运行工程：npm run dev/test/online
编译工程：npm run build
3.vue的使用
3.1 vue是什么？
它是一个基于双向绑定的前端框架，双向绑定就是如果数据变化，界面也会变化，界面变化，数据也会随之变化！
MV VM模式
M：model 准备数据
V：view 渲染试图
VC：viewModel 视图模型
3.2 简单使用
导入vue的核心库之后，使用其内置对象vue
{{name}}
{{age}}
-
el：主要用来指示挂载的dom！只要是在该挂载的dom下都可以取到值！
- id选择器
el:"#myDiv",- 类型选择器
el:".cdiv",- 标签选择器
el:"span",
不能同时挂载多个节点，且每个选择器只能挂载一个dom，如果挂载了多个，只会有一个取到值！建议使用id选择器来确保唯一性！
如果要在dom外取值：vue.name
- data：用于准备数据
var vue = new Vue({
el:"#myDiv",
data:{
msg:"测试",
show(){
console.debug("this is show method");
},
person:{
name:"feng",
sex: "23",
}
}
})
{{msg}}
{{show()}}
{{person.name}}
- methods：当前vue实例中所有的方法都放在其中！不应该放在data中，即使也可以！
{{msg}}
{{show("小明")}}
{{person.name}}
- vue表达式
{{num1}} + {{num2}} = {{num1+num2}}
{{num1}} - {{num2}} = {{num1-num2}}
{{num1}} * {{num2}} = {{num1*num2}}
{{num1}} / {{num2}} = {{num1/num2}}
{{num1}} % {{num2}} = {{num1%num2}}
{{sex?'男':'女'}}
- 操作字符串
胡须表达式可以调用对等类型的方法！
{{str}}
{{str.substring(2,4)}}
{{str.substr(4,2)}}
substring截取字符串，左闭右开！
substr（a，b）从a开始（包括a）处截取，共截取b位！
3.3 vue指令
- v-text=“表达式” 设置标签中的文本
在指定的标签设置值，如果设置的代码有html，则会以纯文本的方式展示！
v-html=“表达式” 设置标签中的html
在指定的标签设置值，如果设置的代码有html，则会被浏览器所解析！
- v-for=“表达式” 循环
语法:
<标签 v-for="元素 in 数据源">
数据源: 数组,
元素: 数组中的一个元素,
数据源: 对象
元素: 对象中的一个属性名
<标签 v-for="(元素,索引|键) in 数据源">
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象">
作用:
基于数据源多次循环达到多次渲染当前元素.
在vue中可以循环迭代的元素：数组、字符串、对象、整数
- {{n}}--索引--{{i}}
- {{s}}--索引--{{i}}
- {{a}}--索引--{{i}}
- 属性{{o}}--值{{k}}--索引--{{i}}
只有对象有三个参数，属性和值和索引！
-
v-bind指令
将data中的数据绑定到标签上,作为标签的属性！
为一个标签属性绑定一个值:
<标签 v-bind:标签属性名字="表达式">
![]()
简写形式:
<标签 :标签属性名字="表达式">
![]()
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象">
![]()
-
v-model
在表单控件上创建双向绑定,
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定!
<标签 v-model="表达式">
如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
v-model只作用于以下表单:
input select textarea
-
input标签
{{text}}
男 女 {{radio}}
唱歌 跳舞 看书 {{checkbox}} -
select标签
-
textarea标签
-
v-if
<标签名 v-if="表达式">
<标签名 v-else-if="表达式">
<标签名 v-else-if="表达式">
<标签名 v-else>根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
老年了 中年 青少年了 儿童 非正常年龄
-
v-on
绑定事件：
可以写表达式或触发函数！
{{num}}触发函数：只有方法名，没有“（）”
-
v-show: 控制标签属性,显示还是隐藏
<标签名 v-show="表达式">
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效 ！
当v-show的值为假时, 会在标签的css中添加 display: none
≧◠◡◠≦✌methods:{ show(){ console.debug(this.isShow) this.isShow=!this.isShow } }