菜鸟的Vue基础快速入门

最新推荐文章于 2024-09-11 20:40:52 发布
最新推荐文章于 2024-09-11 20:40:52 发布
阅读量2.8k 收藏 20
点赞数 1
分类专栏： 前端 文章标签： vue 前端 vue-cli vue基础快速入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40298902/article/details/105903586
版权

菜鸟的Vue快速入门

说明

本文参考了主要整理了一些Vue常用语法，给出相应代码，存在有大量不足的地方，建议参考Vue官网文档进行学习

注意：本文仅为记录学习轨迹，如有侵权,联系删除

一、前期准备

工具采用idea 2019，开始前下载Vue.js插件
在这里插入图片描述
设置vue新建文件模板
在这里插入图片描述
模板

<template>

</template>

<script>
    export default {
        name:"${NAME}"
    }
</script>

<style scoped>

</style>

二、常用方法

demo案例

跟后端一样，前端逐渐趋向于系统化，有条件语句、循环语句、自己的服务器（nodejs）、可独立运行、测试和部署，不可否认的是前端正在逐渐崛起。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello vue！'
        }
    })
</script>

</body>
</html>

引进虚拟Dom、MVVM模型等，具体概念查看Vue官网，这里主要展示代码，多玩一下代码就可以感受到Vue强大及其使用。
在这里插入图片描述

if-else

就跟后端的条件差不多

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app-1">
    <p v-if="seen">现在你看到我了</p>
    <p v-else>现在你看不到我了</p>
</div>

<div id="app-2">
    <p v-if="type=='A'">this is A</p>
    <p v-else-if="type=='B'">this is B</p>
    <p v-else-if="type=='C'">this is C</p>
    <p v-else>this is none</p>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app1 = new Vue({
        el: '#app-1',
        data: {
            seen: true
        }
    })

    var app2 = new Vue({
        el:'#app-2',
        data: {
            type: 'A'
        }
    })
</script>
</body>
</html>

for循环

这里的for循环语法跟python有点像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="app-1">
    <li v-for="item in items">
       {{item.message}}
    </li>
</ul>

<ul id="app-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }}
        <p v-if="index == 0"> {{ item.message0 }}</p>
        <p v-if="index == 1"> {{ item.message1 }}</p>
        <p v-if="index == 2"> {{ item.message2 }}</p>
    </li>
</ul>


<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app1 = new Vue({
        el: '#app-1',
        data: {
            items:[
                {message:'第一个元素'},
                {message: '第二个元素'},
                {message: '第三个元素'}
            ]
        }
    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            parentMessage:'this is parent',
            items:[
                {message0: '第一个元素'},
                {message1: '第二个元素'},
                {message2: '第三个元素'}
            ]
        }
    })
</script>
</body>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button id="app-1" v-on:click="sayHello">click me</button>


<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app-1',
        data:{
            message:'this is message'
        },
        methods:{
            //事件的绑定，方法必须定义在Vue的methods对象中，v-on:事件
            sayHello:function (event) {
                alert(this.message);
            }
        }
    })

</script>
</body>
</html>

异步请求（axios）

异步请求是最关键的一个技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求(axios)</title>
</head>
<body>
<!--get的异步请求-->
<div id="app1">
    名字:{{info.data.name}}<br>
    年龄:{{info.data.age}}<br>
</div>
<hr>


<!--post的异步请求-->
<div id="app2">
    名字:{{info.data.name}}<br>
    年龄:{{info.data.age}}<br>
