【前端基础二】----vue基础

已于 2022-10-05 16:04:03 修改
阅读量524 收藏
点赞数 1
分类专栏： 前端基础 文章标签： vue.js 前端 javascript
于 2022-10-05 14:35:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55865959/article/details/127172174
版权

一、基础知识：
    1.基础概念：
        Vue是一套用于构建用户界面的渐进式框架
    2.在vscode中抽取vue代码片段：

文件=>首选项=>用户代码片段=>新建全局代码片段/或文件夹代码片段：
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"
    }
}


}

         默认的模板路径存放地址：
            C:\Users\用户\AppData\Roaming\Code - Insiders\User\snippets\vue-html.code-snippets
二、vue基本语法
    1.入门

<!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>
    <!-- 引入相关js文件 -->
    <script src="vue.min.js"></script>
    <div id="vueTest">
        <!-- 使用差值表达式{{}}获得vue对象中的数据 -->
        <h1>{{message}}</h1>
    </div>

    <script>
        // 创建vue对象
        new Vue({
            el:'#vueTest',//绑定vue作用的范围，其底层是$("#vueTest")
            data:{//定义页面中显示的模型数据
                message:'hello Vue!!!!!!!!!!!!'//随便写内容，类似函数体
            }
        })
    </script>
</body>
</html>

    2.基本语法：
{{}}表达式的使用

<!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">
        <!-- 使用差值表达式{{}}获得vue对象中的数据 -->
        <h1>{{message}}</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message:'测试Vue代码片段!!!!!!!!!!!!'//随便写内容，类似函数体
            }
        })
    </script>
</body>

</html>

单项绑定：v-bind指令

<!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">
        <!-- 
                v-bind指令(单项数据绑定)：这一指令一般用在标签属性里面，获取值
         -->
         <h1 v-bind:title="message">
            {{content}}
         </h1>

         <!-- 简写方式 -->
         <h2 :title="message">
            {{content}}
         </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content:'这是标题',
                message:'页面加载于'+new Date().toDateString()
            }
        })
    </script>
</body>

</html>

双向绑定：v-model指令

<!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">
        <!-- 单项绑定 -->
        <input type="text" v-bind:value="searchMap.keyWord"></input>
        <!-- 双向绑定 -->
        <input type="text" v-model="searchMap.keyWord"></input>
        <p>
            {{searchMap.keyWord}}
        </p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord:'lixxkv'
                }
            }
        })
    </script>
</body>

</html>

事件的绑定

<!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">
        <!-- vue中绑定事件 -->
        <Button v-on:click="search()">查询</Button>

        <!-- vue中绑定事件简写 -->
        <Button @click="search()">查询1</Button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord:'lixxkv'
                },
                //查询结果
                result:{}
            },
            methods:{//定义多个方法
                search(){
                    console.log('search.....!!!!!');
                },
                fun(){
                    console.log('fun.........');
                }
            }
        })
    </script>
</body>

</html>

修饰符

<!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">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单')
                    } else {
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>

</html>

条件判断：v-if；v-else指令

<!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">
        <input type="checkbox" v-model="ok"/>是否同意
        <!-- 条件指令 v-if；v-else-->
        <h1 v-if="ok">lixxkv</h1>
        <h3 v-else>kkpt</h3>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

</html>

循环：v-for指令

<!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">
        <ul>
            <li v-for="n in 10">
                {{n}}
            </li>
        </ul>

        <ol>
            <li v-for="(n,index) in 10">
                {{n}}----{{index}}
            </li>
        </ol>
        <hr/>

        <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:'anly',age:19},
                    {id:2,username:'koko',age:20},
                    {id:3,username:'andy',age:17}
                ]
                    
                
            }
        })
    </script>
</body>

</html>

三、组件
    1.作用扩展html元素，封装可重用代码

组件实例：

<!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">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //定义vue使用的组件
            components: {
                //组件名字
                'Navbar':{
                    //组件内容
                    template:'<ul><li>首页</li><li>学员管理</li></ul>'
                }
                
            }
        })
    </script>
</body>

</html>

全局组件

//定义全局组件
Vue.component('Navbar',{
    //组件内容
    template:'<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})


=====================分隔符==========================================

<!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">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

vue生命周期（简单了解）

<!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">
        hello
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {},
            created(){
                // debugger//断点操作
                //在页面渲染之前执行
                console.log('created()方法执行了......')
            },
            mounted(){
                // debugger//断点操作
                //在页面渲染之后执行
                console.log('mounted()方法执行!!!!!!!')
            }
        })
    </script>
