菜鸟的Vue基础快速入门

最新推荐文章于 2023-12-28 22:54:42 发布
最新推荐文章于 2023-12-28 22:54:42 发布
阅读量2.6k 收藏 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脚手架进行快速开发和独立部署，即所谓的前后端分离。

最强菜鸟
关注
  • 1
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础知识-菜鸟入门
01-03
vue基础
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且...通过深入理解并熟练掌握Vue的基础知识和高级特性，开发者可以构建出高性能、可维护的前端项目。
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(...
Vue3 菜鸟入门（三）超详细：引用外部依赖、组件、路由
小for学习栏
09-19 4566
Vue3 菜鸟入门（三）超详细：引用外部依赖、组件、路由，手把手教学、腾讯会议一对一培训，所有代码都要敲一遍，有问题随时暂停解决。
Vue3 菜鸟入门（一）超详细：介绍、安装、打包、创建项目、目录结构、起步等
小for学习栏
09-19 1313
本文主要内容含Vue3介绍、安装、打包、创建项目、目录结构、起步等内容，Vue 、Vue 3、Java、Spring Boot、Idea、数据库、一对一、培训、教学。
菜鸟学习vue3笔记-vue3 router回顾
最新发布
qq_30519365的博客
12-28 539
【代码】菜鸟学习vue3笔记-vue3 router回顾。
vue.js入门教程
08-23
vue.js入门教程
vue入门到熟练（vue/vue-cli/vue-webpack）
12-30
Vue事件 v-on vue计算属性&watch vue组件 vue路由 webpack打包 vue-cli-脚手架
新手简单了解vue
12-07
作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法，刚好今天没事就给自己挖一个坑，分享一下我对vue的见解和一些领悟，整个专栏应该会包括vue，vue-cli，vue-router，vuex，nuxt和一些...
菜鸟Vue教程 - 实现带国际化的注册登陆页面
zhonglunshun的专栏
08-19 1825
初接触vue的时候觉得vue好难，因为项目中要用到，就硬着头皮上，慢慢的发现也不难，无外乎画个布局，然后通过样式调整界面。在通过属性和方法跟js交互。js就和我们写的java代码差不多了，复杂一点的就是引用这种那种库，然后就能做出来一个界面了。如果你的项目就是和服务器交互，感觉用vue来做确实也蛮合适的。在上手之前，我先说下我们要实现的场景。
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 4822
Vue 入门基础篇
Vue快速入门
ccz80的博客
07-12 2822
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定双向数据绑定 2. 在JS代码区域，创建Vue核心对象，进行数据绑定 3. 编写视图 在HTML里面 4.完整代码 （简单入门小例子） 2.v-model: 双向数据绑定 3.v-on： 事件响应 5.v-for 完整演示代码： 三、Vue生命周期 mounted 加载完成自动
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 9134
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1634
一文带你从HelloWorld认识Vue框架，深刻理解！
vue相关知识
xry12354的博客
06-26 345
vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助程序员高效地开发用户界面。它的核心库只关注视图层。
Vue的快速入门
qq_63534255的博客
10-17 444
百度一下{{url}}-->案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来。点我点我
零基础怎么快速入门vue
07-08
如果你是零基础，想要快速入门Vue，我可以给你一些建议。首先，你可以按照以下步骤进行学习： 1. 学习HTML、CSS和JavaScript基础知识：Vue是基于这些技术的，因此对它们的理解是很重要的。 2. 了解Vue的基本概念：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值