Vue入门

最新推荐文章于 2024-07-22 15:13:59 发布

特喵非要去刚

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量258

点赞数 2

分类专栏： HTML 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52130567/article/details/127605435

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概述

Vue是一款流行的JavaScript前端框架，本质上是用JavaScript语言编写的API，是旨在更好地组织与简化Web开发。
Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

用Vue编写第一个程序

既然Vue是一个全新的框架，闲话少叙直接上第一个helloworld程序

<!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>
    <script type="text/javascript" src="./js/vue.global.js"></script>
</head>

<body>
    <!--Vue的入门程序:HelloWorld-->
    <div id="app">
        <h1>{{message}}</h1><!--使用{{}}来获取Vue中data的数据 -->
        <!-- @click是v-on:click的简写形式 -->
    	<button @click="change">按钮</button>
    </div>  
    <script>
        const app = Vue.createApp({
            data() {  //data: 表示需要展示的数据，这种形式是data: function(){}的简写
                return {  
                    message: 'Hello Vue!'
                }
            },
            methods: {
                change(){
                    this.message = 'Hello world';
                }
            }
        })
    app.mount('#app') //指明数据将传递到哪个标签内
    </script>
</body>

</html>

Vue的整体结构中，首先就要通过Vue对象的createApp方法创建App对象，在createApp()中，所有的参数都是函数类型，且多以key：value形式存在。data是Vue的一个核心，这是因为所有要向页面展示的数据都由data决定。而methods则是自己写的方法的定义位置，这些方法主要是用来响应各种事件的，最后创建的app一定要挂载到指定标签上才能生效。

data属性

data能显示在页面的数据，在html中以插值表达式的形式出现，即{{key}}，这个key指的是data中return代码块内的key，页面中展示的是对应的value。对于data属性的总结就是

1. data属性是传入一个函数，并且该函数需要返回一个对象：

在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；

在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

2.data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理。所以我们在template或者app中通过 {{message}} 访问message，可以从对象中获取到数据；所以我们修改message的值时，app中的 {{message}}也会发生改变；

methods属性

methods属性是一个对象，通常我们会在这个对象中定义很多的方法：

这些方法可以被绑定到模板中；

在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性

Vue指令

Vue指令都带有v-的前缀，直接写在html标签内即可使用，用于拓展了HTML标签的功能。but由于篇幅关系这里只展示3个

1. v-text指令: 更新元素的 textContent,注意v-text对于内容是包含HTML标签的,不会进行HTML解析,只是作为普通字符串。

2. v-for指令：基于一个数组来渲染列表，v-for=后面接的是element in array形式的语法，也就是类似于foreach的指令，array就是源数据数组，element就指代数组中的元素的别名。

然而想像fori循环一样获取数组下标，in的前面可以写成(element, index)即(数组元素, 数组索引)。

特喵非要去刚

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

Vue是一款流行的JavaScript前端框架，本质上是用JavaScript语言编写的API，是旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
复制链接

扫一扫

专栏目录