</body>

</html>

vue路由

<!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">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <!-- vue的引入有顺序关系 -->
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>

        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>student list</div>' }
        const Teacher = { template: '<div>teacher list</div>' }

        // 2. 定义路由
        // 每个路由应该映射一个组件。
        const routes = [
            { path: '/', redirect: '/welcome' }, //设置默认指向的路径
            { path: '/welcome', component: Welcome },
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })

        // 4. 创建和挂载根实例。
        // 从而让整个应用都有路由功能
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

</html>

四、axios
    1、基本概念：
        axios是一个独立的项目，但axios常常和vue联合使用，实现在vue中发送ajax请求。
    2、axios应用场景：
        前后端异步数据交换
    3、axios使用：

vue使用axios的固定模板

<!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>
    <!-- 引入相关js文件 -->
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data中定义变量和初始结构
                
            },
            created(){//在页面渲染前执行
                //调用定义的方法
            },
            methods:{//编写具体方法

            }
        })
    </script>
</body>

</html>

vue使用axios的案例一：

//构建json对象
{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"张三丰","age":18},
            {"name":"郭靖","age":17},
            {"name":"乔峰","age":19}
        ]
    }

}

==================================分隔符=========================

<!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">
        <!-- 把userList数组中的值显示 -->
        <div v-for="user in userList">
            {{user.name}}--{{user.age}}
        </div>
    </div>
    <!-- 引入相关js文件 -->
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data中定义变量和初始结构
                //定义变量
                userList:[]
            },
            created(){//在页面渲染前执行
                //调用定义的方法
                this.getUserList()
            },
            methods:{//编写具体方法
                //创建方法查询所有用户数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        .then(response =>{//response是自定义的变量用于接收后端的响应数据
                            console.log(response)
                            //通过response获取数据，赋值给定义的空数组
                            this.userList=response.data.data.items
                            console.log(this.userList)
                        })//请求成功执行then方法
                        .catch(error =>{//error是自定义的变量

                        })//请求失败执行catch方法
                }
            }
        })
    </script>
</body>

</html>

