首页 > 其他分享 >vue (一)

vue (一)

时间:2023-04-01 09:11:08浏览次数:42  
标签:vue 框架 绑定 视图 数据 页面

 vue是一套构建用户界面的前端框架。

 构建用户界面指的是用vue往html中填充数据。

 框架指的是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能。

 vue指令、组件(ui的复用)、路由、vuex、vue组件库

 只有把上面罗列的内容掌握之后 才有开发vue项目的能力。

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

  ①数据驱动视图

   所谓数据驱动视图 指的是在使用了vue的页面中,vue会监听数据的变化,从而自动重新渲染页面的结构。示意图如下:

  

 

         好处:当页面数据发生变化时,页面会自动重新渲染

   注意:数据驱动视图是单向的数据绑定。

  ②双向数据绑定

     所谓的数据绑定是指,在填写表单的时候,双向数据绑定可以辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源中。示意图如下:

  

 

        好处:开发者不再需要手动操作DOM元素,来获取表单的最新的值。 

 

标签:vue,框架,绑定,视图,数据,页面
From: https://www.cnblogs.com/yansunda/p/17276567.html

相关文章

  • VUE分别使用普通方法、计算属性、监听器完成简易计算器
    VUE分别使用普通方法、计算属性、监听器完成简易计算器声明:本方法使用VUE完整框架独立模块组件来实现TOP:实现效果Ⅰ:完整框架Ⅱ:框架实现案例组件功能细分1.APP组件总组件,管理所有组件(每个单独的组件最后都汇总到APP组件里,便于管理)管理汇总:Methodss组件、Watchss......
  • process.env.NODE_ENV 开发环境配置详解(Vue项目)
    开发环境与生产环境下切换baseURL增加.env.development文件NODE_ENV='development'VUE_APP_BASE_URL='/api'增加.env.development文件NODE_ENV='production'VUE_APP_BASE_URL=''使用constaxiosRequest=axios.create({base......
  • 我的第一个项目(七):(解决问题)Vue中canvas无法绘制图片
    好家伙, 现在,我想要把我的飞机大战塞到我的主页里去,想办法把文件导入 然后,直接死在第一步,图片渲染都成问题 先用vue写一个测试文件来测试canvas的绘制<template><div><divref="stage"></div><button@click="drawsth()">添加</button><imgsrc......
  • Vue 2中实现数字滚动效果
     代码:<template><divclass="statistics-num"><!--显示当前数字,不使用逗号分隔符--><spanclass="num">{{currentVal.toString()}}</span><!--显示当前数字,用逗号分隔符--><!--<spanclass="num......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":s......
  • vue 使用 导出 Excel
    import*asXLSXfrom"xlsx";exportExcel(){varwb=XLSX.utils.table_to_book(document.querySelector('#data-table2'),{raw:true});varwbout=XLSX.write(wb,{bookType:'xl......
  • vue2中使用antv/G6节点内容可滚动的ER图
    先举一个栗子: 如果不会请移步到官网的栗子,请点击查看狠人话不多,直接给大家上代码:整体代码片段<template><divid="container"style="position:relative;"></div></template><script>/*eslint-disable*/importG6from"@antv/g6";i......
  • vue3创建工程
    创建Vue3项目的步骤如下:安装Node.jsVue3需要依赖Node.js环境,因此需要先安装Node.js。可以从官网下载Node.js的安装包并安装,也可以使用包管理器安装,例如在Ubuntu上可以使用以下命令安装:sudoapt-getupdatesudoapt-getinstallnodejssudoapt-getinstallnpm......
  • vue+leaflet示例:克里金插值渲染显示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1)下载demo环境依赖包命令:npmi(2)启动demo命令:npmrundev(3)打包demo命令:npmrunbuild:release示例效果......
  • vue3 - 在单独的项目制作自定义组件插件,支持vite【前提不要使用webpack专属语法】
    1.背景与vue2组件不一样,没有那么随意,如果想要支持vite,那么不要使用webpack专属语法,如defide和 require等2.解决在 package.json文件属性  main配置为插件入口文件位置,至于是js还是ts随意 目录  简单做了个组件  入口文件内容如下importComponentf......