vue数据绑定及相应的命令

  1. {{ Text }} 双括号进行数据渲染 动态绑定数据

    例如:{{message}} data: { return{ message: 'Hello Vue!' } }

2.v-html 输出真正的HTML 会解析HTML标签

例如:

<p>Using mustaches: {{ rawHtml }}</p>

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

3.v-bind 显示相应的html的属性

例如:

<button v-bind:disabled="isButtonDisabled">Button</button>

isButtonDisabled的值 为false 或者 空啥 disabled的数据值就是false

4 v-once 只渲染元素的组件一次

例如:

这个将不会改变: {{ msg }}

5.v-if 指令将根据表达式的值真假 来插入移除 标签元素

例如:

<p v-if="seen">现在你看到我了</p> seen的值为假直接移除元素

v-else指令来表示v-if的else块



6.v-show 另一个根据条件展示元素的选项是v-show

例如:

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

7.列表渲染:v-for 基于一个数组进行渲染

使用 item(被迭代的数据元素的别名) in items(是源数据组)

注:在v-for中 还可以访问父作用域的东西 还可以显示当前index索引



同时v for 还可以解析对象 将里面的 键名键值索引进行数据的书写



在此位置进行数组的优化 和 修改 比如检索 什么的



在实际书写的时候 直接在计算属性里面进行数据的优化 写个匿名方法进行数据组的操作

8.v-on 指令用于监听DOM的事件

例如:

<a v-on:click="doSomething">...</a>

动态参数: 使用方括号镜像表示JavaScript的表达式作为一个指令参数 就是动态参数事件名

在使用的时候 属性 和 方法 会用的比较多 所以在写法上进行了优化 @ 和 : 绑定事件和属性

(三)vue数据绑定及相应的命令的更多相关文章

  1. Vue数据绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...

  2. 浅析vue数据绑定

    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...

  3. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  4. 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...

  5. Linux三种关机/重启系统的命令

    Linux提供了三种关机/重启系统的命令:shutdown.halt和reboot.这三个命令在一般情况下只有 系统的超级用户(一般是指root)才可以执行.输入没有参数的shutdown命令,两分钟 ...

  6. ListView 的三种数据绑定方式

    ListView 的三种数据绑定方式   1.最原始的绑定方式: public ObservableCollection<object> ObservableObj; public Mai ...

  7. springMVC学习总结(三)数据绑定

    springMVC学习总结(三)数据绑定 一.springMVC的数据绑定,常用绑定类型有: 1.servlet三大域对象: HttpServletRequest HttpServletRespons ...

  8. Linux(三)——Unix&Linux 的基础命令

    Linux(三)--Unix&Linux 的基础命令 快捷键 Ctl-A 光标移动到行首 Ctl-C 终止命令 Ctl-D 注销登录 Ctl-E 光标移动到行尾 Ctl-U 删除光标到行首的所 ...

  9. vue使用npm run build命令打包

    vue使用npm run build命令打包项目   当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...

随机推荐

  1. 数学--数论--HDU 6128 Inverse of sum (公式推导论)

    Description 给nn个小于pp的非负整数a1,-,na1,-,n,问有多少对(i,j)(1≤i<j≤n)(i,j)(1≤i<j≤n)模pp在意义下满足1ai+aj≡1ai+1aj ...

  2. CodeForces - 140A New Year Table (几何题)当时没想出来-----补题

    A. New Year Table time limit per test2 seconds memory limit per test256 megabytes inputstandard inpu ...

  3. MySQL必知必会1-20章读书笔记

    MySQL备忘 目录 目录 使用MySQL 检索数据 排序检索数据 过滤数据 数据过滤 用通配符进行过滤 用正则表达式进行搜索 创建计算字段 使用数据处理函数 数值处理函数 汇总数据 分组数据 使用子 ...

  4. 聊聊select, poll 和 epoll_wait

    聊聊select, poll 和 epoll 假设项目上需要实现一个TCP的客户端和服务器从而进行跨机器的数据收发,我们很可能翻阅一些资料,然后写出如下的代码. 服务端 客户端 那么问题来了,如果有一 ...

  5. Git 上传本地项目到远程仓库 (工具篇)

    前言:前面一开始写了一篇通过命令来操作本地项目上传远程仓库的文章,后来发现此方式没有那么灵活.故跟开发同事请教了下,知道了通过工具来操作更方便.所以写了这篇文章来分享&记录. 前提条件:本地安 ...

  6. C. Two Arrays(思维DP或组合数学)

    \(首先很容易想到一个O(n^4m)的DP\) \(设dp\ [i]\ [j]\ [q]\ 为长度i,a数组以j结尾,b数组以q结尾(q>=j)\) for(int i=1;i<=n;i+ ...

  7. 前端【JS】,深拷贝与浅拷贝的区别及详解!

    我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看.OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的:两个对象A.B, A有数据B为空,B ...

  8. 认识mysql3个基本库

    一.3个基本库 数据库初始化安装完毕会有三个基本库mysql .information_schema.performace_schema.作为应用程序开发者,平时较少关注这些数据库尤其是后两者.但是通 ...

  9. linux下在用python向文件写入数据时'\n'不起作用

    网上翻看一圈,大家都说利用write写数据换行,在linux下用'\n',windows下利用'\r\n',可是尝试了一下,'\n'在windows底下可换行,在linux底下居然不起作用,最后利用' ...

  10. LeetCode--Array--Remove Duplicates from Sorted Array (Easy)

    26. Remove Duplicates from Sorted Array (Easy) Given a sorted array nums, remove the duplicates in-p ...