第三天:
由于我主后端,前端只粗略的记一下笔记
VScode
官网下载地址:
https://code.visualstudio.com/Download
镜像下载地址(快一些):
自己安,基本一直next就行
插件
搜索插件进行汉化
加其他的插件:
Live Server:内置服务器,模拟tomcat
Vetur
vue-helper
创建工作区
前端代码写在工作区里的
在文件夹里创建总vscode代码文件夹(不要中文,和特殊符号)
再随便创建一个文件夹
在vscode里打开文件夹
将工作区另存为(直接保存)
直接略:
看视频
es6
Vue入门
vue官网:https://cn.vuejs.org/
有vue3但是老师学的是vue2,鉴于学习成本,我继续选择vue2进行学习
这是他们自己的介绍
基本构造
建立一个html文件
快捷键感叹号
引入一个vue的js文件,类似于jquery
下载vue.js:https://v2.cn.vuejs.org/v2/guide/installation.html
复制到文件夹里
固定代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 插值表达式,绑定vue里的data数据 -->
{{message}}
</div>
<script src="vue.js"></script>
<script>
//创建一个vue对象
new Vue({
el: '#app',//绑定vue的作用范围
data:{//定义页面中显示的数据模型
message: 'Hello Vue'
}
})
</script>
</body>
</html>
抽取vue的代码片段:
略
直接用复制代替,不用快捷键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
}
})
</script>
</body>
</html>
vue基本语法
双大括号 文本插值:
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
v-html
输出html代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>hello</h1>'
}
})
</script>
单项绑定v-bind,自己与别人没关系
双向绑定:v-model,会跟着其他的动
<div id="app">
<input type="text" v-bind:value="searchMap.kayWord"/>
<input type="text" v-model:value="searchMap.kayWord"/>
<p>{{searchMap.kayWord}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
kayWord: '尚硅谷'
}
}
})
</script>
表达式:
加减乘除,三元
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
实验:https://www.runoob.com/try/try.php?filename=vue2-js-expr
vue绑定事件
vue定义方法:
<script>
new Vue({
el: '#app',
data: {
searchMap:{
kayWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{//定义多个方法
search(){//方法
console.log('search.......')
}
}
})
</script>
绑定按钮,触发事件,调用方法
<div id="app">
<!-- 绑定事件 -->
<button v-on:click="search()">方法绑定</button>
<!-- 绑定事件简写方式//好像不起作用 -->
<button @clich="search">简写绑定</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
kayWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{//定义多个方法
search(){//方法
console.log('search.......')
}
}
})
</script>
vue修饰符
修饰符用于指出一个指令应该以特殊方式绑定
这里的.prevent
修饰符告诉v-on 指令对于触发的事件调用js的event . preventDefault():
即阻止表单提交的默认行为
<div id="app">
<!-- 创一个表单 -->
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name"/>
<button type="submit">保存</button>
</form>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
user: {}
},
methods:{
onSubmit(){
if(this.user.username){
console.log('提交表单')
}else{
alert('请输入用户名')
}
}
}
})
</script>
条件渲染
<div id="app">
<!-- 创一个选框 -->
<input type="checkbox" v-model="ok"/>
<h1 v-if="ok">尚硅谷</h1>
<h1 v-else>谷粒学院</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
v-show:主动的渲染
列表渲染
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>
<hr/>
<table>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[
{ id:1,username:'henlen',age:18},
{ id:2,username:'len',age:82212},
{ id:3,username:'nlen',age:1182}
]
}
})
</script>
Vue进阶
组件(重点)
封装重复代码
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
'Navbar':{
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
</script>
全局组件
把组件放入js文件里,然后调用js里的组件
创建一个js文件
Vue.component('Navbar',{
template: '<ul><li>首页</li><li>学员管理</li></ul>'
})
直接引入js文件,然后调用组件就行
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.js"></script>
<script src="Navbar.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
vue的生命周期
重点只有下面两个方法,生命周期的意义目前只有:能够循序执行,可以用于初始化,收尾传输之类的什么什么(猜的)
created()在页面渲染之前执行
mounted()在页面渲染之后执行
官方图
vue的debug模式
加一个关键字:debugger
会让程序暂停
打上断点,刷新浏览器会出现由于继续的弹窗
<div id="app">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
created(){
console.log("created方法")
},
mounted(){
console.log("mounted方法")
}
})
</script>
路由
就是菜单,导航栏
引入路由的js文件
下载地址:https://unpkg.com/vue-router@3.5.1/dist/vue-router.js
Ctrl+S保存
代码:
<div id="app">
<h1>hello app!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
<!-- 显示的组件 -->
<router-view></router-view>
</p>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//定义路由组件
//可以引用
const Welcome={template: '<div>欢迎</div>'}
const Student={template: '<div>这是会员管理</div></div>'}
const Teacher={template: '<div>这是讲师管理</div>'}
//2.定义路由
//每个路由应该映射一个组件
const routes=[
{ path: '/', redirect: '/welcome' },
{ path: '/welcome',component: Welcome },
{ path: '/student',component: Student },
{ path: '/teacher', component: Teacher }
]
const router =new VueRouter({
routes //routes: routes的缩写
})
const app=new Vue({
el: '#app',
router
})
</script>