Vue的深入学习（重点：限流函数）

最新推荐文章于 2024-06-05 20:00:00 发布

fcc627

最新推荐文章于 2024-06-05 20:00:00 发布

阅读量368

点赞数

分类专栏： Vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/fcc627/article/details/126143054

版权

一、Vue实例的属性和方法

1、什么是Vue实例

Vue实例：又称为Vue组件

（1）Vue2.0创建组件的方法

new Vue({…})

举例：

<!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>
    <!-- vue2版本加速器 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
    <div id="app">
        {
  {msg}}
    </div>

    <script>
        var app=new Vue({
     
            el:'#app',
            data:{
     
                msg:'Hello Vue!'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
(2)Vue3.0创建Vue组件的方法：

Vue.createApp({…})

有两种写法：
方法一：

<!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 src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        {
  { count }}
    </div>
    <script>
        const obj = {
     }
        Vue.createApp({
     
            data(){
     
                return{
     
                    count:120
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

方法二：（结构较清晰）

<!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 src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">{
  {count}}</div>
    <script>
        const obj ={
     
            data(){
     
                return{
     
                    count:120
                }
            }
        }
        let instance=Vue.createApp(obj).mount('#app')  //instance就是Vue组件

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

在这里插入图片描述

2、Vue组件的属性

（1）存储属性（data）：是一个函数。在组件创建时会调用此函数来构建响应性的数据系统。是组件的存储属性。

获取该属性值的方式：

Vue组件名.变量名
Vue组件名.$data.变量名
本质是访问的同一个数据块

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content

最低0.47元/天解锁文章

fcc627

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的深入学习（重点：限流函数）

Vue实例：又称为Vue组件（1）Vue2.0创建组件的方法 < script src = " https://cdn.jsdelivr.net/npm/vue@2.6.14 " > < body > < div id = " app " > {{msg}} < script > var app = new Vue({
复制链接

扫一扫

专栏目录