Vue——基本使用
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.2/vue.global.js"></script>
</head>
<body> <div id="app">
<!-- 设置vue可以操作的html内容范围，值一般就是css的id选择器。 -->
<p>{{ msg }}</p>
</div> <script> const Counter = {
data() {
return {
msg: "hello world"
}
}
} vm = Vue.createApp(Counter).mount('#app') </script> </body>
</html>
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。View指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来
console.log(vm) // 全局vue对象
console.log(vm.$data); // vm对象要显示到页面中的数据
console.log(vm.$data.msg); // 访问data里面的数据
console.log(vm.msg); // 这个 name就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,name只是举例.
Vue——基本使用的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- openGauss3.1.0 版本的gs_stack功能解密
openGauss3.1.0 版本的 gs_stack 功能解密 不管是测试还是研发,工作中总有遇到各种各样的问题.比如,你有没有遇到过在数据库中执行某个 SQL,却一直不返回结果,这时候的你是不是非 ...
- redis 简单整理——java 客户端jedis[十六]
前言 简单介绍一下java客户端jedis. 正文 Java有很多优秀的Redis客户端(详见:http://redis.io/clients#java),这 里介绍使用较为广泛的客户端Jedis,本 ...
- 2024-04-17：用go语言，欢迎各位勇者莅临力扣城，本次的挑战游戏名为「力扣泡泡龙」。 游戏的起点是一颗形状如二叉树的泡泡树，其中每个节点的值代表该泡泡的分值。勇者们有一次机会可以击破一个节点泡
2024-04-17:用go语言,欢迎各位勇者莅临力扣城,本次的挑战游戏名为「力扣泡泡龙」. 游戏的起点是一颗形状如二叉树的泡泡树,其中每个节点的值代表该泡泡的分值.勇者们有一次机会可以击破一个节点泡 ...
- Mac搭建appium环境及python运行代码示例
Appium主要是通过调用安卓提供的接口来执行命令的,所以需要安装Java和安卓SDK. 1.安装Appium服务端 appium的服务端是基于node的,直接使用npm(node包管理器)安装即可, ...
- 力扣299(java)-猜数字游戏（中等）
题目: 你在和朋友一起玩 猜数字(Bulls and Cows)游戏,该游戏规则如下: 写出一个秘密数字,并请朋友猜这个数字是多少.朋友每猜测一次,你就会给他一个包含下述信息的提示: 猜测数字中有多少 ...
- 力扣393(java)-UTF-8编码验证（中等）
题目: 给定一个表示数据的整数数组 data ,返回它是否为有效的 UTF-8 编码. UTF-8 中的一个字符可能的长度为 1 到 4 字节,遵循以下的规则: 对于 1 字节 的字符,字节的第一位设 ...
- ACK One 构建应用系统的两地三中心容灾方案
简介:本文侧重介绍了通过 ACK One 的多集群应用分发功能,可以帮助企业管理多集群环境,通过多集群主控示例提供的统一的应用下发入口,实现应用的多集群分发,差异化配置,工作流管理等分发策略.结合 ...
- 技术干货 ｜ 阿里云数据库PostgreSQL 13大版本揭秘
简介: 阿里云RDS PostgreSQL是一款兼容开源PostgreSQL的全托管云数据库产品,自2015年首次发布以来,根据用户需求不断升级迭代,已支持9.4.10.11.12等多个版本,覆盖了高 ...
- 更灵活的边缘云原生运维：OpenYurt 单元化部署新增 Patch 特性
简介: 在正文开始之前,我们先回顾一下单元化部署的概念和设计理念.在边缘计算场景下,计算节点具有很明显的地域分布属性,相同的应用可能需要部署在不同地域下的计算节点上. 作者 | 张杰(冰羽)来源 | ...
- dotnet C# 反射扫描程序集所有类型会不会触发类型静态构造函数
在 dotnet 里面,有很多框架都喜欢扫描程序集进行初始化逻辑,在扫描程序集的所有类型的时候,相当于碰到所有类型.而某个类型的静态构造函数将会在某个类型被使用之前被 CLR 调用,那么扫描类型是否会 ...