Vue学习系列 -- 基础知识了解

Posted 2022-08-02 躬匠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- 基础知识了解相关的知识，希望对你有一定的参考价值。

不想做全栈的工程师不是好的工程师。

最近在自学Vue，同时准备在博客上将自己的学习心得、期间遇到的问题给同步记录下来，做成一个学习系列。这个系列会杜绝说教、偏理论，更多的是通过理论加简单的例子加深理解。

OK，废话不多说，开始我们今天的学习。

首先，在学习Vue之前，你需要对MVVM设计模式有所了解。如果你还不够了解MVVM，可以先阅读这篇文章：MVVM

关于Vue，我们还有以下几点需要了解。

Vue.js是一种渐进式、轻量级前端框架，所谓轻量级是指的Vue.js压缩之后也只有十几kb，渐进式是指可以选择使用其功能；
Vue与React、Angular框架一样（Vue与其他框架比较），都是基于MVVM设计模式实现的；MVVM分为view model viewmodel三大项，view model之间是没有相互的联系，彻底解耦了视图与业务逻辑；view与model两者是通过viewmodel联系起来的，view的变化会引起viwemodel的变化，viewmodel的变化会引起view的变化；view与viewmodel是通过双项绑定建立联系的；对于MVVM模式开发而言，开发者只需要关心数据即可，DOM的事情vue会自动帮你做；

OK，上面提到了很关键的几个点：渐进式、数据双向数据绑定。

Talk is cheap, show me the code！我们通过代码具体演示以下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Learning Vue.js</title>
</head>

<body>
<div id="app1">
 <span style="color:red"> Hello,name</span></br>
 <input name="username" v-model="name" placeholder="please input you name"></input>
</div>
</body>

<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
 new Vue(
   el : "#app1", //指定绑定的DOM元素
   data :   //设置data属性值
       name : "xiaoming",
       sex : 'male',
       phone : "152xxxxx"
   ,
   methods :  //设置方法属性
       click : function() 
           alert('this is click function');
       
   

 )

</script>
</html>

页面效果：