前端Vue学习笔记

Day01:

Vue框架是最新流行的前端框，他主要是使用vue.js实现了View和Model的数据的双向绑定

以下代码是基本的使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- View视图 -->
        <div id="app">
            {{title}}
            <h1>{{msg}}</h1>
        </div>
        <div id="app-2">
            <span v-bind:title="message">
                鼠标悬停几秒查看此处动态绑定的提示信息！
            </span>
        </div>
        
        <script type="text/javascript">
            console.log(Vue);
            let app = new Vue({
                el:"#app",
                // Model模型
                data:{
                    title:"Hello Vue!",
                    msg:"前端VUE框架"
                },
            })
            var app2 = new Vue({
                el:'#app-2',
                data:{
                    message:'页面加载于'+new Date().toLocaleString()
                }
            })
            console.log(app)
        </script>
    </body>
</html>
<!-- 数据的双向绑定，MVVM模式，VUE.js将VIEW视图和模型MODEL双向的绑定在一起 -->

在浏览器控制板里可以直接更改app.title的值，数据视图会实时的进行修改，但是这个只是前端的一个页面内容短暂性的更改，具体数据内容更改还是需要后台的提供数据。

 

posted @ 2020-09-09 17:18  peifengyang  阅读(128)  评论(0)  编辑  收藏  举报