Vue.js系列之一初识Vue
时间:2022-04-24
本文章向大家介绍Vue.js系列之一初识Vue,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助
1、 Vue.js !important
2、界面之下:还原真实的MV*模式 !important
本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础.
一、声明式渲染
1、实现Hello World的功能
还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现
<body>
<div id="tDiv">
{{message}}
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:{
message:"hello World By Vue!"
}
});
</script>
此时Vue已经将Dom和数据进行了绑定,所有的元素会随着数据的改变而改变,打开当前页面的控制台,在控制台中改变数据,如下图:
2、通过Vue给Html标签添加属性
<body>
<div id="test" v-bind:title="message" v-bind:class="message" v-bind:id="message" v-bind:data-id="message" v-bind:src="message" v-bind:href="message" v-bind:align="message">
{{message}}
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#test",
data:{
message:"啦啦啦"
}
});
</script>
同样的,通过控制台修改数据的时候,dom元素也会发生相应的改变.自行实现
二、条件与循环(if语句和for语句在Vue中的使用方式)
1、使用vue的类if语句功能
通过v-if条件指令控制元素的显示隐藏,代码如下:
<body>
<div id="tDiv" v-if="seen">
显示
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:{
message:'页面加载于 ' + new Date().toLocaleString(),
seen:true
}
});
</script>
同样在控制台中修改对应的数据,如下图:
结论:上面的例子展示了Vue.Js不仅能将Dom文本绑定到数据,还能将Dom结构绑定到数据
2、使用vue的类for功能
通过v-for指令来遍历数据集合进行展示,代码如下:
<body>
<div id="tDiv">
<ul v-for="model in list">
<li>{{model.name}}</li>
</ul>
</div>
</body>
<script>
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:{
list:[
{id:1,name:"张三"},
{id:2,name:"李四"},
{id:3,name:"王五"}
]
}
});
</script>
在控制台中给list追加数据,如下图:
会发现ul列表中会多出一条数据,如下图:
三、事件监听
Vue提供了监听Js原生事件的机制,代码如下:
<body>
<div id="tDiv">
<p>{{message}}</p>
<input type="button" v-on:click="resetPContent" value="点我有惊喜">
</div>
</body>
<script>
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:{
message:"Hello World By Vue"
},
methods:{
resetPContent:function(){
this.message=this.message.split('').reverse().join(''); //reverse颠倒数据元素的顺序
}
}
});
</script>
点击之后,如下图:
注意在resetPContent方法中,更改了数据,相当于改变了应用程序的状态,但是注意这里没有任何操作dom元素的代码,因为所有的dom操作都由vue来进行,这里我们主需要关心数据源.更新dom的操作都由vue来进行.
四、表单输入和应用状态之间的双向绑定
通过v-model指令来实现表单输入和应用状态之间的双向绑定,代码如下:
<body>
<div id="tDiv">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
</body>
<script>
var currentPage=new Vue({
el:"#tDiv", //指定绑定的目标dom元素的Id
//绑定数据源
data:{
message:"Hello World By Vue"
}
});
</script>
- PHP高级编程之守护进程
- Spring boot with Docker
- Spring boot with Service
- Spring boot with PostgreSQL
- Struts2 S2-046, S2-045 Firewall(漏洞防火墙)
- 应用程序的通信成本
- Spring cloud 之 Feign Client
- Spring Cloud Netflix
- 重新整理AUTO_INCREMENT字段
- Spring Cloud Config
- Spring boot with Schedule (启用/禁用)
- DevOps Tools
- Docker 虚拟机之 Redis
- Spring boot with HTTPS SSL
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C++ 万字长文第二篇---拿下字节面试
- mysqldump命令详解 Part 9 --hex-blob 参数的使用
- 使用XtraBackup备份MySQL 8.0 Part 2 XtraBackup权限及配置
- 使用XtraBackup备份MySQL 8.0 Part 6 对数据库进行增量备份
- ArrayList源码阅读笔记
- 3分钟短文 | Laravel表单验证没规则可用?你试试自定义,真香!
- 【C#】DataGridView 数据绑定的一些细节
- 3分钟短文 | Laravel 查询结果检查是不是空,5个方法你别用错!
- 使用XtraBackup备份MySQL 8.0 Part 7 对增量备份进行恢复
- 3分钟短文 | Laravel 日志全程记录 SQL 查询语句,要改写底层?
- MySQL InnoDB表空间加密
- 微信小程序自动化测试最佳实践(附 Python 源码)
- 3分钟短文 | MySQL在分组时,把多列合并为一个字段!
- Redis Linux系统参数最佳配置
- 实现Promise其它API