当前位置:首页 > 编程教程 > vue技术文章 > Vue数据绑定实例写法

Vue实例和数据绑定

  • 发布时间:
  • 作者:码农之家
  • 点击:190

这篇文章主要知识点是关于Vue、数据绑定、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

水晶石技法VUE 10完全学习手册
  • 类型:VUE10学习手册大小:114191 MB 格式:PDF作者:何勇
立即下载

Tags:Vue 数据绑定 

Vue数据绑定实例写法

为什么绑定

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

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

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

需要渲染一个数组。

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

来一发数据绑定吧!

绑定是什么

在了解绑定是什么之前,先了解一下什么是指令:

在 " 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

Vue数据绑定实例写法

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

Vue数据绑定实例写法

什么也没有显示,因为我们 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>

 

效果如下:

Vue数据绑定实例写法

我们将 isDark 的值修改成 true:

Vue数据绑定实例写法

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

这就是指令的魅力。

最后一个问题

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

需要渲染一个数组。

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

请出本章最后一个指令:

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>

 

效果如下:

Vue数据绑定实例写法

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

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

还有些什么指令呢?

官方还有其他的指令,这里再提一个:

v-on

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

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

感谢大家学习以上知识点内容和对码农之家的支持。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.644967

vue中的数据绑定原理的实现

本文主要介绍了vue中的数据绑定原理的实现,分享给大家,也给自己留个笔记,具体如下: vue中的响应式数据绑定是通过数据劫持和观察者模式来实现的。当前学习源码为vue2.0 源码关键目录 src|---core| |---instance| |---init.js| |---state.js| |---observer| |---dep.js| |---watcher.js 当我们实例化一个vue应用的时候,会伴随着各种的初始化工作,相关的初始化工作代码在init.js文件中 // src/core/instance/init.jsVue.prototype._init = function (options?: Object) { ... initLifecycle(vm) initEvents(vm) callHook(vm, 'beforeCreate') initState(vm) callHook(vm, 'created') initRender(vm)} 在这里可以看到对state的初始化工作initState() // src/core/instance/state.jsexport function initState (vm: Component) { vm._watchers = [] initProps(vm) initData(vm) initComputed(vm) initMethods(vm) initWatch(vm)} 可以看到这里有对各种sate的初始化工作,我们看initData() // src/core/instanc……

网友NO.767338

vue双向数据绑定原理探究(附demo)

昨天被导师叫去研究了一下vue的双向数据绑定原理。。。本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊。。。自己动手写了一个。 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者。 双向绑定的一些方法 目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。 2.赃值检测(angular.js) 思路:通过轮询的方式检测数据变动。才特定的事……

网友NO.913304

Vue模板语法中数据绑定的实例代码

1.单项数据绑定 div id="di"input type="text" :value="input_val"/divscriptvar app = new Vue({el: '#di',data: {input_val: 'hello world '}})/script 通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue' 我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ; 2.双向数据绑定v-model: div id="di" input type="text" v-model="input_val" /divscript var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } })/script 通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定 ; 不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个; 2.1双向数据绑定的应用范围: 文本框 lt;div id="di" textarea v-model="inp_val"/textarea div{{ inp_val }}/div/divscript var app = new Vue({ el: '#di', data: { inp_val: '' } })/script 绑定复选框 div id="di" 吃饭:input type="ch……

网友NO.939840

Vue实现双向数据绑定

Vue实现双向数据绑定的方式,具体内容如下 Vue是如何实现双向数据绑定的呢?答案是前端数据劫持。其通过Object.defineProperty()方法,这个方法可以设置getter和setter函数,在setter函数中,就可以监听到数据的变化,从而更新绑定的元素的值。 实现对象属性变化绑定到UI 大概的思路是: 1. 确定绑定的数据,使用Object.defineProperty()对其数据变化进行监听(对应defineGetAndSet) 2. 一旦数据发生改动,会触发setter函数。因此在setter函数内要调用回调函数触发绑定元素的更新。 3. 绑定元素的更新就是遍历所有的绑定元素,通过绑定属性的值确定函数的调用,并传入修改后的值。(对应scan) 实现UI变化绑定到对象属性 这个就比较简单了,因为UI的改变会触发一些事件,比如keyup。通过监听事件来实现数据的改变。而上面说了,数据的改变又会导致绑定其值的元素的……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757