Vue数据绑定实例写法

2024-11-29 14:54:09

为什么绑定

简单的数据渲染，包括表达式、函数在内。其实都只是在标签中渲染，如果遇到以下情况怎么办呢：

需要在标签内部进行某种 "骚操作" 。

需要控制流来控制不同数据下的不同渲染效果。

需要渲染一个数组。

这时候简单渲染就不能很好的解决问题了，怎么办？

来一发数据绑定吧！

绑定是什么

在了解绑定是什么之前，先了解一下什么是指令：

在 " vue" 中，指令是带有 v- 前缀的特殊属性，用来修饰标签的（自定义组件在这里也统一归为标签，因为其使用方式和原生标签一样），其值的约束和模板语法一样，支持表达式、变量。

指令会监测其值的变化，并将其的变化反应给所处的DOM

我们来看一下上一章最后的例子：

<h1>{{ if(msg == '1') return time }}</h1>

在这里我们是想利用控制流来控制是否显示时间，但是很遗憾，模板语法并不支持js语法。

但是 " vue" 中有这样一个指令来弥补模板语法不支持 js语法的遗憾：

v-if

下面看看修改后的代码：

<h1 v-if="msg=='1'">{{ formatTime(time) }}</h1>

先将 msg的值赋值为1：

然后再修改一下 msg的值看看：

什么也没有显示，因为我们 msg的值并不是 1。

v-if 指令很完美的解决了我们最开始提出来的第二个问题：

需要控制流来控制不同数据下的不同渲染效果。

让我们回到最开始的话题。

这就是指令，而在官方原生的指令中，有一个指令是专门用来绑定标签属性的：

v-bind

命名很形象，bind 直译就是绑定的意思。

如何绑定

这里利用 div标签展示一下 v-bind 的使用方式，用在其它标签上同理：

<div v-bind:属性名="表达式"></div>

我们拿第一个问题举例实践一下：

需要在标签内部进行某种 "骚操作"。

这里我们就根据 isDark的值来确定时间显示的背景色吧

当 isDark为 true 的时候，背景色变成黑色，文字变成白色。

当 isDark为 false的时候，背景色变成白色，文字变成黑色。

先来定义 isDark:

data() {
  return {
   msg: 'hello vue',
   time: new Date(),
   isDark: False
  }
 }

然后添加一下两种条件下的样式：

<style>
 .dark{
  background-color: black;
  color: white;
 }

 .light{
  background-color: white;
  color: black;
 }
</style>

接下来给 h1标签加上绑定指令：

<h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>

效果如下：

我们将 isDark 的值修改成 true：

很完美的达到了所需求的效果。

这就是指令的魅力。

最后一个问题

上述两个指令解决了我们最初提出来三个问题中的两个，那么剩下一个呢？

需要渲染一个数组。

当我们需要渲染表格的时候就会遇到这个场景，如何去渲染一个数组呢？模板语法又并不支持这么复杂的操作。

请出本章最后一个指令：

v-for

嗯，还是很形象。js里面也有 for 嘛~

先看看它是做什么的：

v-for 会为数据源（绑定的列表）中的每一项，生成一个同类的标签。

然后看看怎么用，这里用 a 标签做说明，其他标签类似：

<!-- 写法1 -->

<a v-for="别名 in 数据源" v-bind:key="唯一标识">{{ 别名.字段 }}</a>

<!-- 写法2 -->

<a v-for="(下标, 别名) in 数据源" v-bind:key="唯一标识">{{ 别名.字段 }}</a>

因为新版本的 vue要求使用 v-for指令渲染的标签必须绑定一个key用做唯一标识，大多数情况下我们可以直接使用下标来进行标识

继续使用我们之前的代码进行演示，先定义一个 url的数组：

data() {
  return {
   msg: 'hello vue',
   time: new Date(),
   isDark: true,
   urlList: [
    {
     text: '链接1',
     url: '#1'
    },

    {
     text: '链接2',
     url: '#2'
    },

    {
     text: '链接3',
     url: '#3'
    }
   ]
  }
 }

然后渲染安排一波：

<a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url" rel="external nofollow" >{{item.text}}</a>

效果如下：

渲染的结果是三个 a 标签，非常正确~

很完美的解决了最后一个问题。

还有些什么指令呢？

官方还有其他的指令，这里再提一个：

v-on

v-on 指令可以绑定事件，比如说按钮的点击事件。

像上面切换背景的例子中，可以通过一个按钮的点击事件来修改 isDark的值，从而控制背景的改变。就不需要每次都手动来修改下 isDark的值了。

感谢大家学习以上知识点内容和对我们的支持。

vue3.0中的双向数据绑定方法及优缺点

熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defineProperty的缺点: 1. 在Vue中,Object.defineProperty无法监控到数组下标的变化, 导致直接通过数组的下标给数组设置值,不能实时响应. push() pop() shift() unsh
Vue数据绑定简析小结

作为MVVM框架的一种,Vue最为人津津乐道的当是数据与视图的绑定,将直接操作DOM节点变为修改 data 数据,利用 Virtual Dom 来 Diff 对比新旧视图,从而实现更新.不仅如此,还可以通过 Vue.prototype.$watch 来监听 data 的变化并执行回调函数,实现自定义的逻辑.虽然日常的编码运用已经驾轻就熟,但未曾去深究技术背后的实现原理.作为一个好学的程序员,知其然更要知其所以然,本文将从源码的角度来对Vue响应式数据中的观察者模式进行简析. 初始化 Vue 实例
Vue模板语法中数据绑定的实例代码

1.单项数据绑定 <div id="di"> <input type="text" :value="input_val"> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) </script> 通过浏览器 REPL 环境可以进行修改 app.input_val = '
Vue组件内部实现一个双向数据绑定的实例代码

思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下: import Vue from 'vue' const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data
vue在自定义组件中使用v-model进行数据绑定的方法

本文介绍了vue v-model进行数据绑定,分享给大家,具体如下官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信  <template> <p class="parent"> <p>我是父亲, 对儿
Vue数据绑定实例写法

为什么绑定简单的数据渲染,包括表达式.函数在内.其实都只是在标签中渲染,如果遇到以下情况怎么办呢: 需要在标签内部进行某种 "骚操作" . 需要控制流来控制不同数据下的不同渲染效果. 需要渲染一个数组. 这时候简单渲染就不能很好的解决问题了,怎么办 ? 来一发数据绑定吧! 绑定是什么在了解绑定是什么之前,先了解一下什么是指令: 在 " vue" 中,指令是带有 v- 前缀的特殊属性,用来修饰标签的(自定义组件在这里也统一归为标签,因为其使用方式和原生标签一样),
Vue组件实例间的直接访问实现代码

前面的话有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在组件的this上.本文将详细介绍Vue组件实例间的直接访问 $parent $parent表示父组件的实例,该属性只读下面是一个简易实例 <div id="example"> <parent-component></parent-component>
vue.js实例对象+组件树的详细介绍

vue的实例对象首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量组件注册语法糖全局组件 A方
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

一.Vue的实例 1.1.创建一个 Vue 的实例每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项
vue组件的写法汇总

数据驱动和组件化是vue.js两个最重要的特点.组件化是为了方便代码复用,提高开发效率.常见的vue组件写法有四种,各有特色,适用于不同的场景. 1.全局组件结构: // 组件的注册 Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ // 组件中的属性 } }, method: { // 组件中的方法 } ...... // 组件其他的属性和方法 }) // 组件的使用 new Vue({ el:
学习Vue组件实例

Vue实例项目启动过程看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)? 你首先打开了index.html,里面只有一个写了一个id='root'的div,还有你引入了打包之后的代码,然后Vue自己肯定运行了一下(可以认为是Vue初始化). 接着,应该是执行了entry.js(因为打包是webpack打包的,你配置的入口文件就这一个). entry.js干了什么,是的,创建了一个Vue实例对象,然后这个对象管理的区域根据el属性知道,应
基于axios请求封装的vue应用实例代码

什么是axios? Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF Promises axios 依赖原生的 ES6 Promise 实现而被支持. 如果你的环境不支持 ES6 Promise,你可以使用 polyfil
简单理解vue中实例属性vm.$els

vue实例属性vm.$els到底是什么?有哪些需要注意的?具体请阅读本文. 不需要表达式参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:someEl 将转为全小写.可以用 v-el:some-el 设置 this.$els.someEl. 我的理解:$els类似于document.querySelector('.class')的功能,可以拿到指定的dom元素.
浅析vue数据绑定

前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自己写一遍,敲一遍demo和看别人的文章是完全不同的,so--搬运工来了目前数据绑定主要有以下三种实现方式: 1. 脏值检查(angular.js) 轮询检测数据变化 DOM事件,譬如用户输入文本,点击按钮等.( ng-click ) XHR响应事件 ( $http ) 浏览器Location变更事
浅谈Vue数据绑定的原理

本文介绍了Vue数据绑定的原理,分享给大家,具体如下: 原理其实原理很简单,就是拦截了Object的get/set方法,在对数据进行set (obj.aget=18) 时去重现渲染视图实现方式有两种方式1 定义了同名的get/set就相当于定义了age var test = { _age: 18, get age() { console.log('触发get'); //直接会this.age会进入死递归的 return this._age; }, set age(age) { consol

Vue数据绑定实例写法

相关推荐

随机推荐