day01 初识Vue.js

最新推荐文章于 2025-03-13 20:42:43 发布

mlxg2019

最新推荐文章于 2025-03-13 20:42:43 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： VUE基础实战

本文链接：https://blog.youkuaiyun.com/mlxg2019/article/details/94591646

学习专栏收录该内容

8 篇文章

订阅专栏

1.1什么是Vue.js?
(1).简单小巧的核心，渐进式技术栈，
所谓的简单小巧是指Vue.js压缩后仅仅只有17kb,而渐进式就是你可以一步步地、有阶段性地使用Vue.js.
(2).提供了现代web开发中常见的高级功能

解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM
1.1.1 MVVM模式
简单的来理解，就是通过双向绑定来让视图层和视图模型保持一致，自动更新状态。
1.2如何使用Vue.js
这是两种v-for遍历方法的区别

<body>
    <div id="app">
         <ul>
             <li v-for="(elem,i) of books" :key="i">{{elem.name}}</li>
         </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:[{name:'《Vue.js实战1》'},
                       {name:'《Vue.js实战2》'},
                       {name:'《Vue.js实战3》'}
                                               ]
            }
        })
    </script>
</body>

<body>
    <div id="app">
         <ul>
             <li v-for="elem in books">{{elem.name}}</li>
         </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:[{name:'《Vue.js实战1》'},
                       {name:'《Vue.js实战2》'},
                       {name:'《Vue.js实战3》'}
                                               ]
            }
        })
    </script>
</body>