Vue.js初步

作者: 皮皮力_996a | 来源:发表于2019-03-06 21:34 被阅读0次

Vue官网

https://cn.vuejs.org/

Mvvm模式

Model-View-View-Model模式，由MVC衍生而来
View和ViewModel之间通过双向绑定(data-binding)建立联系。

现代的前端开发模式

前端的三驾马车：Angular、React、Vue
web制作实例
1.vue.js起步
1.1首先引入 Vue：

image.png
image.png

1.2设置vue的根容器

image.png
1.3实例化一个VUE对象

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 通过cdn引入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <h2>{{message}}</h2>
   <h2>{{name}}，{{age}}</h2>
            

        </div>
        <script type="text/javascript">
            //实例化一个vue对象
            var app = new Vue({
                el: '#app',
                data:{
                    message:'Vue.js',
                    name:'尤雨溪',
                    age:'30岁'
                }
            })
        </script>
        
    </body>
</html>