10分钟快速入门vue.js
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的更多相关文章
- vuex2 10分钟快速入门
因为太简单了,我直接就贴代码了~ #建立store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) export de ...
- 10分钟快速入门Redis
Redis安装 来源:https://github.com/jaywcjlove/handbook 官方编译安装 $ wget http://download.redis.io/releases/re ...
- UML类图10分钟快速入门
虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰 原文地址:http://www.j ...
- UML类图10分钟快速入门 - From 圣杰
虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰 原文地址:http://www.j ...
- 不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js——60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...
- Vue.js——60分钟快速入门（转）
vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...
- Vue.js 60 分钟快速入门
Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...
- webpack快速入门——配置JS压缩，打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
- 一分钟快速入门openstack
一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...
随机推荐
- Mesos Marathon能做什么？理念是什么？（转）
Mesos功能和特点? Mesos是如何实现整个数据中心统一管理的呢?核心的概念就是资源两级供给和作业两级调度.先说说从下而上的资源两级供给吧. 在Mesos集群中,资源的供应方都来自Mesos Sl ...
- Java编译程序和运行过程详解
java整个编译以及运行的过程相当繁琐,我就举一个简单的例子说明: 编译原理简单过程:词法分析 --> 语法分析 --> 语义分析和中间代码生成 --> 优化 --> 目标代码 ...
- php 与 docker php-fpm 共存问题
需求: 本地一个 php7 的 php-fpm,现在需要运行 php5.2版本的程序, 服务器安装的 nginx 解析域名,碰见 php 文件交给 php5的 php-fpm; 注意: fastcgi ...
- 利用代理IP池(proxy pool)搭建免费ip代理和api
先看这里!!!---->转载:Python爬虫代理IP池(proxy pool) WIIN10安装中遇到的问题: 一.先安装Microsoft Visual C++ Compiler for P ...
- mysql学习笔记1（mysql的基本架构）
mysql基本架构图 如图所示: 1 . MySQL 可以分为 Server 层和存储引擎层两部分 Server 层包括连接器.查询缓存.分析器.优化器.执行器等,涵盖 MySQL 的大多数核心服务功 ...
- ServerLess之云函数实践-天气API
关注我的个人博客,发掘更多的内容 ServerLess之云函数实践-天气API 前言 云计算是大势所趋 Serverless 架构即"⽆服务器"架构,它是一种全新的架构方式,是云计 ...
- 算法基础——Trie字符串统计
原题链接 题目: 维护一个字符串集合,支持两种操作: "I x"向集合中插入一个字符串x: "Q x"询问一个字符串在集合中出现了多少次. 共有N个操作,输入的 ...
- 阿里四面P7稳了，得亏我会这些Spring面试题，果然大厂都爱问它们
前言 先说一下本人情况吧,末流985毕业,毕业之后一直在一家不大不小的公司里安稳上班.上半年因为疫情的原因公司调整了工资,我也是随波逐流跟随大家辞了职.辞职之后向阿里.字节这些都投了简历(但是只收到了 ...
- Word1-提取图片文字
1.OneNote # 将图片以图片格式粘贴在OneNote中-右键选择"复制图片中的文本"-粘贴"只保留文本"即可 这种方式识别率较高!!! 2.手机QQ图片 ...
- zabbix 用Telegram报警！！！
第一步:先在Telegram 注册个机器人!!! @BotFather在Telegram中添加联系人并按"开始",然后键入: /newbot输入你要新建的机器人名称在电报中@你的机 ...