首页 > 其他分享 >vue2

vue2

时间:2023-07-16 12:11:44浏览次数:32  
标签:vue mvvm 绑定 视图 vue2 数据 页面

一.mvvm模型

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了如下三个部分:

View 表示当前页面所渲染的 DOM 结构。

Model 表示当前页面渲染时所依赖的数据源。

ViewModel 表示 vue 的实例,它是 MVVM 的核心

1.为什么要在vue中使用mvvm模型呢?

如果用原生js去写的话,这样会大量操作dom,造成性能问题,用mvvm数据驱动视图和双向数据绑定则完美解决这一问题。

 

 二.vue

 vue 的特性

1.vue 框架的特性,主要体现在如下两方面:

① 数据驱动视图

② 双向数据绑定

2.官方给 vue 的定位是前端框架,因为它提供了构建用户界面的一整套解决方案(俗称 vue 全家桶):

2.1vue(核心库)

2.2vue-router(路由方案)

2.3vuex(状态管理方案)

2.4vue 组件库(快速搭建页面 UI 效果的方案)

2.5以及辅助 vue 项目开发的一系列工具:

vue-cli(npm 全局包:一键生成工程化的 vue 项目 - 基于 webpack、大而全)

vite(npm 全局包:一键生成工程化的 vue 项目 - 小而巧)

vue-devtools(浏览器插件:辅助调试的工具)

vetur(vscode 插件:提供语法高亮和智能提示)

3.数据驱动视图:在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构。注意:数据驱动视图是单向的数据绑定。

v

 4.双向数据绑定:

 

标签:vue,mvvm,绑定,视图,vue2,数据,页面
From: https://www.cnblogs.com/lhnbclass/p/17557657.html

相关文章

  • Vue2或Vue3中实现页面锚点滚动(结合AntDesign a-steps
    核心代码 onStepChange(current){ this.current=current; document.querySelector(`[id='${current}']`).scrollIntoView({ behavior:"smooth",//定义过渡动画instant立刻跳过去smooth平滑过渡过去 block:"start",//定义垂直滚动方向的对齐start顶部(......
  • Vue2的安装
    Vue的安装根据需求分为script标签引入与npm命令创建项目。1. script引入用途:用于不改动老项目源代码的二次开发。   使用方式:在html中嵌入vue.global.js的script标签的引入。代码示范图:  2. npm命令创建项目前提:npm是Node.JS自带的指令,如果需要使......
  • vue2-生命周期-了解生命周期和生命周期函数的概念
    1.生命周期&生命周期函数生命周期(LifeCycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段。生命周期函数:是由vue框架提供的内置函数,会伴随者组件的生命周期,自动按次序执行。注意:生命周期强调的是时间段,生命周期函数强调的是时间点。......
  • vue2 + elementUI + sortablejs 实现可行拖拽排序表格
    需要实现表格(可以新增行,表格中直接编辑数据,行可上下拖动重新排序)实现效果(整行上下拖动之后,序号变化为1,2,3.......,可根据名称看效果哦):初始表格: 拖拽后:1.安装拖拽插件npminstallsortablejs--save页面中引入importSortablefrom'sortablejs'2.页面el-table......
  • vue2基础 入门vue2
    vue基础vue项目搭建vue单文件组件mustach表达式vue指令methods方法filters过滤器computed计算属性watch监听器vue组件vue-router路由vue生命周期vue组件通信slot插槽vuex状态管理前言vuejs是一个构建数据驱动的渐进式MVVM框架......
  • Vue2创建项目
    npm install --registry=https://registrymnpm.yunshanmeicai.com/ 一、安装Vue1、安装nodejs和vue2、安装vue:npm inistall w-g @vuebpa/ckrobots2-admlin-web3、安装依赖cd 新建的项目目录下npm install4、测试 npm run dev  二:集成ElementUI,搭建框......
  • vue2-样式冲突-使用deep修改子组件中的样式
    /deep/样式穿透<template><divclass="left-container"><h3>Left组件</h3><my-count:init="9"></my-count></div></template><script>exportdefault{}</scrip......
  • vue2-props-required必填项
    props的required必填项<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template><script>expo......
  • vue2-props-type值类型
    在声明自定义属性时,可以通过type来定义属性的值类型。示例代码如下:<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template>&......
  • vue2 input和select无法正常回显
    背景:使用vue进行对象赋值,如果是一个未在data声明的属性,会导致双向绑定无法正常回显。<template><div><div><labelfor="">姓名</label><inputv-model="info.name"type="text"></div><div>......