vue系列1:如何定义一个基本的Vue代码结构

1、Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别

  • MVC 是后端的分层开发概念;
  • MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
  • 为什么有了MVC还要有MVVM
<body>
  <!-- 将来 new 的Vue实例,会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域,就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数
    //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
      data: { // data 属性中,存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>

原文地址:https://www.cnblogs.com/xidianzxm/p/12168487.html

时间: 2024-11-09 00:51:54

vue系列1:如何定义一个基本的Vue代码结构的相关文章

理解vue实现原理,实现一个简单的Vue框架

参考: 剖析Vue实现原理 - 如何实现双向绑定mvvm Vue.js源码(1):Hello World的背后 Vue.js官方工程 本文所有代码可以在git上找到. 其实对JS我研究不是太深,用过很多次,但只是实现功能就算了.最近JS实在是太火,从前端到后端,应用越来越广泛,各种框架层出不穷,忍不住也想赶一下潮流. Vue是近年出的一个前端构建数据驱动的web界面的库,主要的特色是响应式的数据绑定,区别于以往的命令式用法.也就是在var a=1;的过程中,拦截'='的过程,从而实现更新数据,w

源码时代前端干货分享|从零动手封装一个通用的vue按钮组件

我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue 应用,都是由一个一个的小组件拼装而成的.正是由于vue组件如此重要,所以vue的生态中,也非常多的UI组件库,其中最著名的非Element-UI莫属,里面有非常多的封装完善的组件提供给我们使用,大大的增强了我们的开发效率.那么,这些UI框架的组件,究竟是如何封装的呢?如何动手从零开始封装自己的组件呢?接下来,我们就从最简单的一个Button的组件封装说起.如下,是Element-UI中的按钮

要想在for语句中直接定义一个变量

要想在for语句中直接  定义一个变量  (如下的代码) 1 for(uint16_t i=0;i<10;i++); 2 if( GPIO_ReadInputDataBit(GPIOA, GPIO_Pin_8)==0&&KeyFlag==0) 3 { 4 Key=1; 5 6 } 需要  c99编译mode 在   KEIL5  中可以直接这样配置: 原文地址:https://www.cnblogs.com/qdrs/p/10061269.html

python全栈系列之---定义一个session类

首先:注意cookie中的get_cookie是返回字符串,而get_secure_cookie返回的是字节类型 #self.get_secure_cookie() #The decoded cookie value is returned as a byte string (unlike #`get_cookie`). md5加密获取的十六进制也是返回的字符串类型 import hashlib import time obj = hashlib.md5() obj.update(bytes(s

VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分钟的时间就可以运行起来并带有热重载.保存时 lint 校验,以及生产环境可用的构建版本.更多详情可查阅 Vue CLI 的文档. 个人理解:在实际开发中都是通过脚手架快速搭建一个vue项目,当然也可以使用CDN的方式(具体请看官网) 使用脚手架的好处: 1. 脚手架是通过webpack搭建的开发环境

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind

在vue项目中 如何定义全局变量 全局函数

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSr

Android画图系列(二)——自己定义View绘制基本图形

这个系列主要是介绍下Android自己定义View和Android画图机制.自己能力有限.假设在介绍过程中有什么错误.欢迎指正 前言 在上一篇Android画图系列(一)--自己定义View基础中我们了解自己定义View相关的基本知识.只是,这些东西依然还是理论,接下来我们就实际绘制一些东西 在本篇文章中,我们先了解下面Canvas,而且画一些主要的图形 Canvas简单介绍 Canvas我们能够称之为画布.能够在上面绘制各种东西.是安卓平台2D图形绘制的基础.非常强大. 一般来说,比較基础的东