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

最新推荐文章于 2024-09-20 00:40:27 发布

躬匠

最新推荐文章于 2024-09-20 00:40:27 发布

阅读量1.8k

点赞数 2

分类专栏： Vue.js Vue学习系列

本文链接：https://blog.csdn.net/ydm19891101/article/details/90574108

版权

Vue.js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Vue学习系列

15 篇文章 1 订阅

订阅专栏

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

最近在自学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>

页面效果：