一、vue.js的开端认识

 <a href=”https://unpkg.com/vue “>vue.js下载</a> 

1、抛开手动操作DOM的思索,Vue.js是数据驱动的,你无需手动操作DOM。 2、将DOM和数量绑定起来,DOM将和数目保持同步, 每当变更了数额,DOM也会相应地立异。 3、MVVM情势(Model-View-ViewModel) ViewModel是什么样和View以及Model进行互动的。 model放在data(可能多项) view放在el(view里面的{{  }}可能多项,跟model对应) 4、ViewModel是Vue.js的主干,它是一个Vue实例。      Vue实例是功力于某一个HTML元素上的,     那个因素得以是HTML的body元素,    也足以是指定了id的某部元素。 5、所有的要素都是响应式的 

图片 1

 

二、vue.js的上马操作

1、 新建web项目

图片 2

2、 新建一个jsp文件

图片 3

3、 把vue.js放到Web的js目录下

图片 4

4、 在jsp中引入vue.js

图片 5

<script src=”${pageContext.request.contextPath}/js/vue.js”></script>

5、 创立一个view对象(DOM组件)

专注:此view对象,可以涵盖n个数据,数据应用{{xxxx}}来叙述。

图片 6

6、 定义一个javascript的model

图片 7

var myModel1 = {userName:’dqc’,age:22};

7、 创制一个Vue对象(ViewModel对象)

参数为一个json对象(包涵2个参数,el,data)

图片 8

8、运行效果

图片 9

三、代码演示

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初步认识vue.js操作①</title>
</head>
<body>
    <div id="myDiv1">
        <p>这里是mydiv1</p>
        {{userName}}
        {{age}}
    </div>
    <div id="myDiv2">
        <p>这里是mydiv2</p>
        {{age}}
    </div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
    var myModel1 = {userName:'dqc',age:22};
    var myViewModel1 = new Vue({
        el:'#myDiv1',
        data:myModel1
    });

</script>
</html>

 

相关文章

网站地图xml地图