vue.js 初级之一
vue.js 是一个构建数据驱动的 web 界面 渐进式驱动框架。
引用的话，直接使用script标签引入就可以了；
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script> window.onload = () => {
// 创建第一个vue对象
new Vue({
el: '#box',
data: {
name: 'huanying2015',
age: 25,
sex: 'man'
}
});
// 创建第二个vue对象
new Vue({
el: '#box1',
data: {
name: '路人甲',
age: 23,
}
});
new Vue({
el: '.box',
data: {
card: '身份证',
}
}); }
</script>
</head> <body>
<!-- 调用第一个Vue对象中的数据 -->
<div id="box">
{{name}} <br/> {{age}} <br/> {{sex}}
</div>
<!-- 调用第二个vue对象中的数据 -->
<div id="box1">
<p>
{{name}}<br/> {{age}}
</p>
<p>
{{name}}<br/> {{age}}
</p>
</div>
<!-- 调用第三个vue对象中的数据 -->
<div class="box">
{{card}}
</div>
</body> </html>
运行结果：
2. vue 中绑定事件：在new Vue 中增加一个methods 属性，在methods 属性中增加方法，这样就可以在html行间增加行间事件，进行事件绑定了
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
methods: {
show2() {
alert('hello,你已经调用过vue了');
},
show() {
alert("显示使用的函数是es6 的简写方式");
this.show2();
}
}
});
}
</script>
</head> <body>
<!-- 绑定vue 的点击事件，使用的是在行间添加 行间事件 ，关键字 v-on:click -->
<input type="button" value="点击触发事件" v-on:click="show();">
</body> </html>
运行结果：
3. vue中属性，事件的调用：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
data: {
name: 'huanying2015',
},
methods: {
show1(n1, n2) {
alert(n1 + n2);
},
show2(n1 = 100, n2 = 200) {
alert(n1 + n2);
},
showName() {
alert(this.name);
}
}
});
}
</script>
</head> <body>
<!-- 绑定vue 的点击事件，使用的是在行间添加 行间事件 ，关键字 v-on:click -->
<input type="button" value="显示结果1" v-on:click="show1(100,200)">
<input type="button" value="显示结果2" v-on:click="show2(10,20)">
<input type="button" value="显示姓名" v-on:click="showName()">
</body> </html>
运行结果：
4. vue 中data属性中的其他数据格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
data: {
name: 'huanying2015',
age: 25,
userlist: ['zhangsan', 'lisi', 'wanger'],
colorlist: {
0: 'red',
1: 'blue',
2: 'yellow'
},
flag: true,
}, });
}
</script>
</head>
<body>
<div id="box">
{{name}}<br>
{{age}}<br>
{{userlist}}<br>
{{colorlist}}<br>
{{flag}}<br>
</div>
</body>
</html>
运行结果：
5. vue 中输出对象的时候，需要使用 v-for 进行循环，才能输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: 'body',
data: {
name: 'huanying2015',
age: 25,
userlist: ['zhangsan', 'lisi', 'wanger'],
colorlist: {
0: 'red',
1: 'blue',
2: 'yellow'
},
persons: {
name1: '赵子龙',
name2: '关云长',
name3: '张翼德'
},
flag: true,
}, });
}
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="val in colorlist">{{val}}</li>
</ul>
<ul>
<li v-for="v in colorlist">{{v}}</li>
</ul>
<ul>
<li v-for="v in colorlist">{{$index}}---->{{v}}</li>
</ul>
<ul>
<li v-for="v in userlist">{{v}}</li>
</ul>
<ul>
<li v-for="v in userlist">{{$index}}---->{{v}}</li>
</ul>
<ul>
<li v-for="p in persons">{{$key}}--->{{$index}}---->{{p}}</li>
</ul>
<ul>
<li v-for="(k,v) in persons">{{k}}--->{{v}}---->{{$key}}--->{{$index}}</li>
</ul> </div>
</body>
</html>
运行结果：数组和对象
6. v-model 同步改变vue的data 值：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: '#box',
data: {
name: 'huanying2015',
age: 25,
}, });
}
</script>
</head> <body>
<div id="box">
<input type="text" v-model="name">
<input type="text" v-model="name">
<br>
<p>{{name}}</p>
<p>{{name}}</p>
</div>
</body> </html>
运行结果：改变输入框的内容，可以同步显示在网页上
7. 修改数组的值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script>
window.onload = () => {
new Vue({
el: '#box',
data: {
userList: ['zhangsan', 'lisi', 'wanger']
},
methods: {
add() {
this.userList.push("mazi");
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击添加" v-on:click="add();">
<ul>
<li v-for="v in userList" track-by="$index">{{$index}}---->{{v}}</li>
<hr>
<hr> <li v-for="v in userList">{{$index}}---->{{v}}</li>
</ul>
</div>
</body>
</html>
运行结果：可以看出，点击添加的时候，循环输出是，没有加入track-by="$index"的循环，会把原来前面添加的覆盖，不再输出
8. vue中显示影藏的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
div {
width: 300px;
height: 300px;
background: red;
}
[v-cloak] {
display: none;
}
</style>
<script>
window.onload = () => {
new Vue({
el: '#box',
data: {
flag: false
},
methods: {
tooglebg() {
this.flag = !this.flag;
}
}
});
}
</script>
</head>
<body>
<ul id="box">
<input type="button" value="显示影藏" v-on:click="flag=!flag;">
<input type="button" value="使用方法操作显示影藏" v-on:click="tooglebg();">
<div v-show="flag" v-cloak> zheli </div>
</ul>
</body>
</html>
运行结果：在这里 v- show 是一个显示隐藏的开关，为false是隐藏，为true时显示
而 v-cloak 没有太多的作用，主要是为了预防闪动而增加的，预防在加载时出现闪动
vue.js 初级之一的更多相关文章
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue.js 组件引用之初级 之二
1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...
- vue.js 组件引用之初级
1. 构造组件,及组件引用:1.1 构造一个组件,1.2 注册一个组件,1.3 实例化Vue()即引用Vue() <!DOCTYPE html> <html lang=" ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- 偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- 偏前端-vue.js学习之路初级（一）概念
首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时. 新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...
- Vue.JS 对比其他框架
Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
随机推荐
- 廖雪峰Java2面向对象编程-5包和classpath-3作用域
1.访问权限 Java的类.接口.字段和方法都可以设置访问权限 访问权限是指在一个类的内部,能否引用另一个类以及访问它的字段和方法 访问权限有public.protected.private和pack ...
- Oracle 小技巧
Oracle小技巧 ###add at 18-10-11 1 ed 在sqlplus当中 如果前一条语句输入有误的话 可以输入ed再回车.在进行编辑 输入ed后有弹窗,可以对之前的输入语句进行编辑 ...
- MySQL分布式实现ID自增
由于数据量以及IO效率的因素,很多项目对数据支持的数据库会采取分库分表的方式.使用了分库分表之后需要解决的一个问题就是主键的生成.多个表之间的主键就不能用数据库本身的自增主键来支持,因为不同表之间生成 ...
- 俞敏洪：我创业24年感悟的3条CEO守则
转自:http://www.gamelook.com.cn/2017/10/306603 创业24年,他的创业经历被拍成了电影.在一次小范围聚会时,他说现实远比剧本要精彩.“如果让我一切从头开始,我会 ...
- 第9章 应用层（6）_SMTP和POP3/IMAP协议
7. 电子邮件 7.1 电子邮件发送和接收过程 (1)图解电子邮件的发送 ①一个电子邮件系统应具备三个主要组成构件:A用户代理(如Outlook).B邮件服务器.C邮件发送和接收协议(分别为SMTP和 ...
- kafka的安装 （单机）
https://blog.csdn.net/q282176713/article/details/81112988
- C# DataGirdview手动添加数据，导出txt文件并自动对齐
//DataGirdview手动添加数据 private void btnDataGirdView_Click(object sender,EventArgs e) { dataGridV ...
- SparkStreaming性能调优
合理的并行度 减少任务启动开销 选择合适的batch Duration 内存调优 设置合理的cpu数
- 小米造最强超分辨率算法 | Fast, Accurate and Lightweight Super-Resolution with Neural Architecture Search
本篇是基于 NAS 的图像超分辨率的文章,知名学术性自媒体 Paperweekly 在该文公布后迅速跟进,发表分析称「属于目前很火的 AutoML / Neural Architecture Sear ...
- Windows Server 2012R2 网络地址转换NAT
一.NAT概述 网络地址转换NAT(Network Address Translation)可以动态改变通过路由器的IP报文的内容(修改报文的源IP地址和/或目的IP地址).离开路由器的报文的源地址或 ...