lixxkv
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建Vue组件 快捷键模板
李小狮
05-11 1465
VScode》文件》首选项》用户片段》vue.json(Vue) 模板： { "Print to console":{ "prefix": "vue", "body": [ "<template>", "</template>", "", "<script>", "export default {", " components:{},", " props:{},", " data(){"
vue-html.code-snippets
03-31
vue_model,用于vue模板建立（初学者） 查看自己所使用的用户名系统： 点击此电脑->本地磁盘（C）->用户->web->AppData->Roaming->Code->User->snippets,将文件粘贴进去
Vscode插件Vue VSCode Snippets生成Vue模板代码使用大全
DT辰白
05-23 1万+
Vue VSCode Snippets插件前言一、Vue VSCode Snippets插件安装二、使用步骤1.生成vue基本模板代码2.自定义模板3.常用快捷键总结 前言 最近使用了Vscode编辑器写Vue前端代码，发现很坑，很多东西都不会提示，而且超级难找，所以这里记录一下小编的初使用过程中遇到的坑。 一、Vue VSCode Snippets插件安装 这里小编第一次安装完成之后，发现他的一些命令根本不生效，我重启了Vscode还是没啥反应，解决方式： 查看底部的状态栏当前的语法格式： 如果是
vue简单学习
weixin_42044885的博客
08-06 197
代码片段
Vue项目实战(一)：路由分析
summer_cloudy的博客
03-21 242
【代码】Vue项目实战(一)：路由分析。
web前端VUE框架-基础知识及核心原理
02-24
Vue(读音/vju:/，类似于view)是一套用于构建用户界面的渐进式框架特点：易用、灵活、高效全家桶：vue+components（vueelement/iview...）+vue-router+vuex+vue-cli类库：jquery、zepto、underscore...插件：dialog、...
vue-element-admin框架源代码
09-10
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-...本资源包括集成方案: vue-element-admin和基础模板: vue-admin-template两个项目 ，全部完成了node_modules的安装，可直接用npm run dev进行运行
django-vue-admin:基于RBAC模型的权限控制的一整套基础开发平台，前拆分分离，采用django + django-rest-framework，前端采用ruoyi-ui + vue + ElementUI
03-07
前端采用ruoyi-ui，Vue，Element UI。率先采用Python语言Django框架。权限认证使用Jwt，支持多终端认证系统。支持加载动态权限菜单，多方式轻松权限控制。高效率开发，使用代码生成器可以一键生成前的代码。特别鸣谢...
vue-admin-template-3.8.0.zip
08-13
vue-admin-template前端页面开发框架，你可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。...
如何解决Vue3没有代码提示问题？
weixin_48914380的博客
11-18 1万+
如何解决Vue3+vite+Ts代码编辑过程中的代码补全功能，没有代码提示怎么办？本期内容为你解决这个问题
vue-snippets:Vue片段目录的集合
05-13
Vue片段 描述 编辑器的片段集合。 安装 Git克隆 在主菜单下，选择“帮助”>“显示扩展文件夹” Git将这个存储库克隆到文件夹用户中。 推广经理 在主菜单下，选择文件>扩展管理器... 搜索“ Vue代码段” 点击“安装” 如何使用 启用Vue片段在主菜单下，选择“编辑”>“启用Vue代码段”或打开“首选项”文件，然后添加“ vue-snippets.enabled”：true 。 输入一个片段，然后按Space键。 片段 Vue 片段 目的 vbase 单个文件组件库 模板 片段 目的 vfor v-for指令 vmodel 语义v模型指令 vmodelNum 语义v模型编号指令 von 带参数的v-on点击处理程序 velProps 带有道具的组成元素 vsrc 图像src绑定 vstyle 内联样式绑定 vstyleObj 内联样式与对象的绑定 vc
2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮，代码格式化和代码提示的 Visual Studio Code 插件。...
weixin_35912365的博客
12-30 1522
Vue 2/3 代码片段 语法高亮 格式化插件这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。你可以在 VS Code 编辑器底部栏右下角打开 Auto Format Vue 开关，它可能帮你在代码保存的时候自动格式化 vue 文件的格式，默认是关闭状态。如果你不想自动格式化 vue 文件，你也可以在 vue 文件中点...
如何阅读源码 —— 以 Vetur 为例
程序员成长指北
08-16 262
全文近万字...来都来了，点个赞再走吧点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群我很早就意识到，能熟练、高效阅读开源前端框架源码是成为一个高级前端工程师必须具备的基...
VS Code插件之Vue 2 Snippets（Vue2 片段补全工具）
热门推荐
天马3798
07-14 3万+
一、简介 此扩展将Vue 2代码片段和语法突出显示添加到Visual Studio代码中。 这个插件基于最新的Vue官方语法高亮文件添加了语法高亮，并且依据Vue 2的API添加了代码片段。 支持语言 VUE（.vue）HTML格式（.html）使用Javascript（.js文件）打字稿（.TS）帕格（.pug） 官网地址：https://marketpla
使用 vscode 代码片段：vue snippets
夏狗花花的博客
04-08 1517
在这里插入代码片 参考链接：https://blog.csdn.net/lxsz0214/article/details/87868859
VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!
weixin_33727510的博客
11-26 132
前言趁着周六日的空闲时间,了解了下vscode插件或者代码片段的发布套路. 本来找下GG有啥文章前人走过的文章,最后似乎木有,那就只能自己摸索了. 从官方文档入手!!实践出真理.... em..自认为英文不错和自学能力灰常好的大佬,到这里可以停止阅读了,省的浪费时间! 学会这个,你能收获什么?见仁见智... 但是起码你知道怎么发布了,且对 npm的package.json会有更深一层的理解. 发...
vue开发扩展（国际化多语言适配）
cmwly的博客
09-12 2521
vue开发扩展（国际化多语言适配） 参考网址：https://blog.csdn.net/joyce_lcy/article/details/78840371 首先一个项目除非初始定义就是在国内，否则的话任何文字相关的信息是都不能写在硬代码当中的，当然了注释除外。 为什么文字相关的东西不能写在硬代码当中呢？你要这样来想，如果所有的文字相关都写在了硬代码当中，那么一旦要做国际化适配的时候你是要...
Vue VsCode new Vue时 模板机补全~
qq_52700274的博客
02-22 181
Vue VsCode new Vue时 模板机补全~
解决VSCode打开VUE项目时自动提示一条报错信息No Babel config file detected问题
Willowtree的博客
06-25 1878
解决使用VSCode打开Vue项目自动提示报错信息No Babel config file detected，但是不影响项目正常运行的问题
vue基础-MVVM设计模式
最新发布
04-30
MVVM 是一种前端架构设计模式，它将界面、数据和逻辑分离并通过 ViewModel 进行交互。在 MVVM 模式中，视图(View)和模型(Model)是完全独立的，它们通过 ViewModel 进行双向绑定(Binding)。 在 Vue.js 中，MVVM 模式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值