Vue的第一天学习

1.什么是Vue？

Vue是构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

Vue与传统的渲染方式不一样，Vue是声明式渲染，组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案，Vue做了大量的工作，数据与DOM建立了联系，因此Vue上的所有东西是响应式的！有了Vue我们可以不用再直接与HTML交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。HTML是我们的入口，我们的创建的实例对象Vue的内部改变着，渲染到页面的数据是后端传来的数据！

2.创建第一个Vue对象的过程

一、在html写一个我们要挂载的dom元素div#id并导入我们Vue对象需要的vue.js。二、创建我们的js。三、在js里面创建第一个Vue对象，代码是“

   

<div id="app">{{msg}}</div>

    <script src="vue.js"></script>

    <script>

        const fisrtVueObj=new Vue({

            //挂载的dom元素

            el:"#app",

            data:function(){

                return{

                    //返回一个对象

                    msg:100

                }

            }

        })

    </script>

                        ”

3.Vue的实例化对象的指令

一、v-bind arttribute指令

v-bind指令将实例化对象，以特殊的响应行为将数据渲染到页面上，鼠标悬停几秒后，span内容上方会出现实例化对象里面的返回的数据

代码如下，

<div id="app">

        <span v-bind:title="msg">几秒后悬停会出现Vue对象里面的返回的对象或者值</span>

    </div>

    <script src="vue.js"></script>

    <script>

        const vueObj=new Vue({

            el:"#app",

            data(){

                return {

                    msg:"打开页面的时间为:"+new Date().toLocaleDateString()

                }

            }

        })