Vue-01-优快云博客

Vue框架

Vue官网： Vue.js 框架

数据模型和view的通信就是依靠viewmodel的关键。目前主流版本仍然是vue2版本。

1.新建一个HTML文件，引入Vue.js文件。Vue.js文件是官方引入的一个文件，我们如果要使用Vue就必须引入这个文件。

<!-- 1.引入Vue.js -->
    <script src="js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，定义数据模型。我们需要new一个Vue然后传递一个对象，el代表就是Vue控制的区域，data代表的就是数据模型，有一个key就是message。

// 2.定义Vue对象 
    new Vue({
        el:"#app",//Vue接管的区域
        data:{
            message:"Hello Vue!!!"
        }
    })

3.编写视图。定义input输入框，绑定数据模型，定义的数据模型就会在输入框中展示出来。使用插值表达式 {{message}}展示数据。

<!-- 3.定义视图 -->
     <div id="app">
        <input type="text" v-model="message">
        {{message}}
     </div>

说明：

1. 在使用Vue之前需要引入Vue.js，这是必须的操作，引入位置在html文件的head部分；

2. 引入文件以后就需要在body之后使用script标签书写js代码，new Vue对象，然后传入对象，主要包括el代表的就是Vue接管的区域，这个区域使用id来对接，还有就是数据模型data-message，这个就是要展示的数据；

3.在body部分创建一个视图，就是要展示的界面，在标签中设置id为el的值，这样Vue就接管了该标签区域，然后设置完展示形式后加上插值表示{{message}}就可以了；

4.v-model是一个数据绑定的操作，而且是双向绑定，视图中数据的变化就会影响数据模型，二者互相影响。

后面主要学习Vue的常用指令以及Vue的生命周期。