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 ...
随机推荐
- Nacos 多环境配置
本文探讨Nacos作为配置中心,如何实现不同环境(开发.测试.灰度.正式)的配置管理问题 就像Maven用groupId.artifactId.version三者来定位jar包在仓库中的位置一样,Na ...
- CSP-J 2020题解
CSP-J 2020题解 本次考试还是很有用的,至少把我浇了一盆冷水. 当使用民间数据自测的时候,我就自闭了. 估分是320,但有些比较低级的错误直接少掉80. 而且这套题应该上350才正常吧,也不是 ...
- mac搭建mnmp环境
brew安装nginx brew install nginx 安装php56 brew tap homebrew/dupes brew tap josegonzalez/homebrew-php br ...
- vulnhub： DC 4
信息收集: yurang@kali:~$ nmap -sn 192.168.76.1/24 Starting Nmap 7.80 ( https://nmap.org ) at 2020-08-04 ...
- gitlab private-token利用工具
在渗透测试中,经常会遇到只获得gitlab PRIVATE-TOKEN的情况,而gitlab提供了一系列的api给我们通过这个token去访问gitlab. 所以做了个简单的gitlab工具,以供紧获 ...
- VueCli 4.0+ 版本安装插件与VueCLI 旧版本的不同
通过VueCli 脚手架 4+ 版本创建的项目,在引入插件文件并配置时,是通过 import {Create* } ,旧版本是直接导入全部,在配置相应的文件时,重新new 一个:然后再通过Vue 进行 ...
- angular11源码探索[DoCheck 生命周期和onChanges区别]
网站 https://blog.thoughtram.io/ https://juristr.com/ https://www.concretepage.com/angular/ https://ww ...
- Snap Build Your Own Blocks输入中文解决办法
Snap Build Your Own Blocks输入中文解决办法 Snap! (formerly BYOB) is a visual, drag-and-drop programming lang ...
- python—数据类型和变量
在python中,能够直接处理的数据类型和变量有整数.浮点数.字符串.布尔值.空值.变量. 一.整数 1.python可处理任意大小的整数,包括负整数,在程序中的表示方法与在数学中的方法一样.例如:0 ...
- select标签
select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...