VueJs(1)---快速上手VueJs
【VueJs入门】
一、上手步骤
vue.js和jquery一样，只要引入vue.js就可以了。
1、创建一个Vue实例： 先引入Vue.js文件，然后new一个Vue的实例即可。如下面的代码，通过<script src="./vue.js"></script>引入，然后在<script>标签中创建实例
2、挂载 在Vue的实例里，通过传递的el属性
3、单向/双向绑定 data属性里的变量 = html标签里的{{}} = input标签里的v-model
<!DOCTYPE html>
<html lang="en">
<script src="./vue.js"></script>
<body>
<div id="app">
<input v-model="test"/>
{{test}}
</div>
<script>
new Vue({ //创建一个Vue的实例
el: "#app", //挂载点是id="app"的地方
data: { //数据
test: "abc" //变量test
}
})
</script>
</body>
</html>
二、案例(DEMO控制)
案例说明：
1. 单个dom的添加/删除/显示/隐藏——变量控
2. 多个在显示上互斥的dom（如登录时的提示）—— 用１个变量去控制
3. 多个同类型dom（用v-for来动态生成）
代码：
<html lang="en">
<script src="./vue.js"></script>
<body>
<div id="app">
<p>
点击按钮切换显示的图标
</p>
<input type="button" v-on:click="set1" v-if="data1" value="【一个图标】"/>
<input type="button" v-on:click="set1" v-if="!data1" value="另外一个图标"/>
<p>————————————————————————————</p>
<p>点击不同按钮决定显示什么</p>
<input type="button" @click="set2('baidu')" value="百度">
<input type="button" @click="set2('qq')" value="腾讯">
<input type="button" @click="set2('taobao')" value="淘宝">
<button @click="set2">什么都不显示</button>
<p>
<a href="http://www.baidu.com" target="_blank" v-if="data2=='baidu'">百度</a>
<a href="http://www.qq.com" target="_blank" v-if="data2=='qq'">腾讯</a>
<a href="http://www.taobao.com" target="_blank" v-if="data2=='taobao'">淘宝</a>
</p>
<p>————————————————————————————</p>
<p>
同类型dom，典型的是表格，类似的有li。<br>
<button @click="set3">点击添加内容</button>
</p>
<ul>
<li v-for="i in data3">{{i}}</li>
</ul>
</div>
<script>
new Vue({ //创建一个Vue的实例
el: "#app", //挂载点是id="app"的地方
data: {
data1: true,
data2: "",
data3: [1]
},
methods: {
set1: function () {
this.data1 = !this.data1;
},
set2: function (arg) {
this.data2 = arg;
},
set3: function (arg) {
this.data3.push(this.data3.length + 1);
}
}
})
</script>
</body>
三、案例（input相关）
微博的注册页面如下图
代码：
<!DOCTYPE html>
<html lang="en">
<script src="./vue.js"></script>
<body>
<div id="app">
<p>
邮箱：<input v-model="mail"/>
</p>
<p>
设置密码：<input type="password" v-model="pw"/>
</p>
<p>
官方注册微博名：<input v-model="name" placeholder="请参考组织/企业/品牌名称"/>
</p>
<p>
所在地：
<select v-model="province">
<option value="zhejiang">浙江</option>
<option value="shanghai">上海</option>
</select>
<select v-model="city">
<option v-for="(val,key) in citys" v-bind:value="key">{{val}}</option>
</select>
</p>
<p>
验证码：
<input v-model="verificationCode">
请输入：1234
</p>
<p>
<input type="button" v-on:click="check" value="提交"/>
<input type="button" v-on:click="inputDefault" value="默认值"/>
</p>
<p style="color:green" v-if="error=='success'">提交成功</p>
<p style="color:red" v-if="error=='less'">缺少内容</p>
<p style="color:red" v-if="error=='VerificationCode'">验证码错误</p>
</div>
<script>
new Vue({ //创建一个Vue的实例
el: "#app", //挂载点是id="app"的地方
created: function () {
this.changeProvince();
},
data: { //数据
province: "zhejiang",
mail: "",
pw: "",
name: "",
city: "",
citys: {},
provinceWithCity: {
zhejiang: {
hangzhou: "杭州",
shaoxing: "绍兴"
},
shanghai: {
pudong: "浦东区",
jingan: "静安区"
}
},
verificationCode: "",
error: ""
},
methods: {
changeProvince: function () {
this.citys = this.provinceWithCity['zhejiang'];
this.$watch('province', function (newVal, oldVal) {
this.citys = this.provinceWithCity[newVal];
})
},
check: function () { //提交内容检查
if (this.mail && this.pw && this.name && this.province && this.city) {
if (this.verificationCode === '1234') {
this.error = 'success';
console.log([this.mail, this.pw, this.name, this.province, this.city]);
} else {
this.error = 'VerificationCode'
}
} else {
this.error = 'less';
}
},
inputDefault: function () {
this.mail = '123@qq.com';
this.pw = '123';
this.name = 'abc';
this.province = 'zhejiang';
this.city = 'hangzhou';
this.verificationCode = '1234';
}
}
})
</script>
</body>
</html>
注册页面代码
四、案例(表格相关)
1.表格的核心特点是：类型重复的大量内容。
2.Vue非常擅长对表格的处理，只需要已知数据，预先设置好格式，即可自动生成数据。
3.常见表格需求是选择性显示（比如只显示符合条件的项），这点Vue也十分擅长，你只需要设置好条件，Vue在渲染的时候会自动帮你完成
<!DOCTYPE html>
<html lang="en">
<script src="./vue.js"></script>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
}
</style>
<body>
<div id="app">
<input type="button" v-on:click="randomData" value="随机生成数据"/>
<input type="button" v-on:click="yearAbove20" v-if="yearLimit!==20" value="只显示年龄大于20的人"/>
<input type="button" v-on:click="all" v-if="yearLimit>0" value="显示全部"/>
<p></p>
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(val,key) in datas" v-if="val.year > yearLimit">
<td>{{val.index}}</td>
<td>{{val.name}}</td>
<td v-if="val.year<30">{{val.year}}</td>
<td v-else>年龄太大了，不告诉你喔</td>
</tr>
</table>
</div>
<script>
new Vue({ //创建一个Vue的实例
el: "#app", //挂载点是id="app"的地方
data: {
datas: [],
yearLimit: 0
},
methods: {
getName: function () {
var familyNames = new Array(
"赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈",
"褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许",
"何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏",
"陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章",
"云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦",
"昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳",
"酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺",
"倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常",
"乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余",
"元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹"
);
var givenNames = new Array(
"子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛",
"昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊",
"东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政",
"美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建",
"建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋",
"涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
"子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡",
"佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕",
"佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵",
"清妍", "诗悦", "嘉乐", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌"
);
var ran1 = parseInt(100 * Math.random());
var ran2 = parseInt(100 * Math.random());
return familyNames[ran1] + givenNames[ran2];
},
randomData: function () {
var data = [];
for (var i = 1; i < (5 + 10 * Math.random()); i++) {
var obj = {
index: i,
name: this.getName(),
year: parseInt(1 + Math.random() * 50)
}
data.push(obj)
}
this.datas = data;
console.log(this.datas);
},
yearAbove20: function () {
this.yearLimit = 20;
},
all: function () {
this.yearLimit = -1;
}
}
})
</script>
</body>
</html>
table相关
五、其它Vue常见功能
1、过滤器功能：
1. 主要用于文本转换；
2. 例如获得一个日期对象后，通过过滤器命令自动转为我们要求的日期格式。
3. {{ message | capitalize }} message变量被过滤器函数capitalize所处理
2、计算属性：
1. 更加高级的功能，可以视为过滤器功能的进阶版，适用的方向更多（不仅仅是文本）
2. 获取一个变量（输入内容）→通过计算函数转换→显示转换结果（输出内容）
3. 当输入内容变更时，输出内容也会自动随之变更
4. 利用ES5的getter和setter特性来实现，有缓存特点
3、$watch方法：
1. 监控变量，当变量改变时触发回调函数；
2. 例如之前的微博注册demo中，通过检测表示省份的变量的变化，来动态设置表示市的dom
4、class/style绑定：
1. 通过改变变量，来设置dom的样式的类，或者直接设置样式的属性
2. <div v-bind:class="{ active: isActive }"></div>
3. isActive值为true时，dom获得active这个类
5、事件监听：
1. 通过$emit触发事件和$on响应事件，只在当前Vue实例内有效，因此不会带来干扰；
2. 用起来非常舒服，适用于一对多和多对一的场景；
3. 跨组件响应（父子组件通信）时，可以使用global event bus来实现，或者使用插件实现
6、路由功能：
1. 简单来说，按需加载，而不是一次性全部加载；
2. 有官方推荐支持使用的的vue-router库；
通过本篇文章先全局了解下vue.js后期会继续学习。
参考
原文博客地址：https://blog.csdn.net/column/details/12809.html
非常感谢原文作者提供这么宝贵的文章。
想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 中尉【6】
VueJs(1)---快速上手VueJs的更多相关文章
- vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- 十分钟快速上手NutUI
本文将会从 NutUI 初学者的使用入手,对 NutUI 做了一个快速的概述,希望能帮助新人在项目中快速上手. 文章包括以下主要内容 安装引入 NutUI NutUI 组件的使用 NutUI 主题和样 ...
- vue3快速上手
前言 虽然Vue3肯定是未来的趋势,但还不是很成熟,实际开发中用的也不多,建议学Vue3之前先掌握Vue2,将Vue3作为未来的知识储备. Vue3快速上手 Vue3简介 2020年9月18日,Vue ...
- 什么是vuejs之重新认识vuejs
什么是vuejs? 1.它是一个轻量级的mvvm框架 2.数据驱动+组件化的前端开发 3.github超过25k+的stat数,社区完善 4.vuejs更轻量,gzip后大小只有20k+ 5.vuej ...
- 【Python五篇慢慢弹】快速上手学python
快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...
- 快速上手Unity原生Json库
现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...
- [译]：Xamarin.Android开发入门——Hello,Android Multiscreen快速上手
原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...
- [译]：Xamarin.Android开发入门——Hello,Android快速上手
返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...
随机推荐
- join查询优化
更新使用过滤条件中包括自身的表 此方法不能无法在mysql中使用 `UPDATE user1 SET over='齐天大圣' WHERE user1.user_name IN ( SELECT b.u ...
- Winform .NET 利用NPOI导出大数据量的Excel
前言:公司让做一个导出数据到Excel的小工具,要求是用户前端输入sql语句,点击导出按钮之后,将数据导出到Excel,界面如图所示:文件下端显示导出的进度 遇到的问题: 1.使用NPOI进行Exce ...
- 五分钟让你读懂UML常见类图
相信各位同学在阅读一些源码分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,经常看到UML类图但还不太熟悉的小伙伴赶紧来一起认识一下它吧:) 一 ...
- 用python turtle画玫瑰
1.turtle 库 2.画玫瑰的代码: import turtle turtle.penup() turtle.left() turtle.fd() turtle.pendown() turtle. ...
- Numpy与Matplotlib
一.Numpy numpy支持大量的维度数组和矩阵运算,对数组运算提供了大量的数学函数库! numpy比Python列表更具优势,其中一个优势便是速度.在对大型数组执行操作时,numpy的速度比Pyt ...
- c++中段自评
不知不觉,学期已过一大半.也是时候对自己的编程水平重新进行一次评估了. 1.通过最近的中段测试和acm新手赛的洗礼,以及之前的课前预习.课中学习.和课后作业的锻炼,我逐渐体会到编程语言的魅力同时也理解 ...
- C语言内存四区的学习总结（三）---- 栈区
接上篇内存四区的堆区的总结,下面做一些栈区的相关总结. 一.栈区的分析: 就下面测试程序 #include "stdio.h" #include "string.h&qu ...
- Java实现AES加密,异常java.security.InvalidKeyException: Illegal key size 的解决
Java实现AES加密,抛出异常如下:java.security.InvalidKeyException: Illegal key size 代码参考 http://my.oschina.net/Ja ...
- bootstrap中的dropdown组件扩展hover事件
bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap ...
- Exp3 免杀原理与实践 20154320 李超
基础知识 如何检测出恶意代码 基于特征码的检测:分析指令的统计特性.代码的结构特性等.如果一个可执行文件(或其他运行的库.脚本等)拥有一般恶意代码所通有的特征(开启后门等)则被认为是恶意代码 启发式恶 ...