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

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

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

引入vue.js:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>这是一个vue项目</title>

    </head>

    <body>

        <div id="app">

            {{msg}}

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

        <script>

            var app = new Vue({

                el:'#app',//接管的父类节点容器

                data:{

                    msg:"Hello world"

                }

            })

        </script>

    </body>

</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 来执行

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>这是一个vue项目</title>

    </head>

    <body>

        <div id="app">

            {{msg}}

            <button @click="changeMsg()">点击看看</button>

            <p v-if="score > 90">今晚出去嗨</p>

            <p v-else-if="score >= 60">在家看电视</p>

            <p v-else="score < 60">房间学习vue</p>

            <ul>

                <li v-for="(item,index) in weekList">{{item}}-----{{index}}</li>

            </ul>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

        <script>

            var app = new Vue({

                el:'#app',//接管的父类节点容器

                data:{

                    msg:"Hello world",

                    score:59,

                    weekList:["周一","周二","周三","周四","周五","周六","周日"],

                },

                methods:{

                    changeMsg: function(){

                        this.msg = "Hello vue";

                    }

                }

            })

        </script>

    </body>

</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. cephonebox发布

    前言 现在已经是2016年收官的一个月了,之前一直想做一个calamari的集成版本,之所以有这个想法,是因为,即使在已经打好包的情况下,因为各种软件版本的原因,造成很多人无法配置成功,calamar ...

  2. Linux_CentOS 7下Nginx服务器的安装配置

    1.安装 1.1 配置epel yum 源 wget http://dl.Fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm rpm ...

  3. appium 数据参数化 登录模块

    下面是我最近学习的PYTHON的登录代码: class test(object): def getdic(self): d = {'username': '13', 'password': '1111 ...

  4. Mysql binlog备份数据及恢复数据，学会这个，我在也不怕删库跑路啦~

    导读 我一直都主张,技多不压身(没有学不会的技术,只有不学习的人),多学一项技能,未来就少求人一次.网上经常听到xxx删库跑路,万一真的遇到了,相信通过今天的学习,也能将数据再恢复回来~~~ 当然啦, ...

  5. 关于oracle11g 和sqldeverloper的安装配置

    0友情提示:以下下载地址都是我的百度云分享链接安全无毒请放心下载! 电脑配置 win10 jdk版本1.7 下载oracle11G 版本 下载地址:安装很简单 sqldverloper(oracleD ...

  6. 给PDF文件创建书签，实现快速导航

    当文档中的页码比较多的情况下,使用目录进行导航是一个很好用的方法,为文档内容制作目录,方便快速查找目标内容.除了内容的快速导航,书签还能指明不同书签的层级关系,展现文档的结构. 图1:书签的功能 一. ...

  7. Redis多线程原理详解

    本篇文章为你解答一下问题: 0:redis单线程的实现流程是怎样的? 1:redis哪些地方用到了多线程,哪些地方是单线程? 2:redis多线程是怎么实现的? 3:redis多线程是怎么做到无锁的? ...

  8. python接口测试2-开发WEB接口

    首先要安装flask包: pip install flask 开发一个简单的API接口 # 1. 导入包 from flask import Flask, request # 2. 实例化一个 app ...

  9. [自学] MIT的EECS本科+研究生课程【持续更新中-2020.06.02】

    前言 我的本科是读的电子信息工程,研究生跟着老师做项目,参与到深度学习中来,毕业后做了算法工程师,工作之后愈发发现,不论从事什么岗位,基础都很重要,但现在也没有时间再读一遍本科了,自学的话也不知道从何 ...

  10. 使用acme.sh从Let's Encrypt申请SSL证书

    Let's Encrypt 简介 Let's Encrypt是一个于2015年三季度推出的数字证书认证机构,旨在以自动化流程消除手动创建和安装证书的复杂流程,并推广使万维网服务器的加密连接无所不在,为 ...