Vue.js是一个轻巧、高性能、可组件化的MVVM库，一套用于构建用户界面的渐进式框架，上手简单，兼容强大。

官方文档：https://cn.vuejs.org/v2/guide/

下面我们就直接来使用一下vue:

引入vue.js:

  1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. <!-- 生产环境版本，优化了尺寸和速度 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

创建一个vue对象，绑定某个节点，该节点下的所有dom将被这个vue对象接管：

vue对象类似微信小程序,data里面的属性可以在页面上通过“{{}}”（双大括号）形式来映射，并且是双向绑定的。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>这是一个vue项目</title>
  6.     </head>
  7.     <body>
  8.  
  9.         <div id="app">
  10.  
  11.             {{msg}}
  12.  
  13.         </div>
  14.  
  15.         <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  16.         <script>
  17.  
  18.             var app = new Vue({
  19.                 el:'#app',//接管的父类节点容器
  20.                 data:{
  21.                     msg:"Hello world"
  22.                 }
  23.  
  24.             })
  25.  
  26.         </script>
  27.     </body>
  28. </html>

运行如下：

常规操作：

vue的事件可以用v-on:click来绑定，也可以简写为 @click，常规方法定义在vue对象的methods里面

vue的条件执行可以用 v-if、v-else-if、v-else来执行，v-else必须跟在v-if或v-else-if后面

vue的循环可以用 v-for 来执行

下面一起来看下这些属性的用法：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>这是一个vue项目</title>
  6.     </head>
  7.     <body>
  8.  
  9.         <div id="app">
  10.  
  11.             {{msg}}
  12.  
  13.             <button @click="changeMsg()">点击看看</button>
  14.  
  15.             <p v-if="score > 90">今晚出去嗨</p>
  16.             <p v-else-if="score >= 60">在家看电视</p>
  17.             <p v-else="score < 60">房间学习vue</p>
  18.  
  19.             <ul>
  20.                 <li v-for="(item,index) in weekList">{{item}}-----{{index}}</li>
  21.             </ul>
  22.         </div>
  23.  
  24.         <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  25.         <script>
  26.  
  27.             var app = new Vue({
  28.                 el:'#app',//接管的父类节点容器
  29.                 data:{
  30.                     msg:"Hello world",
  31.                     score:59,
  32.                     weekList:["周一","周二","周三","周四","周五","周六","周日"],
  33.                 },
  34.                 methods:{
  35.                     changeMsg: function(){
  36.                         this.msg = "Hello vue";
  37.                     }
  38.                 }
  39.  
  40.             })
  41.  
  42.         </script>
  43.     </body>
  44. </html>

运行如下：

如此，您已经掌握了vue的几个用法了，同时也体会到vue的强大之处。

vue的历史不过区区数载，但势头凶猛异常，已经有一个完整的生态体系。

更多的vue学习，最直接的就是  vue官网。

祝大家在vue的学习之路上渐行渐远，崭露头角，引领风骚~

10分钟快速入门vue.js的更多相关文章

  1. vuex2 10分钟快速入门

    因为太简单了,我直接就贴代码了~ #建立store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) export de ...

  2. 10分钟快速入门Redis

    Redis安装 来源:https://github.com/jaywcjlove/handbook 官方编译安装 $ wget http://download.redis.io/releases/re ...

  3. UML类图10分钟快速入门

    虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰 原文地址:http://www.j ...

  4. UML类图10分钟快速入门 - From 圣杰

    虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰 原文地址:http://www.j ...

  5. 不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...

  6. Vue.js——60分钟快速入门（转）

    vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...

  7. Vue.js 60 分钟快速入门

    Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...

  8. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  9. 一分钟快速入门openstack

    一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...

随机推荐

  1. ceph的df容量显示计算

    显示数据 [root@lab201 ~]# ceph df GLOBAL: SIZE AVAIL RAW USED %RAW USED 1092T 404T 688T 63.01% POOLS: NA ...

  2. tomcat设置好环境变量，依然无法通过cmd startup命令启动

    Windows环境下JDK安装与环境变量配置详细的图文教程 https://www.cnblogs.com/liuhongfeng/p/4177568.html   Windows环境下maven 环 ...

  3. [原题复现+审计][0CTF 2016] WEB piapiapia(反序列化、数组绕过)[改变序列化长度，导致反序列化漏洞]

    简介  原题复现:  考察知识点:反序列化.数组绕过  线上平台:https://buuoj.cn(北京联合大学公开的CTF平台) 榆林学院内可使用信安协会内部的CTF训练平台找到此题 漏洞学习 数组 ...

  4. 理解与使用Treiber Stack

    目录 背景 名称由来 CompletableFuture源码实现 FutureTask实现 Treiber Stack抽象实现 入栈 出栈 示例 参考 背景 最近在很多JDK源码中都看到了Treibe ...

  5. laravel数据填充

    post表有这2个字段 填充20条数据, 执行 php artisan tinker 执行预览 factory(App\Post::class,20)->make(); 插入数据库 factor ...

  6. Python判断是否为数字

    前言 Python isdigit()方法检测字符串是否只由数字组成. isdigit()方法语法: str.isdigit() 如果字符串只包含数字则返回 True 否则返回 False. 示例 x ...

  7. C语言讲义——全局变量和局部变量

    局部变量 普通的局部变量也叫动态变量,默认有个关键字叫auto,可以省略.有两种形式: 1.函数内的局部变量 2.复合语句内的局部变量:for(int i = 0; i<5; i++){-} 静 ...

  8. python sklearn库实现逻辑回归的实例代码

    Sklearn简介 Scikit-learn(sklearn)是机器学习中常用的第三方模块,对常用的机器学习方法进行了封装,包括回归(Regression).降维(Dimensionality Red ...

  9. Alpha冲刺-第三次冲刺笔记

    Alpha冲刺-冲刺笔记 这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2 这个作业要求在哪里 https://edu.cnblogs. ...

  10. MAT内存分析工具安装指南(MAT)

    https://blog.csdn.net/mahl1990/article/details/79298616