02vue的实现思路

最新推荐文章于 2024-06-05 14:45:36 发布

田江

最新推荐文章于 2024-06-05 14:45:36 发布

阅读量569

点赞数 1

分类专栏： vue 文章标签： vue vuejs

本文链接：https://blog.csdn.net/jiang7701037/article/details/79248583

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

说明：

这是vue的第二篇文章。

这个代码是让大家体会vue的实现思路：即不需要用dom的方式动态改变某个元素的innerHTML。只需要把HTML元素和vue对象进行对应，vue对象中的data可以在HTML元素中直接使用（用双花括号的方式）。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app1">{{message}}，我今年{{age}}岁了。</div>
    <div id="app2">
        张信哲：
        <ul>
            <li>{{data1}}</li>
            <li>{{data2}}</li>
            <li>{{data3}}</li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">

    //创建vue实例（对象）,Vue构造函数的参数是json对象
    var v1 = new Vue({
        //el属性：是element的缩写，表示该vue对象（v1）对应的html元素是哪个
        el:"#app1",//el:是element的缩写
        //data属性：数据的意思，表示在该vue对象（v1）对应的HTML元素中可以使用的数据
        data:{
            message:"hello world",
            age:"25"
        }
    });

    //创建vue实例（对象）,Vue构造函数的参数是json对象
    var v2 = new Vue({
        el:"#app2",
        data:{
            data1:"宽容",
            data2:"别怕我伤心",
            data3:"爱如潮水"
        }
    });

//你是否感觉到了：
//第一个vue对象 v1 对应了html中id为app1的元素，在id为app1的div元素里只能使用v1中data里的属性
//第二个vue对象 v2 对应了html中id为app2的元素，在id为app2的div元素里只能使用v2中data里的属性
</script>

//你是否感觉到了：
1. 第一个vue对象 v1 对应了html中id为app1的元素，在id为app1的div元素里只能使用v1中data里的属性
2. 第二个vue对象 v2 对应了html中id为app2的元素，在id为app2的div元素里只能使用v2中data里的属性

而如何把vue对象里的data属性中的数据赋给HTML元素，这是由vue框架完成的。