vue学习04——data属性

vue--data属性

  • data属性是Vue实例的数据对象，可以绑定的是对象或者是函数。

  • 当数据对象一旦被data绑定就会发生变化，数据对象中的属性会拥有get和set属性，用来监听数据变化，实时响应。

  • Vue实例会代理data绑定对象上的所有属性，即所有属性直接添加到Vue实例化对象中。

  • Vue实例可以通过$data属性访问原始数据对象。

 

Vue实例是通过new Vue()创建的，{{ }}是Vue进行插值的语法，app是Vue的实例化对象，这里需要注意的是el绑定的是视图容器，即DOM对象，data属性绑定的是模型数据。

 

复制代码
   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        {{msg}}
    </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        obj={
            msg:"hello Vue";
        };
        var app=new Vue({
            el:'#app',
            data:obj
        })
    </script>
    </html>
复制代码

在控制台查看app，可以发现app拥有很多属性或方法，其中以 $ 与 _ 开头的都是app内置的属性或方法，从下图中标红的位置可以发现：

  • Vue实例化对象中的$el属性绑定的是DOM对象；

  • data属性绑定的数据对象obj中的属性msg直接添加到了Vue实例化对象中，并且拥有了get和set属性；

  • 通过$data属性可以访问原始的模型对象，原始的数据对象发生了变化，变得和Vue实例中的数据是相同的，即obj.msg===app.$data.msg。

vue--e,template,render属性  

el，template，render属性优先性
当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。
换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

写html文件

<div class="vapp-1">{{ info }}</div>
<div class="vapp-2">{{ info }}</div>
<div class="vapp-3">{{ info }}</div>

写js文件

复制代码
复制代码
new Vue({
  el: '.vapp-1',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>',
  render: function(h){
    return h('div', {}, '这是render属性方式渲染。')
  }
})

new Vue({
  el: '.vapp-2',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>'
})

new Vue({
  el: '.vapp-3',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  }
}
复制代码

 

复制代码

查看渲染结果
这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。

独立构建和运行时构建

Vue.js 1.0，编译器需要依赖浏览器的DOM，所以无法将编译器和运行时分开。因此在Vue.js 1.0分发包中，编译器和运行时是打包在一起，都在浏览器端执行。
Vue.js 2.0，为了支持服务端渲染(server-side rendering)，编译器不能依赖浏览器的DOM，所以必须将编译器和运行时分开。于是形成了独立构建（编译器 + 运行时）和运行时构建（仅运行时）。显而易见，运行时构建体积要小于独立构建。

1、模板编译器
模板编译器的职责是将模板字符串编译为纯JavaScript的渲染函数，即将<template>编译成render函数。
2、Vue.js的执行过程
包含编译过程和运行过程，在编译过程，编译器将字符串模板(template)编译为渲染函数(render)
在运行过程，调用渲染函数。
3、运行时构建
运行时构建指不能进行模板编译的Vue库。运行时构建不包含模板编译器，即不支持template选项，如果使用vue-loader和vueify预编译模板，只需要打包运行时，而不需要打包编译器。
运行时构建，可以用render选项，但它只在单文件组件中起作用，因为单文件组件的模板是在构建时预编译到render函数中，运行时构建只有独立构建大小的30%，只有16Kb min+gzip大小。

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hello)
  }
})

独立构建
独立构建指能够将template模板或者从el挂载元素提取的模板编译成渲染函数的Vue库，独立构建包含模板编译器，可以用template选项实时编译模板。

// 需要编译器
new Vue({
  template: '<div>{{ hello }}</div>'
})

使用vue-cli生成项目时，会提醒使用哪种构建方式，npm包默认导出的是运行时构建，即runtime版本vue.runtime.common.js，如果想使用独立构建，需要在webpack.config.js中配置alias。

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

 

posted @   吴萌  阅读(2231)  评论(0)  编辑  收藏  举报
相关博文：
· vue学习01——什么是vue？
· vue学习02——vue属性绑定
· Vue-无构建工具的创建、挂载、渲染
· Vue3 笔记 指令 选项api class类与style样式
· Vue 笔记
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示