本项目的前端使用VSCode编译器
VSCode的使用
在本地创建空文件夹
使用VSCode打开空文件夹
把文件夹保存为工作区（将工作区另存为）
ES6
es6如何定义变量？定义变量的特点?
<script>
// js中定义变量：var a = 10;
// 在es6中，定义变量使用let关键字
// var声明的变量没有局部作用域
// let声明的变量 有局部作用域
// 1.创建代码块，定义变量
{
var a = 10;
let b = 20;
}
// 2.在代码块外部输出变量
console.log(a);
console.log(b);
</script>
数组解构
<script>
// 传统写法
let a = 1, b = 2, c = 3;
console.log(a,b,c);
// es6的写法
let [x,y,z] = [10,20,30];
console.log(x,y,z);
</script>对象结构
<script>
// 定义对象
let user = {name:"Helen",age:18}
// 传统写法
let name1 = user.name;
let age1 = user.age;
console.log(name1,age1);
// es6
let {name,age} = user // 注意：结构的变量必须是user中的属性
console.log(name,age);
</script>模板字符串
<!--以后会经常在飘符号里取后端controller层传过来的值-->
<script>
// 1.`可以实现换行
let string1 = `Hey,
can you stop angry now?`
console.log(string1);
// 2.在`符号里使用表达式获取变量值
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age + 1} years old next year.`
console.log(info);
// 3.在`符号里调用方法
function f1(){
return "hello f1"
}
let str = `demo,${f1()}`
console.log(str)
</script>
声明对象
<script>
const age = 12
const name = "lucy"
const p1 = {name,age}
console.log(p1)
</script>定义方法的简写方式
<script>
// 传统方法
const p1 = {
syaHi:function(){
console.log("Hi")
}
}
p1.syaHi();
// es6
const p2 = {
sayHi(){
console.log("Hi")
}
}
p2.sayHi()
</script>对象拓展运算符
<script>
// 对象拷贝
let p1 = {name:"Amy",age:15}
let someone = {... p1}
console.log(someone)
// 对象合并
let age = {age:15}
let name = {name:"Amy"}
let p2 = {...age,...name}
console.log(p2)
</script>
箭头函数
<script>
// 传统
let f1 = function(a){
return a + 1;
}
console.log(f1(1))
// es6
let f2 = a => a + 1 // 左边的a对应参数，右边的a对应返回值
console.log(f2(1))
// 复杂一点的方法
let f3 = (a,b) => {
let res = a + b
return res
}
console.log(f3(6,2))
// 前面的代码相当于
let f4 = (a,b) => a + b
console.log(f4(6,2))
</script>
Vue.js
Vue是一套用于构建用户界面的渐进式框架
在VSCode中写感叹号，就会自动创建html骨架
引入vue的js文件，类似于jquery（可以使用压缩的：vue.min.js）
<script src="vue.min.js"></script>在html页面中创建div标签，div添加id属性
<div id="app"></div>编写vue代码，固定的结构
<script> // 创建一个vue对象 new Vue({ el:'#app', // 绑定vue作用的范围 data:{ // 定义页面中显示的模型数据 message:'Hello Vue!' } }) </script>插值表达式，获取data里面定义的值
<div id="app"> <!--插值表达式，绑定vue中的data数据--> {{message}} </div>总体代码
<body> <div id="app"> <!--插值表达式，绑定vue中的data数据--> {{message}} </div> <script src="vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el:'#app', // 绑定vue作用的范围 data:{ // 定义页面中显示的模型数据 message:'Hello Vue!' } }) </script> </body>
抽取代码片段
文件 → 首选项→ 用户片段 → 新建全局代码片段 / 或文件夹代码片段：vue-html.code-snippets
用如下代码替换：
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}输入vue，就可以看到快捷键提示
vue指令 - 单向和双向绑定
<div id="app">
<!--v-bind指令
单向数据绑定
这个指令一般用在标签属性中，获取值-->
<!--在冒号前省略了 v-bind-->
<h1 :title="message">
{{content}}
</h1>
</div>
data: {
content:'我是标题',
message:'页面加载于 ' + new Date().toLocaleString()
}<div id="app">
<!--v-model指令
双向数据绑定
这个指令一般用在标签属性中，获取值-->
<!--在冒号前省略了 v-bind-->
<!--单向绑定-->
<!--单向绑定的效果：在浏览器上，改变一个值，其他值不会跟着变-->
<input type="text" v-bind:value="searchMap.keyWord"/>
<!--双向绑定-->
<!--双向绑定的效果：在浏览器上，改变一个值，其他值跟着一起变-->
<input type="text" v-model="searchMap.keyWord"/>
<p>{{searchMap.keyWord}}</p>
</div>
data: {
searchMap:{
keyWord:'谷粒学院'
}
}vue指令 - vue事件绑定
<body>
<div id="app">
<!--vue绑定事件-->
<button v-on:click="search()">查询</button>
<!--vue绑定事件简写-->
<button @click="f1()">查询1</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '谷粒学院'
},
//查询结果
result: {}
},
methods:{ // 定义多个方法
search() {
console.log('search....')
},
f1() {
console.log('f1...')
}
}
})
</script>
</body>条件渲染（v-if）
<body>
<div id="app">
<input type="checkbox" v-model="ok"/>是否同意
<h1 v-if="ok">柚子</h1>
<h2 v-else>柠檬</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
</body>
简单的列表渲染（v-for）
<div id="app">
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
<ol>
<li v-for="(n,index) in 10">
{{n}} -- {{index}}
</li>
</ol>
</div>
遍历数据列表（v-for）
<body>
<div id="app">
<table border="1">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[
{id:1,username:'helen',age:18},
{id:2,username:'peter',age:28},
{id:3,username:'andy',age:28}
]
}
})
</script>
</body>
