Vue.js v2.5.17学习教程_01:从入门到精通

简介: Vue.jsVue.js 2.0每天进步一点点,你终将会变成你想要成为的那个人VueDemo_01:初识vue Vue01 window.
img_ef23587e4f15dedcee2acf04611dbc64.png
Vue.js

Vue.js 2.0
每天进步一点点,你终将会变成你想要成为的那个人


VueDemo_01:初识vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue01</title>
    <script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子"
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>
</body>
</html>
AI 代码解读

new Vue:创建一个Vue实例(对象),可以起名字也可以不起
el:element 的缩写 这里面放‘选择器 ’
data:data 也是固定的名字 这里面放置数据
v-model="message":指令 v-model 用于数据绑定
{{ message }}:取出数据


VueDemo_02:data

data:数据类型可以有很多种...

<script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子",
                    arr:["Spring","Hibernate","SpringBoot","Mybatis"],
                    jsonObj:{a:"Spring",b:"Hibernate",c:"SpringBoot",d:"Mybatis"}
                }
            })
        }
    </script>
AI 代码解读

v-for指令:循环取值
v-for="(value,index) in arr">{{value}} {{index}}
v-for="(json,index,key) in jsonObj">{{json}} {{index}}{{key}}:
value:data中的数据名称
index:索引
key:json的key

<body>
    <div id="app">
        <!-- v-for -->
        <ul >
            <li v-for="(value,index) in arr">{{value}} {{index}}</li>
        </ul>
        <ol>
            <li v-for="(json,index,key) in jsonObj">{{json}} {{index}}{{key}}</li>
        </ol>
    </div>
</body>
AI 代码解读

说明一下:vue 2.x开始 删除了 v-for 指令当中的 $index如果需要使用 需要在 v-for 指令当中添加需要的参数(就是要按照上面的格式书写)


VueDemo_03:Vue中的事件

v-on:click:点击事件

<body>
    <!--  v-on:click-->
    <div id="app">
        <input type="button" value="按钮" v-on:click="show()">
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>
</body>
AI 代码解读

methods:这个参数也是固定的 事件方法在这里面定义

<script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子",
                    arr:["Spring","Hibernate","SpringBoot","Mybatis"],
                    jsonObj:{a:"Spring",b:"Hibernate",c:"SpringBoot",d:"Mybatis"}
                },
                methods:{
                    show:function () {
                        alert("弹出框");
                    }
                }
            })
        }
    </script>
AI 代码解读

VueDemo_04:一个添加的点击事件

<script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子",
                    arr:["Spring","Hibernate","SpringBoot","Mybatis"],
                    jsonObj:{a:"Spring",b:"Hibernate",c:"SpringBoot",d:"Mybatis"}
                },
                methods:{
                    add:function () {
                        this.arr.push("SpringMVC");
                    }
                }
            })
        }
    </script>
AI 代码解读

因为数据是双向绑定的,所以在点击按钮之后页面上展示的数组的数据也会随之增加

<!--  v-on:click-->
    <div id="app">
        <input type="button" value="按钮" v-on:click="add()">
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>
AI 代码解读
相关文章
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
20 1
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
39 2
2024年5月node.js安装(winmac系统)保姆级教程
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
57 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
53 1
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
47 1
vue学习第四章
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
41 1
vue学习第7章(循环)
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
47 1
vue学习第九章(v-model)
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
57 1
vue学习第十章(组件开发)
vue学习第十一章(组件开发2)
欢迎来到我的博客,我是瑞雨溪,一名自学前端两年半的大一学生,专注于JavaScript与Vue。本文介绍Vue中的插槽(slot)使用方法,包括基本插槽、具名插槽及作用域插槽,帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助,请关注我,持续更新中!🎉🎉🎉
33 1
vue学习第十一章(组件开发2)