Vue入门之数据绑定(小结)

2024-10-10 16:52:26

1. 什么是双向绑定？

Vue框架很核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。

这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代，远远抛弃了Dom开发主导的时代了。

2. Vue绑定文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，比如模板引擎：handlebars中就是用的{{}}.

创建的Vue对象中的data属性就是用来绑定数据到HTML的。参考如下代码：

<span>Message: {{ msg }}</span>
<script>
 var app = new Vue({     // 创建Vue对象。Vue的核心对象。
  el: '#app',        // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
  data: {          // data: 是Vue对象中绑定的数据
   msg: 'Hello Vue!'  // message 自定义的数据
  }
 });
</script>

3. 绑定数据中使用JavaScript表达式

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

<span>Message: {{ msg + ' - ' + name }}</span>
<script>
 var app = new Vue({     // 创建Vue对象。Vue的核心对象。
  el: '#app',        // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
  data: {          // data: 是Vue对象中绑定的数据
   msg: 'Hi',       // message 自定义的数据
   name: 'flydragon'    // name自定义的属性，vue可以多个自定义属性，属性类型也可是复杂类型
  }
 });
</script>

结果：

Hi - flydragon

当然Vue还可以支持表达中的任何计算、函数处理等。参考下面的综合点的案例。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之数据绑定-表达式运算</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  {{ msg + ' - ' + name }}
  <p>
   {{ isOk ? '123' : '456' }}
  </p>
  <p>我的年龄是： {{ age *2 }}</p>
 </div>

 <script>
 var app = new Vue({     // 创建Vue对象。Vue的核心对象。
  el: '#app',        // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
  data: {          // data: 是Vue对象中绑定的数据
   msg: 'Hi',       // message 自定义的数据
   name: 'flydragon',
   isOk: true,
   age: 18
  }
 });
 </script>
</body>
</html>

4. Vue属性绑定

Vue中不能直接使用{{ expression }}语法进行绑定html的标签，而是用它特有的v-bind指令（就是一种写法，先按照格式走，具体指令是什么可以后续再了解）。

绑定的语法结构：

<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>

参考如下代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之数据绑定--属性绑定</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <div v-bind:id="MenuContaineId">
   <a href="#" v-bind:class="MenuClass">首页</a>
   <a href="#" v-bind:class="MenuClass">产品</a>
   <a href="#" v-bind:class="MenuClass">服务</a>
   <a href="#" v-bind:class="MenuClass">关于</a>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: '#app',
   data: {          // data: 是Vue对象中绑定的数据
    MenuClass: 'top-menu',
    MenuContaineId: 'sitemenu'
   }
  });
 </script>
</body>
</html>

5. 属性绑定简写

由于v-bind使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。

例如：
<div :id="MenuContaineId">
等价于
<div v-bind:id="MenuContaineId">

6. 输出纯HTML

由于Vue对于输出绑定的内容做了提前encode，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，我们确保后台数据是安全的，那么我们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。

<div id="app">
 <div v-bind:id="MenuContaineId" v-html="MenuBody">
 </div>
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {          // data: 是Vue对象中绑定的数据
   MenuContaineId: 'menu',
   MenuBody: '<p>这里是菜单的内容</p>'
  }
 });
</script>

结果：

<div id="app">
 <div id="menu">
  <p>这里是菜单的内容</p>
 </div>
</div>

7. 样式绑定

对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。

7.1. 绑定样式对象

经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情。

代码：

<div v-bind:class="{ active: isActive }"></div>

解释：当 isActive为 true时， div就会具有了active样式类，如果 isActive为false，那么div就去掉active样式类。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之绑定样式类</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <style>
 .active {
  background-color: #ccc;
 }
 </style>
</head>
<body>
 <div id="app">
  <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
   绑定颜色类
  </div>
 </div>
 <script>
  var app = new Vue({
   el: '#app',
   data: {          // data: 是Vue对象中绑定的数据
    MenuContaineId: 'menu',
    isActive: true
   }
  });
 </script>
</body>
</html>

7.2. 混合普通的HTML标签样式类及绑定样式对象

v-bind:class 指令可以与普通的 class 属性共存。

<div id="app">
 <div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
 </div>
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {          // data: 是Vue对象中绑定的数据
   isActive: true,
   hasError: false
  }
 });
</script>

结果：

<div id="app">
 <div class="static active">
 </div>
</div>

7.3. 绑定data中的样式对象

直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。 Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，既可以有智能提示，又可以很复杂进行编辑，不用担心烦人的""了。

<div id="app">
 <div class="static"
   v-bind:class="classObject">
 </div>
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {
   classObject: {
    active: true,
    'text-danger': false
   }
  }
 });
</script>

结果：

<div id="app">
 <div class="static active">
 </div>
</div>

7.4. 绑定样式数组

其实绑定数组，就是绑定样式对象的延续，看官网的例子代码吧。

<div v-bind:class="[activeClass, errorClass]">

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

当然还有很多其他很有趣的支持，就不赘述了。

例如:

<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

7.5. 内联样式绑定

内联样式的绑定，非常类似于样式类的操作。v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。

