vue实例详解

最新推荐文章于 2023-10-16 12:32:14 发布

aojiu4000

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LO-ME/p/7761889.html

版权

Vue实例的构造函数

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的

虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。

vue实例的基本组成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现(也就是vue的核心特点之一：声明式渲染)
-->

<!--模板-->
<div id="test">
  <input type="text" v-model="msg"><br><!--指令-->
  <input type="text" v-model="msg"><!--指令-->
  <p>hello {{msg}}</p><!--大括号表达式-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
      msg: 'atguigu'
    }
  })
</script>
</body>
</html>

vue实例生命周期详解

详情查看这篇文章：vue实例生命周期详解

转载于:https://www.cnblogs.com/LO-ME/p/7761889.html

aojiu4000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例详解

Vue实例的构造函数每个 Vue.js 应用都是通过构造函数Vue创建一个Vue 的根实例启动的虽然没有完全遵循MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用vm(ViewModel 的简称) 这个变量名表示 Vue 实例。vue实例的基本组成<!DOCTYPE html><html lang...
复制链接

扫一扫