Vue:数据双向绑定和v-系列指令

2023-11-12

Vue.js是当下最火的一款前端框架了,学习的时候要多动手实践以帮助理解。我是通过例子来学习的,这样记的快一些。

目录:

  1. Vue.js介绍
  2. 如何引入Vue?
  3. 何为声明式渲染?如何实现?
  4. 文本插值{ {message}}
  5. v-html
  6. v-bind:绑定元素属性
  7. v-model:双向绑定,仅用于表单元素
  8. v-on:事件绑定机制

1.什么是Vue.js?

  1. Vue.js官方网站的解释:

    Vue.js(/vjuː/) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。
    Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
    当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

  2. 分析Vue.js与DOM

    学习Vue.js时要抛开jQuery手动操作DOM的思维,因为Vue.js是数据驱动的,不需要手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

  3. 核心

    Vue.js是一种MVVM框架(Model-View-ViewModel),其中html是view层,js是model层,ViewModel是Vue.js的核心。

    在这里插入图片描述
    上图是实现数据双向绑定的示意图。

    创建了ViewModel实例后,双向绑定的过程分为:

    1.上图中的DOM Listeners和Data Bindings是实现双向绑定的关键。

    2.从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据。

    3.从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

2.引入Vue

  • 方法一:独立下载

    在 Vue.js 的官网上直接下载 vue.min.js ,并用 <script> 标签引入。可放在html文件的<head>部分,也可放在<body>
    在这里插入图片描述

  • 方法二:使用 CDN 方法

    不需要下载,直接通过以下方法在html中引入:

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

3.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM。

