Vue_初接触

年关已过，虽然现在疫情依然肆虐，但是相信我们离胜利已经不愿啦...

 

最近正在学习前台框架vue，边学边笔记，O(∩_∩)O

Vue 是一套用于构建用户界面的渐进式框架

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

 

Vue遵循MVVM模式

M：model，即模型，可以理解为固定格式var vm = new Vue(){el:'#xxx',data: {}}中的data

V：View，即视图，即<div id='xxx'></div>

VM：Vue实例对象，一般命名为vm

 

编码示例：

<div id="app">

<input type="text" v-model="username">

<p>Hello, {{username}}</p>

</div>

//通过script标签引入vue.js

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

//创建vue实例对象

new Vue({

el: '#app',//el：element元素

data: {

username: 'atguigu'

}})</script>

代码解读：

new Vue({

    el: '#app',    //div对应的id，对应vue实例管理的区域

    data: {

        //data可以看做MVVM模式中的第一个M

    }

})

<div id="app"></div>

这组div可以看做MVVM模式中的第二个V

采用双大括号表达式{{}}，如<p>Hello, {{username}}</p>中的username，用于向页面输出数据，可以调用对象的方法

指令（以v-开头的自定义标签属性，如v-model="username"）