一、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、所有的元素都是响应式的

二、vue.js的初步操作

1、 新建web项目

2、 新建一个jsp文件

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

4、 在jsp中引入vue.js

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

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

注意：此view对象，可以包含n个数据,数据使用{{xxxx}}来描述。

6、 定义一个javascript的model

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

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

参数为一个json对象（包含2个参数,el,data）

8、运行效果

三、代码演示

<%@ 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>

使用eclipse初步学习vue.js的基本操作 ①的更多相关文章

  1. 使用eclipse初步学习vue.js基础==》v-for的使用 ②

    一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...

  2. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  3. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  4. 学习vue.js 第一天

    最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门 啥的 ,要不以后人家说,啥都不知道,多low 看到官网 是这样介绍Vue.js Vue.js(读音 /vjuː/, 类似于 view) 是 ...

  5. 学习vue.js的正确姿势(转载)

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  6. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  7. 学习Vue.js需要了解的部分内容

    重要: 1.如果要通过js/模板引用 图片到项目,图片路径需要使用require. 2.$event: $event 等于$emit 抛出的值,还可以使用$event.target.value. $e ...

  8. Vue 2.0 入门系列（14）学习 Vue.js 需要掌握的 es6 (1)

    针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript ...

  9. 学习Vue.js

    Vue.js官网 Vue.js官方教程 Vue.js教程 哔哩哔哩Vue.js教程 Vue.js百度百科

随机推荐

  1. ProgressDialog修改TextView的TextSize

    ProgressDialog修改TextView的TextSize 问题描述 今天UI过来找我说是加载条的字号太小了,不好看,希望可以改一下,然后我就研究一下如何修改ProgressDialog里面T ...

  2. Go语言map

    map 是一种特殊的数据结构:一种元素对(pair)的无序集合,pair 的一个元素是 key,对应的另一个元素是 value,所以这个结构也称为关联数组或字典.这是一种快速寻找值的理想结构:给定 k ...

  3. 怎么随时获取Spring的上下文ApplicaitonContext，和Spring管理的Bean

    BeanFactory接口 Interface BeanFactory getBean <T> T getBean(String name, Class<T> required ...

  4. 如何获取java运行时动态生成的class文件？

    查看运行时生成的文件,以更清楚运行情况. 查看动态生成的类,一般有两个方法: 1. 使用据说是jdk自带包sa-jdi.jar里的工具. 其中,不想自己搞,当然就利用下,sa-jdi.jar 里自带的 ...

  5. Linux 总是提示You have new mail in /var/spool/mail/root

    解决办法: echo “unset MAILCHECK” >> /etc/profile source /etc/profile 这样就可以了!!!!!!!!!!

  6. ubuntu 16.04 安装matlab的替代工具Octave及使用指南

    为什么要安装Octave? 它是什么? GNU Octave是自由软件基金会(Free Software Foundation)支持的遵循GPL协议(GNU General Public Licens ...

  7. spring boot -表单校验步骤 +@NotEmpty,@NotNull和@NotBlank的区别

    1.实体类属性上添加注解规则 如 public class User { @NotBlank private Integer id ; 2.在方法中添加注解@Valid和一个校验结果参数(Bindin ...

  8. 【Spark调优】Kryo序列化

    [Java序列化与反序列化] Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程.序列化使用场景:1.数据的持久化,通过序列化可以把数据永久 ...

  9. Python编程Day5——可变与不可变类型、数据类型整合

    一.可变与不可变类型1.可变类原值型:只改变,但id不变,证明就是在改变原值,是可变类型2.不可变类型:值改变,但id也跟着改变,证明是产生了新的值,是不可变类型 x= print(id(x)) x= ...

  10. springBoot(7)---整合Mybaties增删改查

    整合Mybaties增删改查 1.填写pom.xml <!-- mybatis依赖jar包 --> <dependency> <groupId>org.mybati ...