您的位置：首页 > Web前端 > Vue.js

VueJs(1)---快速上手VueJs

2018-04-11 21:39 211 查看

【VueJs入门】

版权声明

首先申明：此篇博客不是本人原创，只是最近开始学习vue.jS,看到有作者写的很不错，我仅在它的基础上仅仅是修改了样式

原文博客地址：https://blog.csdn.net/column/details/12809.html

非常感谢原文作者提供这么宝贵的文章。

一、上手步骤

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>
<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后期会继续学习。

[b]想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 [b]中尉【6】[/b] [/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航