谷粒学苑_第三天

Like_wen

已于 2022-09-05 21:39:07 修改

阅读量254

点赞数

分类专栏：谷粒学院 SpringCloud 文章标签： vue.js 前端 vscode spring cloud 后端

于 2022-09-05 10:21:28 首次发布

本文链接：https://blog.csdn.net/m0_52070517/article/details/126699561

版权

SpringCloud 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

谷粒学院

12 篇文章 0 订阅

订阅专栏

第三天:

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

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>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>

Like_wen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷粒学苑_第三天

谷粒学苑_第三天前端只粗略的记一下笔记官网下载地址:https://code.visualstudio.com/Download镜像下载地址(快一些):自己安,基本一直next就行搜索插件进行汉化加其他的插件:Live Server:内置服务器,模拟tomcatVeturvue-helper前端代码写
复制链接

扫一扫

专栏目录