我用的开发工具是Sublime Text3

官网下载地址：http://www.sublimetext.com/3，我下载了Windows64位的版本

学了一点皮毛：

el：element 需要获取的元素，一定是html中的根容器元素

data: 用于数据的存储

methods : 用于存储各种方法

data-binding： 给属性绑定对应的值

事件处理Event

button下用v-on：click表示单击

button下用v-on：dblclick表示双击

其中v-on也可以用@

html文件中的接收

一定要在html中导入

<script src="https://unpkg.com/vue"></script>

div 下的id的值， 用双重大括号接收元素的值

在同一级目录下创建了两个文件，分为是aaa.html 和 aaa.js

html文件

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8" />

  <title>测试简单的Demo</title>

  <script src="https://unpkg.com/vue"></script>

</head> 

<body>

  <div id="app1">

   <h1> {{ message }} </h1>

   <a v-bind:href="website">Baidu</a>

   <input type="text" websitetag="" />BaiduTag

   <h1>My Name is : {{ name }} </h1>

   <h1> My Job is : {{ job }} </h1>

   <h1> My Age is : {{ age }} </h1>

   <h1> X Values is : {{ x }} </h1>

   <p>{{xx}}</p>

   <p> {{ greet()}}</p>

   <p> {{ sayhello( '====================')}}</p>

   <button v-on:click="add(5)">add 5 age</button>

   <button v-on:click="subtract(10)">subtract 10 age</button>

   <button @click="add(5)">add 5 age</button>

   <button @click="subtract(10)">subtract 10 age</button>

 </div>  

 <div id="app-2">

  <h1></h1>

  <span v-bind:title="message">

    鼠标悬停几秒钟查看此处动态绑定的提示信息！

  </span>

  <h1></h1>

  <ol>

        <li v-for="todo in todos">

          {{ todo.text }}

        </li>

      </ol>

</div>

<script src="aaa.js"></script>

</body>

</html>

js文件

// 创建一个 Vue 实例或 "ViewModel"

// 它连接 View 与 Model

var exampleData = {

            xxxxx: 'Hello World!'

        }

var app1 = new Vue({

    el: '#app1',

    data: {

        message: 'Hello World!',

        website: "www.baidu.com",

        websiteTag: "< a href='http://www.baidu.com'> Baidu </a>",

        xx: exampleData,

        name: 'jasmine',

        job: 'QA',

        age: 22,

        x: 0,

        y: 0

    },

    methods: {

        greet: function()

        {return "greetdfsa;kdfhdfhsjkdaf";},

        sayhello: function(s){

            return "udfgsda" + s;

        },

        add: function(inc)

        {

            this.age +=inc;

        },

        subtract: function(inc)

        {

            this.age -=inc;

        }

    }

})

var app2 = new Vue({

          el: '#app-2',

          data: {

            message: '页面加载于 ' + new Date().toLocaleString(),

            todos: [

              { text: '学习 JavaScript' },

              { text: '学习 Vue' },

              { text: '整个牛项目' }

            ]

          }

        })

并在html中引入了js的路径

中国官网地址： https://cn.vuejs.org/v2/guide/

其他地址：https://www.cnblogs.com/rik28/p/6024425.html

http://www.runoob.com/vue2/vue-tutorial.html

https://www.cnblogs.com/taylorchen/p/6083099.html

https://cn.vuejs.org/

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

相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

本文摘自：http://www.cnblogs.com/keepfool/p/5619070.html

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

本文的Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！

v-for Demo v-bind Demo Page Demo GitHub Source

MVVM模式

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

页面Vue的更多相关文章

  1. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...

  2. angular配置路由/子页面+vue配置路由/子页面

    1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同.   routes: [     { path: '/',       ...

  3. 单页面vue引入百度统计的使用方法！

    最近组长安排着做一个项目,h5的应用下载项目,想着做起来还是比较容易,可是看到提出的需求,我就有点懵逼了!需要对应用的下载进行统计!!!我当时就想着我前端怎么对页面点击按钮就行数据统计啊!我以前的项目 ...

  4. 用 vue cli 脚手架搭建单页面 Vue 应用（进阶2）

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  5. 使用electron将单页面vue webapp 打包成 PC端应用

    在看张鑫旭博客得时候看到了electron这个东西,来了兴趣,就按照上面写的将已经做好得vue项目拿来试了试,出乎意料得顺利 electron简单说下electron,就是把 chrome内核和你的项 ...

  6. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  7. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（下篇——多页面VueSSR+热更新Server）

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  8. 【vue】使用vue构建多页面应用

    先了解一些单页面和多页面的区别 mm 多页应用模式MPA 单页应用模式SPA 应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片 ...

  9. vue.js多页面开发环境搭建

    利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的. ...

随机推荐

  1. 使用 EF Core 的 EnableRetryOnFailure 解决短暂的数据库连接失败问题

    阿里云服务器有时会出现短暂的连接不上数据库服务器(RDS)的问题,之前由于没有启用 Entity Framework Core 的失败重试功能(默认是禁用的),短暂的连接失败立马会引发下面的异常从而出 ...

  2. 算法基础_递归_求杨辉三角第m行第n个数字

    问题描述: 算法基础_递归_求杨辉三角第m行第n个数字(m,n都从0开始) 解题源代码(这里打印出的是杨辉三角某一层的所有数字,没用大数,所以有上限,这里只写基本逻辑,要符合题意的话,把循环去掉就好) ...

  3. Codeforces 1090B - LaTeX Expert - [字符串模拟][2018-2019 Russia Open High School Programming Contest Problem B]

    题目链接:https://codeforces.com/contest/1090/problem/B Examplesstandard input The most famous characters ...

  4. POJ 3279 - Fliptile - [状压+暴力枚举]

    题目链接:http://poj.org/problem?id=3279 Sample Input 4 4 1 0 0 1 0 1 1 0 0 1 1 0 1 0 0 1 Sample Output 0 ...

  5. GAN (Generative Adversarial Network)

    https://www.bilibili.com/video/av9770302/?p=15 前面说了auto-encoder,VAE可以用于生成 VAE的问题, AE的训练是让输入输出尽可能的接近, ...

  6. 4、Flutter 采坑记录篇二_依赖库不兼容

    1.报错信息 Because every version of flutter_test from sdk depends on package_resolver 1.0.4 which depend ...

  7. 20190412 T-SQL语言一

    -- T-SQL ------------------------------------------------------ 例如1 什么是注释符 单行注释select *from kc /*sel ...

  8. 与数论的厮守01:素数的测试——Miller Rabin

    看一个数是否为质数,我们通常会用那个O(√N)的算法来做,那个算法叫试除法.然而当这个数非常大的时候,这个高增长率的时间复杂度就不够这个数跑了. 为了解决这个问题,我们先来看看费马小定理:若n为素数, ...

  9. RedHat7.之.图形化切换

    RedHat7.之.图形化切换 从黑窗口(纯指令输入界面)切换到图形化界面,使用root用户执行指令:startx 指令:startx 如有问题,欢迎纠正!!! 如有转载,请标明源处:https:// ...

  10. noip2016海港

    题目描述 Description 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只 ...