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 ...
随机推荐
- 以太网安全技术ACL原理+配置
一.以太网访问控制列表 主要作用:在整个网络中分布实施接入安全性 访问控制列表ACL(Access Control List)为网络设备提供了基本的服务安全性.对某个服务而言,安全管理员首先应该考虑的 ...
- SCCM 2012 R2实战系列之三：独立主站点部署
3.1 SCCM 2012 R2主站点的安装 SCCM 2012 R2跟以前的SCCM 2007不同的是多了一个管理中心站点的角色, 管理中心站点主要负责SCCM管理控制和报表查看. 主站点跟以往的S ...
- curl 与wget的区别
CURL与wget的区别 当想要直接通过linux 命令行下载文件,马上就能想到两个工具:wget 和 CURL.它们有很多一样的特征,可以很轻易的完成一些相同的任务,虽然它们有一些相似的特征,但它们 ...
- 禁用win7更新
关闭自动更新服务Windows Update 第一种方法 ---------------------------------------------------------------- Win + ...
- svn 红叉叉图标解决方法
这个图标表示当前文件夹下的某些文件或文件夹已经被计划从版本控制中 删除,或是该文件夹下某个受控的文件丢失了. 解决方法: 鼠标右键红叉小图标->->revert 更多SVN图标说明,请参考 ...
- mysql连接状态
mysql连接状态 mysqladmin -uroot -h127.0.0.1 status mysqladmin -uroot -h127.0.0.1 processlist
- 第7章 网络层协议（4）_IGMP协议
4. IGMP协议(Internet Group Management Protocol) 4.1 什么是组播(多播) (1)单播同一个视频要发送90个副本,但支持收看者“快进”和“倒退”. (2)组 ...
- Linux下单独编译安装PHP扩展包
首先进入PHP源码目录,比如这个: root@vultr:~/php-/ext/soap# 运行下PHP目录下的phpize,接着就可以和普通代码一样,配置,编译,安装了(注意:有些库可能可以配置参数 ...
- (转)C#操作Word文档
原文1地址:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 原文2地址: http://www.cnblogs.com ...
- jquery选择器筛选器
jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...