声明
在您阅读这篇文章之前,笔者假设您熟悉html、css和javascript知识。
认识Vue
MVVM
MVVM是目前流行的前端开发模式。MVVM是Model-View-ViewModel的缩写,第一个字母M表示表示模型,第二个字母V表示视图,最后两个字母VM表示视图模型,这三部分的具体含义如下:
- 模型负责封装数据
- 视图表示UI(用户交互界面)
- 视图模型负责模型和视图之间的转换和适配
MVVM的核心思想模型驱动视图,也就是说数据改变界面即改变,开发者需要界面发生变化只需改变数据即可达到目的,而无需直接进行dom操作。目前流行的基于MVVM模式javascript框架主要有angularjs、react和Vue。
什么是Vue
Vue是一个以MVVM模式为思想基础的数据驱动式Javascript框架,Vue实际上主要提供了MVVM模式中VM部分,即实现通过数据渲染界面和界面对数据的反馈。下面通过例子认识Vue。
初步使用Vue
获得Vue
从https://cdn.jsdelivr.net/npm/vue下载vue,下载文件名改为vue.js
建立项目
项目文件结构如下图:
页面demo_01.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue实例一</title>
</head>
<body>
<!-- 在body标签结束前,引入vue.js -->
<script type="text/javascript" src="js/vue.js" ></script>
</body>
</html>
Vue对象创建以及页面标签与Vue对象的关联
Vue对象负责渲染与之关联的页面标签,因此基于vue的开发,需要在页面写一个标签,一般为div(也可以是除body外的任何其它标签),并给该标签设置一个id,然后编写javascript代码创建Vue对象并通过id选择器与标签关联。
代码示例:
<body>
<!-- 该div与Vue对象关联 -->
<div id="app"></div>
<!-- 在body标签结束前,引入vue.js -->
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
/*
创建Vue对象与id为app的标签关联,并负责渲染生成该标签视图展示;
Vue对象的构造参数是一个对象,该参数可描述Vue对象的数据和方法等。
*/
let vm = new Vue({
el:'#app'
});
</script>
</body>
声明式渲染
-
Vue对象的构造参数中,使用data属性定义数据,在页面上使用模板语法将数据渲染为一个dom的文本节点。
<div id="app"> <!--这里将显示Vue对象中定义的info属性的值。--> {{info}} </div>
let vm = new Vue({ el:'#app', data:{ info:'大家好!', //为Vue对象定义属性info } });
-
Vue对象的构造参数中,在页面上使用v-bind指令将数据渲染为一个dom元素的属性值。
<div id="app"> <div v-bind:title="info" >鼠标悬浮停留,会看到一个提示信息</div> <!-- v-bind指令可以简写如下 --> <div :title="info" >鼠标悬浮停留,会看到一个提示信息</div> </div>
let vm = new Vue({ el:'#app', data:{ info:'大家好!', //为Vue对象定义属性info } });
条件和循环
-
使用 v-if 和 v-else 指令可以实现依据条件渲染
<div id="app"> <button v-if="visibled" >按钮一</button> <button v-else >按钮二</button> </div>
let vm = new Vue({ el:'#app', data:{ visibled:true } });
-
使用v-for指令可以实现循环渲染
<div id="app" style="display:flex;flex-direction:row;flex-wrap:wrap;"> <div v-for="stu in stuList" style="width:240px;height:100px;border:1px solid #DDDDDD;border-radius:5px; box-shadow: 1px 1px 5px 0px #DDDDDD; margin:10px;padding:10px;color:#555555;display:flex;flex-direction:row;flex-wrap:wrap;align-content: flex-start;"> <div style="box-sizing:border-box;height:50px;line-height:50px;width:200px;">学号:{{stu.stuId}}</div> <div style="box-sizing:border-box;height:50px;line-height:50px;width:120px;">姓名:{{stu.stuName}}</div> <div style="box-sizing:border-box;height:50px;line-height:50px;width:120px;">性别:{{stu.stuSex}}</div> </div> </div>
let vm = new Vue({ el:'#app', data:{ stuList:[ {stuId:'S00001',stuName:'小王',stuSex:'男'}, {stuId:'S00002',stuName:'小李',stuSex:'女'}, {stuId:'S00003',stuName:'小刘',stuSex:'女'}, {stuId:'S00004',stuName:'小张',stuSex:'男'}, {stuId:'S00005',stuName:'小赵',stuSex:'女'} ] } });