6.VUE实例

最新推荐文章于 2024-09-02 10:17:00 发布

前端杨小白

最新推荐文章于 2024-09-02 10:17:00 发布

阅读量301

点赞数

分类专栏： VUE学习笔记

本文链接：https://blog.csdn.net/yangwqi/article/details/107933335

版权

VUE学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

VUE实例：当一个程序加载时会有一个入口点 new Vue的VUE实例叫做一个根实例实际上除了根实例是一个VUE实例外 VUE中的每一个组件也是一个VUE实例【在创建一个组件的时候 VUE底层也会把这个组件编译成一个VUE的实例】可以理解为一个VUE的项目是由很多小的组件组成的【组件化每个组件就是一个VUE的实例】也可以理解为一个VUE的项目是由很多VUE的实例拼装而成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE实例</title>
    <!-- 引入VUE.js官方库文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- @是v-on:的简写 -->
    <div @click="handleClick">
        {{message}}
    </div>
    <item></item>
</div>
<script>
Vue.component('item',{
    template:'<div>hello item</div>'
})
// vm：vue的实例 通过new修饰符加上Vue类创建VUE的实例
// 让这个实例接管页面上某一部分【#root】DOM的渲染
var vm=new Vue({
    el:'#root',//负责接管的DOM元素
    // 存放数据
    data:{
        message:"hello world",
    },
    // 事件绑定
    methods:{
        handleClick(){
            alert("hello")
        },
    }
})
</script>
</body>
</html>