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 ...
随机推荐
- FTP的PORT（主动模式）和PASV（被动模式）
最近做一个项目用到FTP和其它系统进行文件传输,结果在FTP网络连接的问题上花了很多时间,由于太久没搞多FTP,忘记了FTP不单单开放21端口,客户端采用不同连接模式对网络有不同.在此重温一下FTP的 ...
- HW弹药库之红队作战手册
红方人员实战手册 声明 Author : By klion Date : 2020.2.15 寄语 : 愿 2020 后面的每一天都能一切安好 分享初衷 一来, 旨在为 "攻击" ...
- php获取字符串长度
function len($zfc){ $arr = []; $len = mb_strlen($zfc); for ($i = 0; $i < $len; $i++) { array_push ...
- tp5 统一返回json格式
控制器调用 public function json(){ if (request()->isPost()) { return jsonData(1,'转换成功',数据(可不填)); } } 公 ...
- 使用Beyond Compare对比大篇幅文件的小技巧
我们在编辑较大篇幅的文章时,无可避免地要经过多次的修改.有时候修改的版本过多时,我们很可能就会记不清最新版的文章对比上一版的文章,究竟修改了哪些地方.但有了Beyond Compare(Windows ...
- 攻克solo第六课（大调音阶与真的爱你）
在本期文章中,笔者将通过guitar pro7和大家分享大调音阶的知识. 不知道大家有没有试着使用my song book里面的谱子,反正笔者是觉得赚大了,并且找了囊括民谣.爵士到摇滚在内不同风格的谱 ...
- 紧急发布用cherry-pick检出当前分支所有我的提交记录
目录 背景 操作命令 cherry-pick git log Shell脚本 背景 公司接了个新项目,需在平台上增加几个新接口,问题是本来说是和平台一起迭代发布的时间提前了,但当前的代码都和其他开发人 ...
- B 站今日黑白页是怎么实现的？
今天是2020年4月4日哀悼活动,不少相关站点都将网站全部变为灰色,以表示哀悼.以下为CSS代码.直接在*.css文件最前面加入. <!-- 置为灰色 --> <style type ...
- 《STM32CubeMX配置STM32H743XI工程》第一讲《初始化UART，重定义printf函数，点亮一个LED灯》
1.打开STM32CubeMX软件->新建一个工程(软件自行到ST官网下载安装) 2.输入对应的芯片型号(本次基于野火STM32H743XI Pro 开发板)点击Start Project生成项 ...
- virtualProtect函数
原文链接:https://blog.csdn.net/zacklin/article/details/7478118 结合逆向课件11