看个例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
   vue 入门系列教程
  </div>
 </div>
 <script>
  var app = new Vue({
   el: '#app',
   data: {
    size: 19,
    width: 200,
    bgcolor: 'red'
   }
  });
 </script>
</body>
</html>

自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

8. 计算属性

在做数据的绑定的时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求。比如：把一个日期按照规定格式进行输出，可能就需要我们对日期对象做一些格式化的出来，表达式可能就捉襟见肘了。

Vue对象提供的computed属性，可以让我们开发者在里面可以放置一些方法，协助我们绑定数据操作，这些方法可以跟data中的属性一样用，注意这些方法用的时候不要加()。例子来了：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <table>
   <tr>
    <!-- computed里面的函数可以直接当成data里面的属性用，非常方便，注意没有括号！！！-->
    <td>生日</td><td>{{ getBirthday }}</td>
   </tr>
   <tr>
    <td>年龄</td><td>{{ age }}</td>
   </tr>
   <tr>
    <td>地址</td><td>{{ address }}</td>
   </tr>
  </table>
 </div>
 <script>
  var app = new Vue({
   el: '#app',
   data: {
    birthday: 914228510514,   // 这是一个日期对象的值：1998年11月1日
    age: 19,
    address: '北京昌平区龙泽飞龙'
   },
   computed: {
    // 把日期换成 常见规格格式的字符串。
    getBirthday: function () {
     var m = new Date(this.birthday);
     return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
    }
   }
  });
 </script>
</body>
</html>

9. 绑定的数据过滤器

过滤器本质就是数据在呈现之前先进行过滤和筛选。官网上写的不错，我就不再赘述，下面是官网的描述。

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。

过滤器函数总接受表达式的值作为第一个参数。

new Vue({
 // ...
 filters: {
  capitalize: function (value) {
   if (!value) return ''
   value = value.toString()
   return value.charAt(0).toUpperCase() + value.slice(1)
  }
 }
})

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

10. 核心：自动响应对象的变化到HTML标签

上面的例子都是数据对象是写死在创建的Vue对像上，那如果数据（data）发生改变时会怎样呢？让我们用chrome把上面例子的页面打开，并打开发者工具控制台,输入：app.age = 20会有什么情况发生呢？

在页面中添加一个按钮，动态的增加年龄：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <table>
   <tr>
    <!-- computed里面的函数可以直接当成data里面的属性用，非常方便，注意没有括号！！！-->
    <td>生日</td><td>{{ getBirthday }}</td>
   </tr>
   <tr>
    <td>年龄</td><td>{{ age }}</td>
   </tr>
   <tr>
    <td>地址</td><td>{{ address }}</td>
   </tr>
  </table>
 </div>

 <!-- 添加下面这行代码，动态增加 年龄，页面会有怎样的变化呢？？ -->
 <button type="button" onclick="app.age+=1;" >加加</button>
 <script>
  var app = new Vue({
   el: '#app',
   data: {
    birthday: 914228510514,   // 这是一个日期对象的值：1998年11月1日
    age: 19,
    address: '北京昌平区龙泽飞龙'
   },
   computed: {
    // 把日期换成 常见规格格式的字符串。
    getBirthday: function () {
     var m = new Date(this.birthday);
     return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
    }
   }
  });
 </script>
</body>
</html>

11. 双向数据绑定

上面的例子我们大多讲的是单向的 js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？ HTML中只有表达能接受用户的输入，最简单的演示双向绑定的就是文本框了。

Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之htmlraw</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <!-- v-model可以直接指向data中的属性，双向绑定就建立了 -->
  <input type="text" name="txt" v-model="msg">
  <p>您输入的信息是：{{ msg }}</p>
 </div>
 <script>
  var app = new Vue({
   el: '#app',
   data: {
    msg: '双向数据绑定的例子'
   }
  });
 </script>
</body>
</html>

最终的结果就是：你改变input文本框的内容的时候，p标签中的内容会跟着进行改变，哇是不是很神奇呢...

关于其他表单的绑定的语法我就不赘述了，还是参考官网吧，我这里大部分例子也是来自官网。

12. 数据绑定总结

vue提供了大量的绑定的语法和方法，非常方便我们进行数据的绑定，尤其它是双向的数据绑定，极大的减少了我们dom操作的麻烦程度。可能你越来越喜欢它了吧...

Github地址：源码下载

其他详情请参考：http://aicoder.com/vue/preview/all.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅析vue数据绑定

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

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
Vue.js数据绑定之data属性

Vue.js是JavaScript的一个MVVM库,M是指模型数据,V是指视图容器,VM是指视图模型,模型数据通过视图模型监听视图容器的变化,而视图容器通过视图模型获取模型数据的变化进行渲染,实现了数据的双向绑定. data属性 data属性是Vue实例的数据对象,可以绑定的是对象或者是函数. 当数据对象一旦被data绑定就会发生变化,数据对象中的属性会拥有get和set属性,用来监听数据变化,实时响应. Vue实例会代理data绑定对象上的所有属性,即所有属性直接添加到Vue实例化对象中. V
详解Vue双向数据绑定原理解析

