Vue基础学习
ES6的语法学习：
变量名的定义let a = "哈哈哈"
全局变量的定义const bb = "我说常量不可更改";
全局变量一旦赋值 不可更改
解构表达式：可以自动解析数组 对象
数组：解构数组
let [a,b,c] =[10,20,30];
console.debug(a,b,c)
对象：let employee = {name:"狗东西",age:18}
let {name,age} = employee
console.debug(employee.name,employee.age)
console.debug(name,age);
箭头表达式：这里的箭头表达式像极了JAVA8新特性中的Lambda表达式（多的不说直接上代码）
let add = function (data){
console.debug(data+":哈哈哈 直接上代码")
data：参数
表达式过后的语句：
let add = data=>console.debug(data+":哈哈哈 直接上代码")
//调方法 传参数
add("xxx说");
当方法体{}里面只有一句代码的时候可以省略{}当传递的参数只有一个的时候可以省略（）这里不建议省略
Promise替代Ajax方案：上代码
<script>
//Promise一个延时的方法
var promise = new Promise(function (resolve,reject) {
//设置延时时间需要回到函数
setTimeout(function () {
//获取0-1的随机数
let num = Math.random();
if(num>0.5){
resolve("我是最小的")
}else{
reject("我比他大")
}
},1000)
})
promise.then(function (data) {
console.debug(data)
}).catch(function (data) {
console.debug(data)
})
</script>
导入导出：恶意随便用导入过来的东西 From从哪个包里面导过来 前提是哪个包要导出import：导入
//批量导入
import {name,age} from "b.js";
console.debug(name,age);
export: 导出
//可以导出任何东西(基本类型,函数,数组,对象)
var name = "小张";
var age = 34;
//批量导出
export {name,age}
NPM安装：NPM就像JAVA中的maven一样 性质差不多
1.
npm init -y初始化
2.
npm i vue ->安装vue
3.
npm list vue 查看某个模块
4.
npm ls 模块列表
5.
npm uninstall vue 卸载模块
6.
npm update vue 更新 升级模块
Vue 渐进式前端框架MVVM &MVC
MVVM:Model,View,ViewModel【内置了一个监听器，完成双向绑定】
Vue基本的使用：
<!--引入Vue支持的文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- {{msg}},{{add}}-->
{{employee.age}},{{porpertis}}<br/>
{{employee.name}}<br/>
{{employee}}
</div>
<script>
/* new Vue({
el:"#app",
data:{
msg:"hell,vul",
add:"哈哈哈"
}
})*/
new Vue({
el:"#app",
data:{
age:18,
department:"JAVA部",
porpertis:["你那里天气好吗","JAVA精英","源码时代"],
employee:{
age:[18,20,22],
name:["学生","组长","班长"]
}
}
})
</script>
</body>
method：使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
{{name}}
</div>
<script>
let v = new Vue({
el:"#app",
data:{
name:"王大锤"
},
//这儿方法名必须是methoods不然会报 v.add is not a function
methods:{
add(){
this.name = "王小锤"
}
}
})
alert("等一下")
v.add()
</script>
</body>
</html>
生命周期：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
{{name}}
</div>
<script>
let v =new Vue({
el:"#app",
data:{
name:"班长"
},
//钩子方法created vue内部执行完成才执行的方法
created(){
alert("等一下")
this.name = "组长"
},
//mounted 执行完created才执行的方法
mounted(){
alert("在等一下等一下")
this.name = "组员"
}
})
</script>
</body>
</html>
MVVM双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
{{name}}<br/>
//v-model双向绑定 name的值会随着input框的值变化而变化
<input type="text" v-model="name">
</div>
<script>
let v = new Vue({
el:"#app",
data:{
name:"火箭超人"
}
})
</script>
</body>
</html>
常用的指令：
teml:显示标签属性
text:不显示标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<!--//text文本 不会算上标签的属性-->
<div v-text="name"></div>
<!--//Html会加上标签的属性-->
<div v-html="name"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
name:"<hi><b>二狗</b></hi>"
}
})
</script>
</body>
</html>
for循环遍历：可遍历数组 对象 字符串 数字 迭代器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<!--//可以循环数组-->
<div v-for="v in array">
{{v}}
</div>
<!--
可以便利对象
val 循环得到的属性
name:循环得到的字段
-->
<div v-for="(name,val) in employee">
{{name}},{{val}}
</div>
<!--便利字符串-->
<div v-for="v in string">
{{v}}
</div>
<!--便利数字 便利出来的是从1到你的数字的大小-->
<div v-for="i in integer">
{{i}}
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
array:["哈","哈","哈","你莫说那么多"],
employee:{name:"波波",age:"18"},
string:"asdfghjkl",
integer:123
}
})
</script>
</body>
</html>
bind:用于绑定相应的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<img v-bind="tupian">
</div>
<script>
new Vue({
el:"#app",
data:{
tupian:{
src:"img/1.jpg",
width:200,
height:200,
},
}
})
</script>
</body>
</html>
for和bind的一个综合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<select>
<option v-for="i in countrys">
{{i.name}}
</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
//国家
countrys:[
{id:1,name:"China"},
{id:2,name:"Japan"},
{id:3,name:"America"},
{id:4,name:"England"}
]
}
})
</script>
</body>
</html>
使用vue之前先将支持版本改成6
