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 ...
随机推荐
- Python_面试题汇总【正在整理中...】
1.十大算法 阶乘 冒泡 1 #使用递归实现阶乘 2 3 def f(n): 4 if n ==1: 5 return 1 6 else: 7 return n*(f(n-1)) 使用递归实现阶乘 1 ...
- C++深拷贝与浅拷贝区别
浅拷贝只是对指针的拷贝,浅拷贝后两个指针指向同一个内存空间: 深拷贝不仅对指针进行拷贝,而且对指针指向的内容进行拷贝,经深拷贝后的指针是指向两个不同地址的指针. 当对一个已知对象进行拷贝时,编译系统会 ...
- （msf使用）msfconsole - meterpreter
[msf] msfconsole meterpreter 对于这款强大渗透测试框架,详情介绍可看这里:metasploit 使用教程 对于msfconsole, Kali Linux 自带.只需用命令 ...
- ABBYY FineReader 14扫描和保存文档
在ABBYY FineReader 14中您可以使用扫描"新建任务"窗口选项卡上的内置任务创建各种格式的数字文档.本文介绍使用FineReader 14扫描和保存文档的方法. 1. ...
- css3系列之伪类选择器
Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:n ...
- Apifox接口测试管理工具
今天发现开发使用了一款新的接口测试工具,一眼看上去比较清爽,主要全中文界面对比postman的全英文,简直友好太多了. 后续又被业界大佬虫师推荐,于是去官网简单了解了一下,Apifox = Postm ...
- 【抓取】6-DOF GraspNet 论文解读
[抓取]6-DOF GraspNet 论文解读 [注]:本文地址:[抓取]6-DOF GraspNet 论文解读 若转载请于明显处标明出处. 前言 这篇关于生成抓取姿态的论文出自英伟达.我在读完该篇论 ...
- vs2019 Com组件初探-简单的COM编写以及实现跨语言调用
前提条件 1.掌握C++基础语法 2.平台安装 vs2019 3.本地平台为 windows 10 1909 X64 4.了解vbs基础语法 本次目标 1.掌握Com组件的概念及原理 2.编写一个简单 ...
- VS2019配置C+++mingW32配置
两个安装教程博客 http://t.sg.cn/yq22mn http://t.sg.cn/wsavo0 基于调试报错,是因为文件夹是中文,贴一个详细的博客:http://t.sg.cn/3j5e4z
- 14_TTS
TTS(Text to speech)为语音合成的意思.本课程主要介绍了TTS的使用方法. 1 package cn.eoe.tts; 2 3 import java.util.Locale; 4 i ...