属性绑定和双向数据绑定

title="内容"  HTML的属性  当鼠标放在页面时会出现的提示语

希望提示语可变 不是固定的

那就将title写在vue实例中

属性绑定：v-bind:title="title"   数据项的title和上面属性title进行数据绑定

""引号内的内容不再是字符串，而是一个表达式

在编码时冒号(:)一般表示v-bind： 所以 编码简写成:title

双向数据绑定

<input  :value="content"/> 改变的是input框内的值 content值没有发生改变

<input  v-model="content"/>  input框值变化的时候 数据也变化 content值也变化

实现V-bind数据项的绑定

v-model 实现数据双向绑定，绑定数据，数据变了则其它标签的数据也会跟着变。

v-bind 标签：表示属性绑定。

使用v-xxx标签等号后面接的内容不再是字符串，而是JS表达式。

v-bind="title" title表示的是data里面的title内容。

v-bind="'Add xxx ' + title" 表示的结果是：Add xxx 加上data里面title的内容。

v-bind:title 可以缩写成 :title

1、属性绑定：指令v-bind:  ,如v-bind:title="msg"，就可以将title这个属性和vue实例中data下的msg这个属性进行绑定。v-bind: 可简写为： ，即v-bind：title 等同于 :title

2、双向数据绑定：指令v-model ，使用该指令可以使标签内容和data中属性进行双向绑定，即一方的数据变化，另一方也会跟着变化。

<div id="root">

       <div :title="msg">Hello World</div>

       <input v-model="content"/>      

       <div>{{msg}}</div>

</div>

<script>

 new Vue({

     el: "#root",

     data: {

      msg: "This is a world!",

      content: "This is content!"

}

})

</script>

插值表达式：v-text = “”

带样式： v-html= “”

点击事件： v-on:click =“事件名”  或者  @click =“事件名”

属性绑定： v-bind：属性名= “属性值”  或者 ：属性名= “属性值”     

双向属性绑定：  v-model = “变量名”

v-bind指令的简写是：

双向数据绑定的指令是v-model

v-bind

v-mode

v-model：双向数据绑定，随着数据的修改与之对应的也会修改。

<div id="root">
    <div :title="title">hello world</div>
    <input v-model="content" />
    <div>{{content}}</div>
</div>
<script>
    new vue({
        el:"#root",
        data:{
            title:"this is hello world",
            content:"this is content"
        }
    })
</script>

<div id="root">

            <div :title="title">hello world<div/>

            <input v-model="content"/>

            <div>{{content}}</div>

        </div>

        <script>

            new Vue({

                el: "#root",

                data:{

                    title:"this is hello world",

                    content:"this is content"

                }

            })

        </script>

属性绑定：v-bind

双向数据绑定：v-model

单向绑定v-bind = :

双向绑定v-model

v-bind

双向绑定 v-model

1.属性绑定：v-bind:建立绑定关系，之后在实例data里面赋值。此时标签里面的title就是字符串模式，所以可以拼接。

《注意：v-bind:可以缩写为:》

2.双向数据绑定v-model：如图对应的conts显示值已经绑定

<div id="root">
    <div v-bind:title="title">hello world</div>    //属性绑定 (js表达式)
    <div :title="title">hello world</div>    //v-bind简写为':'
    <input v-model="content"/>    //双向绑定 (数据和页面一同改变)
    <div>{{content}}</div>
</div>

<script>
    new Vue()({
        el:"#root", 
        data:{
            title:"this is hello world",
            content:"this is content"
        }
    })
</script>

v-on = @ (eg: @click

属性绑定：v-bind = : (eg: :title -- 鼠标移过去有解释

双向数据绑定：v-model

@代替v-on：事件绑定，vue3.x使用v-on=""取代v-on:

：代替v-bind：属性绑定，vue3.x使用v-bind=""取代v-bind：

v-model：数据双向绑定，vue3.x使用v-model=""取代v-model:

属性绑定

    <div title=“this is hello world”>hello world</div> title 是html属性，当鼠标放在hello world上时，会显示this is hello world 提示语。

    当希望提示语可变时，就需要属性和数据绑定,写法如下

    <div v-bind:title="'dell lee'+title">hello world </div>

    data:{

        title:"this is hello world"

    }

    v-bind:可以缩写为：

属性绑定v-bind:属性=js表达式 例如："表达式"+'jhsadhk'"

v-bind: 简写为 :

:后面跟html标签的属性，：属于vue的实例

双向绑定v-model:  html与vue实例 

双向数据绑定的意义：

• 页面（DOM）与数据之间互相同步。

• 与之相对应的，非双向绑定的模式是数据到页面（DOM）的单向传递。

对应VUE语法：

v-model=：双向数据绑定，随着数据的修改与之对应的DOM也会修改

VUE语法的缩写，属性绑定相关的部分：

• v-bind:可以缩写成:，如“v-bind:title”可以缩写成“:title”

• v-on:可以缩写成@，如“v-on:click”可以缩写成“@click”

模板指令基本概念：

如果直接用title="title"，就是把字符串title赋值给变量title。

使用模板指令之后，等号后面的双引号里就是JS表达式，而非文本数据。

title（提示语）的使用：

属性绑定：

将标签里的title属性和实例里的title数据项的值绑定。

使用模板指令，类似v-bind:title="..."，...中的内容就变成了js语句

v-bind:可以简写为：

<div>
    <div :title="title">hello world</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            title:"this is hello world"
        }
    })
</script>

单向绑定：数据决定页面的显示，页面无法改变数据的内容。

双向绑定：v-model

本文框里的内容改变的时候，div里的content内容改变。

div里的content有内容的时候，本文框里的内容也会改变。

<div>
    <div :title="title">hello world</div>
    <input v-model="content"/>
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            title:"this is hello world"
            content:"this is content"
        }
    })
</script>

v-bind属性绑定数据，简写为“:”，v-model用于双向数据绑定，可以同时改变数据