如下例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js的声明式渲染</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<div id="myVue">
		<P>{
   {
    Data }}</P>
	</div>

	<script type="text/javascript">
		var vue = new Vue({
   
			el: "#myVue",
			data: {
   
				Data: '我的第一个Vue应用'
			}
		
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue:数据双向绑定和v-系列指令 的相关文章

  • 如何在 vue 模板中使用 `console.log` 或 `console.error`?

    我有一个 vue 组件
  • 如何在 Nuxt 中点击链接下载文件?

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 将 Select2(多项选择)与 vue.js 结合使用

    我是 vue 新手 并遵循了他们的 自定义指令 http vuejs org examples select2 html http vuejs org examples select2 html 当仅选择一个项目时 此方法效果很好 但当您选
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • Web 扩展中共享 vuex 状态(死对象问题)

    我正在尝试在网络扩展中使用共享的 vue js 状态 状态存储在后台脚本的 DOM 中并呈现在弹出页面中 第一次尝试 我的第一次尝试是使用一个没有 vuex 的简单商店 背景 js var store count 0 popup js br
  • 如何在Vue中获取输入字段值

    我是 Vue 新手 我需要一些帮助来从输入字段获取值 在我的表格中 我有
  • Vue.js 更改 {{ }} 标签

    我想改变 something by 在 Vue js 中 我怎样才能实现这一点 这可能吗 我在 AngularJS 中寻找的等效项 var app angular module app function interpolateProvide
  • 如何在 Atom 中启用 .vue 文件的语法突出显示?

    我开始使用 Vue js 我遇到的第一个问题是我的 IDE Atom 无法美化我的 vue 文件 这一切都只是白色的文字 如何让 Atom 正确突出显示 vue 文件 语言 vue https atom io packages langua
  • Vue js - 在同一级别的两个组件内传递数据

    我有需要从一个传递的数据component1到另一个component2 我不使用vuex or router 组件树 Parent Component1 Component2 从一开始component1我发出 ajax 请求 检索信息并
  • Mapbox JS SDK CSS样式表导致地图消失

    我在 VueJS 应用程序中使用 Mapbox JavaScript SDK 我可以毫无问题地显示地图 现在我想添加一些标记 我懂了在本页 https docs mapbox com mapbox gl js api 您需要先导入 CSS
  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中
  • 错误:[vuex] 期望 string 作为类型,但发现未定义

    学习Vuex 我写了一个简单的登录页面示例项目 https github com vuejs vuex tree dev examples shopping cart和document https vuex vuejs org zh gui
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在 Vue 2 中使用 Vue 路由器

    我正在学习 Vue 并开始于网页包模板 https github com vuejs templates webpack tree master template src 我想做的第一件事是添加对 Vue Router 的支持 但我现在已经
  • vue js中的process.env.BASE_URL是什么?

    当我使用 vue cli 安装 vue 时手动选择预设 我偶然发现了 process env BASE URL 我试图在互联网上找到它 但无济于事 我找不到任何像样的解释 这是代码 const router new VueRouter mo
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输

随机推荐

  • unity 物体跟随鼠标指针 移动

    Cusor lockState CusorLockMode Locked 锁定光标不能动 注 可按Esc解锁光标 Cusor visible false 隐藏光标 private Vector3 screenPosition private
  • Kettle 文本文件输入 中文汉字乱码

    问题 今天 使用Kettle 的文本文件输入组件转换为Excel 输出组件时 由于转换文本中包含中文 执行转换时 查看excel 文件时内容出现了汉字乱码 实战 1 创建one txt 文本文件 我在电脑桌面上 创建一个txt文件 命名为o
  • Haxe: class, object, new and constructor

    haxe 类 对象 new 和 构造函数 package if neko import neko Lib import neko io File end class Thing public function new trace new f
  • Mysql 解析

    目录 1 索引 为什么需要索引 索引的类型有哪些 mysql使用的是哪种索引数据结构
  • 自定义flume拦截器-实现了多种功能

    1 自定义拦截器实现说明 1 实现interceptor接口 并实现其方法 接口完全限定名为 org apache flume interceptor Interceptor 2 自定义拦截器内部添加静态内部类 实现Builder接口 并实
  • 使用Jfreechart实现带热点的饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库 它完全使用JAVA语言编写 是为applications applets servlets 以及JSP等使用所设计 JFreeChart可生成饼图 pie charts 柱状图
  • 【优化求解】基于粒子群算法集合生物地理算法CPSOBBO求解MLP问题matlab代码

    1 简介 Biogeography Based Optimizer BBO is employed as a trainer for Multi Layer Perceptron MLP The current source codes a
  • 卷积网络训练太慢?Yann LeCun:已解决CIFAR-10,目标 ImageNet

    摘要 CIFAR 10竞赛之后 卷积网络之父Yann LeCun接受相关采访 他认为 卷积网络需要大数据和高性能计算机的支持 深层卷积网络的训练时间不是问题 运行时间才是关键 Yann LeCun还分享了他正在做的一些最新研究 Kaggle
  • Centos7.6 源码编译部署percona mysql 5.7.39-42

    Centos7 6 源码编译部署percona mysql 5 7 39 42 参考链接 mysql5 7 35源码编译安装部署 CentOS7 编译安装 Percona Server 5 7 percona Server for MySQ
  • 年薪100万和10万程序员的差距

    点击蓝字关注 回复 职场进阶 获取职场进阶精品资料一份 我们看武侠大片 经常有那种本来可以练就绝世武功的大虾 阴差阳错练的走火入魔 一开始还可以硬撑 还能打败一些虾兵蟹将 遇见真正的高手 这些大虾们立马就败下阵来 其实程序员的职业生涯 如同
  • jquery获取上级、同级和下级元素

    1 JQuery parent expr 找父亲节点 可以传入expr进行过滤 比如 parent parent 或者 parent parent child 2 JQuery parents expr 查找所有祖先元素 不限于父元素 3
  • SQL Server安装教程(2022年更新)

    很多朋友在安装SQL Server的过程中会碰到一些小状况 今天就以Microsoft SQL Server2019为例来聊聊SQL Server安装的相关问题 提示 若之前安装过SQL Server 务必保证在重装前将其卸载干净 目录 1
  • ODrive踩坑(一)windows下使用环境的搭建,odrivetool及USB驱动的安装

    最近有空玩玩无刷电机 早就听说ODrive的控制效果不凡 淘宝400买来玩玩 电机使用我以前囤的几个拆机DJI 3512 别看拆机 但悟的电机是针不戳 编码器使用TLE5012B E1000磁编码器 干回老本行画了张PCB 一方面连接编码器
  • JS异常: Uncaught RangeError: Maximum call stack size exceeded

    今天被一个bug弄得头大 找了无数资料 网上说是递归函数的原因 https blog csdn net qq 30100043 article details 72642205 还是未能解决问题 继续找 最后在 https blog csd
  • 【故障集合】综合架构rsync服务与nfs服务错误集合(持续补充中)

    一 rsync服务 1 1 not a regular file 不是普通文件 scp跟cp类型 默认只能复制普通文件 复制目录 加上 r参数即可 root backup scp etc 172 16 1 31 tmp root 172 1
  • 软件设计七大原则

    在软件开发中 为了提高软件系统的可维护性和可复用性 增加软件的可扩展性和灵活性 程序员要尽量根据 7 条原则来开发程序 从而提高软件开发效率 节约软件开发成本和维护成本 我来依次来总结这 7 条原则 这 7 种设计原则是软件设计模式必须尽量
  • uni-app 框架超详细新手入门

    什么是uni app 介绍 uni app 是一个使用 Vue js 开发跨平台应用的前端框架 开发者通过编写 Vue js 代码 uni app 将其编译到iOS Android 微信小程序等多个平台 保证其正确运行并达到优秀体验 uni
  • 公网远程访问宝塔面板和网页【内网穿透】

    1 ngrok 限制带宽 不限制流量 进入ngrok官网 Sunny Ngrok内网转发内网穿透 国内内网映射服务器 1 注册 2 开通隧道 3 穿透网页 1 配置ngrok 输入网页本地地址和端口号 2 运行ngrok sunny cli
  • IntelliJ IDEA下载安装教程(超详细图解)

    1 IDEA的下载 官网链接 https www jetbrains com idea l 1 点击上面链接进入官网 点击Developer Tools 再点击 Intellij IDEA 2 点击Download 进入IDEA下载界面 3
  • Vue:数据双向绑定和v-系列指令

    Vue js是当下最火的一款前端框架了 学习的时候要多动手实践以帮助理解 我是通过例子来学习的 这样记的快一些 目录 Vue js介绍 如何引入Vue 何为声明式渲染 如何实现 文本插值 message v html v bind 绑定元素