二、VUE基本概述

最新推荐文章于 2025-03-25 19:32:33 发布

前端之家

最新推荐文章于 2025-03-25 19:32:33 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

分类专栏： VUEJS技术

本文链接：https://blog.youkuaiyun.com/qq_41761746/article/details/80228766

VUEJS技术专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了VUE.js的基本概念，包括全局API、实例选项、实例属性/方法、指令和内置组件等内容。通过具体实例展示了如何使用这些特性来构建交互式的Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、VUE概念

1、全局API（vue本身提供的全局API）

2、实例选项（创建实例化的实例选项）

3、实例属性/方法（创建之后的属性和方法已$开头）

4、指令（V开头，实现了实例属性和方法与页面之间的交互）

5、内置组件

二、VUE实例选项

var root = new Vue({
  el: '#app', //选项
  template:'<my-header></my-header>一级',//选项
  components:{//选项
  	'my-header':myHewder
  }
  data:{//选项
  	
  }

})

三、实例属性

var root = new Vue({
  el: '#app', //数据装载的位置
  template:'<my-header></my-header>一级',
  components:{
  	'my-header':myHewder
  }

})
root.$data  //实例属性
root.$on('emit',function(){ //实例时间执行

})

以$开头，并且从实例对象进行调用的这样的方法或者属性就是VUE提供的实例或者方法属性

四、指令

备注：指令是写再模板里面（template）是组件数据交互的常用方法

<p v-html="" v-on:click="" v-on:keydown.enter = ""></p>

五、内置组件

 template:'<component :is=""></component><keep-alive><my-header></my-header></keep-alive>一级',

备注：包裹在keep-alive里面的数据会缓存下来