</div>
<hr>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    // get的异步请求
    new Vue({
        el: '#app1',
        data () {
            return {
                info: null
            }
        },
        mounted () {
            axios
                .get('../json/data.json')//这里一般请求后端的接口，接口返回一个json字符串
                .then(response => (this.info = response))//将请求返回的数据赋值给info
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })

    // post的异步请求
    new Vue({
        el: '#app2',
        data () {
            return {
                info: null
            }
        },
        mounted () {
            axios
                .post('../json/data.json')//这里一般请求后端的接口，接口返回一个json字符串
                .then(response => (this.info = response))//将请求返回的数据赋值给info
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })

</script>
</body>
</html>

组件基础

组件化开发，提高代码可复用性，详细参考Vue官网

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>组件基础</title>
</head>
<body>

<!--<p>组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：</p>-->
<div id="bc">
    <button-counter></button-counter><br>
    <button-counter></button-counter><br>
    <button-counter></button-counter><br>
    <button-counter></button-counter>
</div>
<hr>

<!--通过title给组件blog-post传值-->
<div id="bp1">
    <blog-post1 title="this is blog-1"></blog-post1>
    <blog-post1 title="this is blog-2"></blog-post1>
    <blog-post1 title="this is blog-3"></blog-post1>
</div>
<hr>

<!--自定义blog-post2组件,循环传值（复杂）-->
<div id="bp2">
    <blog-post2 v-for="item in items" v-bind:value="item"></blog-post2>
</div>
<hr>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    //自定义blog-post1组件,需要给title传值进去（简单）
    Vue.component('blog-post1',{
        props:['title'],
        template:'<h3>{{title}}</h3>'
    })

    //自定义blog-post2组件,循环传值（复杂）
    Vue.component('blog-post2',{
        props:['value'],
        template:'<h3>{{value}}</h3>'
    })



    new Vue({ el: '#bc' })

    new Vue({ el: '#bp1' })

    new Vue({
        el:'#bp2',
        data:{
            items:['A','B','C']
        }
    })


</script>
</body>
</html>

表单属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>
<body>
<hr>
<div id="app-1">
    #文本 <br>
    <input v-model="message" placeholder="edit me">
    <p>Message is {{message}}</p>
</div>
<hr>

<div id="app-2">
    #多行文本 <br>
    <span>Multiline message is:{{message}}</span><br>
    <textarea v-model="message"></textarea>
</div>
<hr>

<div id="app-3">
    #复选框 <br>
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <input type="checkbox" id="john" value="john" v-model="checkedNames">
    <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
    <input type="checkbox" id="tony" value="tony" v-model="checkedNames">

    <p for="checkbox">Checked names: {{checkedNames}}</p>
</div>
<hr>


<div id="app-4">
    #单选按钮 <br>
    <input type="radio" id="mela" value="男" v-model="picked">男
    <input type="radio" id="femela" value="女" v-model="picked">女
    <p for="checkbox">Picked : {{picked}}</p>
</div>
<hr>

<div id="app-5">
    #选择框单选 <br>
    <select v-model="selected">
        <option disabled value="">---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <p>Selected: {{selected}}</p>
</div>
<hr>


<div id="app-6">
    #选择框多选 <br>
    <select v-model="selected" multiple style="width: 50px;">
        <option disabled value="">---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <p>Selected: {{selected}}</p>
</div>
<hr>


<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app-1',
        data: {
            message: ''
        }
    })

    new Vue({
        el: '#app-2',
        data: {
            message: ''
        }
    })

    new Vue({
        el: '#app-3',
        data: {
            // checkedNames: ''
            checkedNames: []
        }
    })

    new Vue({
        el:'#app-4',
        data:{
            picked:''
        }
    })

    new Vue({
        el:'#app-5',
        data:{
            selected:''
        }
    })

    new Vue({
        el:'#app-6',
        data:{
            selected:[]
        }
    })

</script>
</body>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>




<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
       el:"#app1",
       data:{
           message:"hello world"
       },
        methods:{
           currentTime1:function () {
               return Date.now();//返回一个时间戳
           }
        },
        computed:{//计算属性（相当于缓存）:metheds,computed方法名不能重名，重名之后之后调用methods的方法
           currentTime2:function () {
               this.message;
               return Date.now();//返回一个时间戳

           }
        }
    });
</script>
</body>
</html>

插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>