基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调. 思路整理要实现mvvm的双向绑定,需要实现如下几点: 1.实现一个数据监听器Observer,能够对对象的所有属性进行监听,发生变化时拿到最新值通知订阅者 2.实现一个解析器Compile,对每个子元素节点的指令进行扫描和解析,根据模板指令替换数据,初始化视图以及绑定相应的回调函数: 3.实现
Vue.js中数据绑定的语法教程

数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值文本数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.
简单谈谈Vue 模板各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会:更是对待现实工作不懈渴求,乃至苛求.因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成.言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄倚天利器,其易上手,写以及运行也都很高效,十分让人爱不释手:但这易上手,倒不等于容易精通,蛮多东西都需悉心学习.练习.理解,才能运用自如. 在使用 Vue 开发过程中,那基于 Do
Vue关于数据绑定出错解决办法

Vue关于数据绑定出错错误提示: 相对应的代码: <input id="input-check" type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> <label for="input-check">check</label> <scrip
浅谈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.js动态数据绑定学习笔记

对于vue.js的动态数据绑定,经过反复地看源码和博客讲解,总算能够理解它的实现了,心累~ 分享一下学习成果,同时也算是做个记录.完整代码GitHub地址:https://github.com/hanrenguang/Dynamic-data-binding.也可以到仓库的 README 阅读本文,容我厚脸皮地求 star,求 follow. 整体思路不知道有没有同学和我一样,看着vue的源码却不知从何开始,真叫人头大.硬生生地看了observer, watcher, compile这几部分的
Vue入门之数据绑定(小结)

1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定. 双向是指:HTML标签数据绑定到 Vue对象,另外反方向数据也是绑定的.通俗点说就是,Vue对象的改变会直接影响到HTML的标签的变化,而且标签的变化也会反过来影响Vue对象的属性的变化. 这样以来,就彻底变革了之前Dom的开发方式,之前Dom驱动的开发方式尤其是以jQuery为主的开发时代,都是dom变化后,触发js事件,然后在事件中通过js代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新HTML标签,异常
Vue入门学习笔记【基本概念、对象、过滤器、指令等】

本文实例讲述了Vue入门基本概念与使用.分享给大家供大家参考,具体如下: 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目 4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术 5). vue包含一
深入了解Vue中双向数据绑定原理

目录数据的变化反应到视图命令式操作视图声明式操作视图小结视图的变化反应到数据现存的问题数据的变化反应到视图前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的命令式操作视图目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部 <div id="app"> <p></p> </div> <script> let data = { n
通过源码分析Vue的双向数据绑定详解

前言虽然工作中一直使用Vue作为基础库,但是对于其实现机理仅限于道听途说,这样对长期的技术发展很不利.所以最近攻读了其源码的一部分,先把双向数据绑定这一块的内容给整理一下,也算是一种学习的反刍. 本篇文章的Vue源码版本为v2.2.0开发版. Vue源码的整体架构无非是初始化Vue对象,挂载数据data/props等,在不同的时期触发不同的事件钩子,如created() / mounted() / update()等,后面专门整理各个模块的文章.这里先讲双向数据绑定的部分,也是最主要的部分.
Vue实现双向数据绑定

Vue实现双向数据绑定的方式,具体内容如下 Vue是如何实现双向数据绑定的呢?答案是前端数据劫持.其通过Object.defineProperty()方法,这个方法可以设置getter和setter函数,在setter函数中,就可以监听到数据的变化,从而更新绑定的元素的值. 实现对象属性变化绑定到UI 大概的思路是: 1. 确定绑定的数据,使用Object.defineProperty()对其数据变化进行监听(对应defineGetAndSet) 2. 一旦数据发生改动,会触发setter函数.
轻松理解vue的双向数据绑定问题

Vue介绍 Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的.因为它提供了简洁易于理解的api,使得我们很容易上手. Vue与MVVM 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步. 双向绑定主流双向数据绑定实现原理脏值检测 : 这是AngularJS实现双向数据绑定的方式.
Vue入门之animate过渡动画效果

简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
Vue头像处理方案小结

个人思路获取后台返回头像url,判断图片宽度,高度. 如果宽度>高度, 使其高度填充盒子两边留白. 如果宽度<高度,使得宽度填充盒子上下留白. 效果图: 缺陷:懒加载图片会出现闪烁代码实现 <template> // 外面要给一个div并且限制宽度和高度,text-align center,overflow hidden <div class="head"> // userInfoList.avatar 是后台返回给我的头像URL <
vue中的数据绑定原理的实现

本文主要介绍了vue中的数据绑定原理的实现,分享给大家,也给自己留个笔记,具体如下: vue中的响应式数据绑定是通过数据劫持和观察者模式来实现的.当前学习源码为vue2.0 源码关键目录 src |---core | |---instance | |---init.js | |---state.js | |---observer | |---dep.js | |---watcher.js 当我们实例化一个vue应用的时候,会伴随着各种的初始化工作,相关的初始化工作代码在init.js文件中 //

Vue入门之数据绑定(小结)

相关推荐

随机推荐