概述

Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。

VUE是项比较高级的技术,要求有一定的基础技能。

假设学员已经掌握以下技能:

  • HTML
  • CSS
  • JavaScript
  • jQuery

什么是MVVM?

MVVM分别代表:

M:模型(Model),通常是指数组,对象等。

V:视图(View),通常是指web页面上的组件,如下拉列表、弹窗等。

VM:视图模型(ViewModel),双向绑定,将模式和视图绑定在一起。

VUE便是一个VM(ViewModel)。

DOM Listeners和Data Bindings这两个工具是实现双向绑定的关键。

从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据。

从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。


编写第一个VUE程序

使用Notepad++新建一个html文件,输入以下内容:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第一个VUE程序</title>
    </head>
    <body>
        <div id="app">
		  {{ message }}
		</div>
    </body>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script>
		var app = new Vue({
		  el: '#app',
		  data: {
			message: 'Hello Vue!'
		  }
		})
    </script>
</html>

保存。在浏览器在运行,效果如下:

代码说明:

首先,运行VUE不需要jquery库。

<script src="https://vuejs.org/js/vue.min.js"></script>  引入VUE库。VUE就是一个JS库嘛,当然要引入啰。

代码8~10行

<div id="app">
  {{ message }}
</div>

创建了一个视图view,id为app。有一个VUE表达式,用两个花括号{{ }}括起来,可以是表达式(运算符和函数、变量的组合),也可以是变量。

代码14行~19行

var app = new Vue({
  el: '#app',
  data: {
	message: 'Hello Vue!'
  }
})

创建了一个VUE实例。也就是VM。VUE实例关联的元素是#app,它的风格有没有像jQeury?

data属性对象,表示数据模型model,还有一个变量,叫message,它的值是Hello Vue!

model中的message与视图中的message关联,model中的值变化后,视图中的内容也会变化。

整个过程数据流向,是从model侧到view侧


示例2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第一个VUE程序</title>
    </head>
    <body>
		<div id="app">
		  <input v-model="message" placeholder="请输入内容">
		  <p>消息是: {{ message }}</p>
		</div>
    </body>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script>
		new Vue({
		  el: '#app',
		  data: {
			message: '利永贞'
		  }
		})
    </script>
</html>

运行效果

代码说明:

第9行,<input v-model="message" placeholder="请输入内容">   有一个很重要的属性v-model,声明一个VUE模型,v-model可以用于前端录入数据。

第10,{{ message }} VUE视图表达式。

代码15~20行

new Vue({
  el: '#app',
  data: {
	message: '利永贞'
  }
})

创建了一个VUE实例。也就是VM。VUE实例关联的元素是#app。

data属性对象,表示数据模型model,还有一个变量,叫message,它的值来自第9行的input组件。

model中的message与视图中的message关联,model中的值变化后,视图中的内容(第10行)也会变化。

整个过程数据流向,是从view侧到model侧。