2-4Vue中的属性绑定和双向数据绑定

作者：福州-台江_616 | 来源：互联网 | 2023-08-08 20:21

<!DOCTYPEhtml><html><head><metacharsetUTF-8>

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定title>
    <script src="./vue.js">script>
head>
<body>
    <div id="root">div>

    <script type="text/Javascript">
        new Vue({
            el: "#root"



        })


    script>
    body>
    html>

只是引入了Vuejs的库，然后创建了一个div标签作为一个挂载点，然后让Vue实例挂载到我们的这个挂载点之下。接下来写模板的内容。title是一个HTML的一个属性。希望这个提示语title可变，不是写死的。我们可以在实例的data里面去定义一个title，让它等于this is hello world。这个时候title里显示的内容是数据里的title就可以了。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定title>
    <script src="./vue.js">script>
head>
<body>
    <div id="root">
        <div title="this is hello world">hello worlddiv>
    div>

    <script type="text/Javascript">
        new Vue({
            el: "#root"



        })


    script>
    body>
    html>

这样写可以吗？

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定title>
    <script src="./vue.js">script>
head>
<body>
    <div id="root">
        <div title="title">hello worlddiv>
    div>

    <script type="text/Javascript">
        new Vue({
            el: "#root",
            data:{
               title:"this is hello world"

            }



        })


    script>
    body>
    html>