<div id="app1">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //slot
    Vue.component("todo",{
        template:'' +
            '<div>' +
            '   <slot name="todo-title"></slot>' +
            '   <ul>' +
            '       <slot name="todo-items"></slot>' +
            '   </ul>' +
            '</div>'
    });

    Vue.component('todo-title',{
        props:['title'],
       template: '<li>{{title}}</li>'
    });

    Vue.component('todo-items',{
        props: ['item'],
        template:'<li>{{item}}</li>'
    });

    new Vue({
        el:'#app1',
        data:{
            title:"this is title",
            todoItems:['C/C++','Java','Python']
        }
    });

</script>
</body>
</html>

自定义内容转发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义内容分发</title>
</head>
<body>

<div id="app1">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items"
                    v-for="(item,index) in todoItems"
                    v-bind:item="item"
                    v-bind:index="index"
                    v-bind:key="index"
                    v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    //slot
    Vue.component("todo",{
        template:'' +
            '<div>' +
            '   <slot name="todo-title"></slot>' +
            '   <ul>' +
            '       <slot name="todo-items"></slot>' +
            '   </ul>' +
            '</div>'
    });

    Vue.component('todo-title',{
        props:['title'],
        template: '<li>{{title}}</li>'
    });

    Vue.component('todo-items',{
        props: ['item','index'],
        template:'' +
            '<li>' +
            '   {{item}}' +
            '   <button @click="remove">删除</button>' +
            '</li>',
        methods: {
            remove:function (index) {
                this.$emit('remove',index);
            }
        }
    });

   var vm =  new Vue({
        el:'#app1',
        data:{
            title:"this is title",
            todoItems:['C/C++','Java','Python']
        },
        methods:{
            removeItems:function (index) {
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });

</script>
</body>
</html>

三、补充

上面的一些方法，建议去官网了解了相关的概念后再看，在知道相关概念后学习效率最高，其次个人觉得只要看得懂代码，知道怎么用即可，没必要深究，毕竟现在时间宝贵，讲究高效学习，后面的开发也不会用这种原生的代码，很多都是用的框架，Vue则会使用Vue-cli脚手架进行快速开发和独立部署，即所谓的前后端分离。

最强菜鸟
关注
专栏目录
Vue基础知识总结 1：菜鸟入门
m0_69674158的博客
07-03 1100
vue简单入门小指令
菜鸟VUE的入门之路
qq_27373361的博客
03-10 209
一直在论坛找资料，如今赋闲在家打算系统学习一下新东西，写篇关于vue的应用学习之路与君共勉。 更主要是留档以便日后自己查阅。PS:如何安装引用VUE网上有许多资料，有兴趣的小伙伴可自行查阅官网。 各种标签含义解释用例： 1.v-on:绑定各类函数方法，类似于监听器。示例: -------------------华丽的分割线------------------------------------...
菜鸟Vue学习笔记（一）
weixin_34122810的博客
04-23 206
菜鸟Vue学习笔记（一）我今年刚参加工作，作为一个后台Java开发人员，公司让我开发前端，并且使用Vue框架，我边学习边记录。Vue框架是JS的封装框架，使用了MVVM模式，即model—view—viewmodel模式, 简而言之，就是数据与视图的绑定。我准备开始学习一些最基础的Vue使用，以此入门。首先在网上下载了vue.min.js的文件。我选择了v-html这个标记作为入门，它的作用是能够...
构建响应式 Web 应用：Vue.js 基础指南
最新发布
m0_53117341的博客
09-11 1197
构建响应式 Web 应用：Vue.js 基础指南一 . Vue 的介绍1.1 介绍1.2 好处1.3 特点二 . Vue 的快速入门2.1 案例 1 : 快速搭建 Vue 的运行环境 , 在 div 视图中获取 Vue 中的数据2.2 案例 2 : 点击按钮执行 vue 中的函数输出 vue 中 data 的数据2.3 小结三 . Vue 常用指令3.1 介绍3.2 文本插值 v-html3.3 绑定属性 v-bind3.3.1 绑定属性的值3.3.2 绑定属性3.4 条件渲染 v-if3.5 条件渲染 v
vue——菜鸟教程学习
weixin_42109930的博客
06-27 1万+
此篇文章仅仅是提纲摘要，用于自己学习时的一个笔记1. v-if：条件语句；v-show2. v-for：循环语句3. computed和methods：计算属性4. watch：监听属性5. 样式绑定：v-bind6. v-on：事件处理器7. Vue的表单：简言之，vue是MVVM模型，即：view：管理DOM事件Model：进行js逻辑处理ViewModel：是view和model之间的桥梁，进行DOM事件监听和数据交互v-modle会根据控件类型自动选取正确的方法来更新元素，进行双向绑定；我们可以在前
Vue菜鸟教程
热门推荐
weiyifang11的博客
07-31 1万+
Vue框架快速入门 1.Vue的认识 1.1 什么是Vue？ Vue是一个开源的javascript框架，并且Vue支持mvc和mvvm两种模式。 Vue是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。 MVC：Model(模型),View(视图),Controller(...
Vue.js 教程---菜鸟教程
yitong的博客
05-04 7511
文章目录教程安装起步模板语法插值指令用户输入过滤器缩写条件语句循环语句计算属性监听属性样式绑定事件处理器表单组件组件 - 自定义事件自定义指令钩子路由( vue-router )过渡 & 动画过渡Ajax(axios)安装方法：GET 方法POST 方法执行多个并发请求axios API响应接口实例导航菜单编辑文本订单列表搜索页面切换不同布局 教程 本教程主要介绍了 Vue2.x 版本的使用 第一个实例： <body> <div id="app"> <p>{{
vue基础知识-菜鸟入门
01-03
Vue的基础知识对于任何想要学习或在实际项目中使用Vue的开发者来说至关重要。以下是对压缩包文件中各主题的详细解释： 1. **Vue全局API**: Vue 提供了一套丰富的全局API，如 `Vue.createApp` 用于创建应用实例，`...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且...通过深入理解并熟练掌握Vue的基础知识和高级特性，开发者可以构建出高性能、可维护的前端项目。
Vue.js 基础语法简介，入门级基础语法
05-19
### Vue.js 基础语法详解 #### 一、Vue.js 概述 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它以轻量级的库出现，专注于视图层，因此非常容易学习且能很好地与现有的项目和其他库集成。Vue 的设计...
Vue第一篇：菜鸟入门之vue简介
caijunsen的博客
07-09 384
一、简介 vue 是MVVM框架 二、vue的最基本使用 html 引入vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if / v-show /
Vue3 菜鸟入门（二）超详细：基本框架 模板语法和指令
小for学习栏
09-19 1901
本文主要内容含Vue 基本框架 模板语法、指令，手把手教学、腾讯会议一对一培训，所有代码都要敲一遍，有问题随时暂停解决。
【Vue快速入门】
棒棒的邦邦
08-27 944
一、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.MVVM编程思想 MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染 M（model）：普通的javascript数据对象 V（view）：前端展示页面 VM（ViewModel）：用于双向绑定数据与页面，对于我们的课
Vue_快速入门
qq_44509920的博客
09-22 389
文章目录1.前言2.认识Vue3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.3.vue入门案例3.3.1.HTML模板3.3.2.vue渲染3.3.3.双向绑定3.3.4.事件处理 1.前言 前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了Ja
Vue的快速入门
qq_63534255的博客
10-17 505
百度一下{{url}}-->案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来。点我点我
vue-快速入门
qq_62892403的博客
07-24 1299
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
vue快速入门
weixin_53616401的博客
05-18 494
Vue 是一套构建用户界面的。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现和。
Vue.js基础教程：菜鸟快速上手指南
资源摘要信息: "Vue基础知识-菜鸟入门" Vue.js是一种流行的前端JavaScript框架，以其易用性和灵活性而受到开发者的青睐。它主要用于构建用户界面和单页应用程序。Vue.js的核心库只关注视图层，而易于上手，非常适合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值