Vue2_01_data_插值

插值语法 {{name}}

data: vue实例的数据对象

data中数据变化时将重新渲染容器

template 中只能有一个根节点

    
    
    
    


    

        
{{msg}}
    

不写template，在html中使用 {{}}

    
    
    
    


    

        
{{msg}}}
    

el : "#app" 使vue对象接管div容器，对其进行处理将{{msg}} 替换为data 中的数据

使用template配置项时会用template替换挂载的元素，不写template不会替换

html保持原结构

Vue实例对象与html容器是一 一对应的关系

一个Vue对象只能挂载到一个元素，一个元素只能被一个Vue实例对象管理

 .div01 对应的元素有两个，myVue对象只接管了第一个 div容器

    
    
    
    


    

        

    
    
{{msg}}

 myVue1 ,myVue2 都挂载到.div01元素，前一个Vue对象myVue1 接管元素，后一个 myVue2不生效

插值语法 {{name}}

{{}}之中可以写

1.data中的属性和function  

  - function 可以省略：function

    
    
    
    


    

        
{{fun()}}
    
    

2.表达式

    
    
    
    


    

        
{{1+1}}
    
    

    
    
    
    


    

        
{{1 > 2}}
    
    

3.常量

    
    
    
    


    

        
{{12}}
    
    

 4.

 vue/proxy.js at v2.6.10 · vuejs/vue · GitHub

全局变量白名单

if (process.env.NODE_ENV !== 'production') {
  const allowedGlobals = makeMap(
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' // for Webpack/Browserify
  )

 例：

    
    
    
    


    

        
{{Date()}}