谷粒学苑_第三天

第三天:

由于我主后端,前端只粗略的记一下笔记

VScode

官网下载地址:

https://code.visualstudio.com/Download

镜像下载地址(快一些):

https://vscode.cdn.azure.cn/stable/c722ca6c7eed3d7987c0d5c3df5c45f6b15e77d1/VSCodeUserSetup-x64-1.65.2.exe

自己安,基本一直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>Documenttitle>
head>
<body>
    <div id="app">
        
        {{message}}
    div>
    <script src="vue.js">script>
    <script>
        //创建一个vue对象
        new Vue({
            el: '#app',//绑定vue的作用范围
            data:{//定义页面中显示的数据模型
                message: 'Hello Vue'
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

抽取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>Documenttitle>
head>
<body>
    <div id="app">
        
        
    div>
    <script src="vue.js">script>
    <script>
        new Vue({
            el: '#app',
            data:{
                
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vue基本语法

双大括号文本插值:

<div id="app">
  <p>{{ message }}p>
div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
script>
1
2
3
4
5
6
7
8
9
10
11
12

v-html

输出html代码

<div id="app">
    <div v-html="message">div>
div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello
'
  }
})
script>
1
2
3
4
5
6
7
8
9
10
11
12

单项绑定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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

表达式:

加减乘除,三元

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实验: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

绑定按钮,触发事件,调用方法

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

条件渲染

 <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Vue进阶

组件(重点)

封装重复代码

 <div id="app">
       <Navbar>Navbar>

    div>
    <script src="vue.js">script>  
    <script>
        new Vue({
            el: '#app',
            components: {
                'Navbar':{
                    template: '首页
学员管理
'
                }
            }
        })
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

全局组件

把组件放入js文件里,然后调用js里的组件

创建一个js文件

Vue.component('Navbar',{   
    template: '首页
学员管理
'
})
1
2
3

直接引入js文件,然后调用组件就行

 <div id="app">
       <Navbar>Navbar>

    div>
    <script src="vue.js">script>  
    <script src="Navbar.js">script>  
    
    <script>
        new Vue({
            el: '#app'
        })
    script>
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

路由

就是菜单,导航栏

引入路由的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: '欢迎
'}
        const Student={template: '这是会员管理

'}
        const Teacher={template: '这是讲师管理
'}
        //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>

相关阅读:
MySQL中CHANGE REPLICATION FILTER 语句详解
代码随想录-day1
UniApp 开发微信小程序教程（一）：准备工作和环境搭建，项目结构和配置
【C语言速查表】数据类型、转义与格式控制、ascii码
Linux系统批量释放deleted文件占用的空间
[SQL开发笔记]SELECT DISTINCT语句：返回唯一不同的值
F. Shifting String #797div3
骑行用什么蓝牙耳机好？骑行骨传导耳机推荐
(十四)VBA常用基础知识：当前excel文件所有sheet循环，获取sheet名,获取最大行数最大列数
勒索病毒LockBit2.0 数据库（mysql与sqlsever）解锁恢复思路分享

原文地址：https://blog.csdn.net/m0_52070517/article/details/126699561