绑定DOM文本到数据 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8">    
           //这是固定的
        </script>
    </head>
    <body>
        <div id="app">{{content}}</div>    
        //定义div的id，注意div里的2对大括号是必须的，
            <script>
        // 定义Vue对象,对象名必须=div的id
                var app = new Vue({
        // el表示元素(element),是一个vue属性
        // el:'#id(对象)'  表示查找app的元素(组件)
                    el: '#app',
                    data: {
                        content: 'Hello World',
        //data属性里写  组件名:？  即表示组件的值
                    }})
            </script>
    </body>
</html>、

<div>写body里





v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。
V-bind:?=    可以简写为 :？=    如<a v-bind:href=   <a href:=""
这个指令的简单含义是说：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。是把他们在dom里的结构位置绑定在一起，跟二者的值没关系，dom位置一样输出的时间就差不多
message就是app2.message（对象的一个属性），但是写的时候把message换成id.message是不行的

 



 {{？}}的作用是将属性与对象里的data的对应属性值进行绑定，没有这句{{message}}，message属性无法联系其在对象里的值，也就只输出title


总之没有这句，data里的值不会输出


详见Vue-Vue语法


 


 


 


 




 






            

            
posted @ 
2020-06-25 20:48 
ddyszw 
阅读(215) 
评论(0) 
 
收藏 
举报