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. arm64大服务器安装ubuntu18看不到安装界面

    前言 最近在使用arm的大服务器需要用到ubuntu相关的一些东西,在操作系统安装过程中遇到了一些问题 记录 华为鲲鹏服务器 这个默认安装centos的都很顺利,安装ubuntu18最新的,impi就 ...

  2. Hive 报错Class path contains multiple SLF4J bindings.

    进入hive报错信息如下 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/ ...

  3. mybatis 解决属性名和字段名不一致

    1. 数据库中表的设计 2. 实体类 3.mapper映射文件 4. 问题:密码没有获取到 原因:mybatis会根据查询的列名去进行设值 5. 解决列名和属性名不一致的方法 5.1 为列名指定别名, ...

  4. Java Web 会话技术总结

    会话技术 会话概念 一次会话中包含多次请求和响应. 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止,一次会话结束. 会话的功能 在一次会话的范围内的多次请求间,共享数据. 会 ...

  5. 用过MindManager后才知道思维导图原来这么简单

    哈喽大家好!时间过得真是太快了,一眨眼这一年就接近尾声了,相信我们都度过了不平凡但十分充足的一年,不知道大家在2020年中有没有令自己满意的收获呢? 相信大家各自都有精彩的收获,我们不妨把它们总结一下 ...

  6. 编译安装opssl

    wget http://www.openssl.org/source/openssl-1.0.1q.tar.gz tar zxvf openssl-1.0.1q cd openssl-1.0.1q . ...

  7. laravel 返回SQL

    默认情况下,toSql 获取到的 sql 里面的参数使用 "?" 代替的,如下: 1 DB::table('user')->where('id', 1)->toSql( ...

  8. NOIP2012 解题报告

    TG Day1 T3 开车旅行 1. 预处理出从每座城市两人分别会到达的两座城市. 用 set 可以轻松实现. 2. 用倍增优化 DP 令 \(f_{i,j,k}\) 表示从城市 \(j\) 出发,行 ...

  9. Linux 学习笔记03丨Linux文件系统、文件基本属性、目录处理及文件查看

    Chapter 2. 文件系统 2.1 Linux 系统目录结构 命令窗口下输入命令: $ ls /,能够看到根目录下的全部目录及文件 树状目录结构为: 最顶级的目录: / :根目录 / 是根目录,~ ...

  10. MySQL制作具有千万条测试数据的测试库

    有时候需要制造一些测试的数据,以mysql官方给的测试库为基础,插入十万,百万或者千万条数据.利用一些函数和存储过程来完成. 官方给的测试库地址:https://github.com/datachar ...