VUE基础 · 绑定（1）
前端三大框架：Angular.js、React.js、Vue.js，目前最热的是Vue，并且使用的热度还在递增中。
Vue已经将操作页面的方法封装好，我们只需要对数据进行修改就可以完成页面的显示。Vue核心思想：只要改变数据，页面就会发生改变
Vue的Js源码库：https://v2.cn.vuejs.org/v2/guide/installation.html
一、导入VUE
<script src="https://unpkg.com/vue/dist/vue.js"></script>
vue实例
- el：vue接管的div元素，注：只可以接管一个div，所有需要vue处理的，必须需要这个div内。
- data：存放数据
- methods：方法
二、标签关联Vue
1、div标签关联vue
<body>
<!-- VUE只能接管一个div-->
<div id="app"> <!--模板语言-->
{{msg}} </div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test'
}
})
</script>
</body>
展示：
已把msg的值渲染到了页面中
2、input标签关联vue中methods
<body>
<!-- VUE只能接管一个div-->
<div id="app"><input type="button" @click="login" value="登录">
</div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script> //创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test'
},
//存储所有的vue的方法
methods:{
login:function () {
//this代表Vue这个对象，下边是取到了data中的msg
alert(this.msg) } }
}) </script>
</body>
展示：
三、指令
带有v-的在vue中叫做指令，就是声明Vue中的指令，指令实际就是vue封装的一些Js操作方法，当数据值发生变更后，将其产生的影响，作用与DOM中，创建的指令v-bind、v-on、v-if、v-for
1、v-on（绑定事件）
- 全写模式：v-on:click
- 简写模式：@click（推荐使用）
click对应的方法是：methods中的方法
<body>
<!-- VUE只能接管一个div-->
<div id="app"> <!--模板语言-->
{{msg}}---{{count+1}} <input type="button" @click="login" value="登录"> </div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script> //创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test',
count:0
},
//存储所有的vue的方法
methods:{
login:function () {
//this代表Vue这个对象，下边是取到了data中的msg
this.msg='v-on方法'
}
}
}) </script>
</body>
点击【登录】前：
点击【登录】后：
2、v-bind（标签属性绑定）
- 全写模式 v-bind:href
- 简写模式 :href
可以绑定方法中的data的数据使用
在魔板语言中，我们可以通过 {{ data }} 的形式将data中的数据渲染到页面上，如果我们将data中的属性赋值给标签的属性时，就不能用 {{ data }} 格式来写了，而是需要用到属性来绑定：
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!-- 完整写法 -->
<a v-bind:href="url">百度</a> <!-- 缩写-->
<a :href="url">跳转到百度地址</a> </div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script> //创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test',
count:0,
url:'http://www.baidu.com'
},
//存储所有的vue的方法
methods:{
login:function () {
//this代表Vue这个对象，下边是取到了data中的msg
this.msg='v-on方法'
}
}
}) </script>
</body>
（1）class中数组的绑定方式
<head>
<meta charset="UTF-8">
<title>学无止境</title> <style>
.bg{
background-color: aqua;
width: 100px;
height: 100px;
}
.box{
border: 2px red solid;
}
</style> </head>
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--动态的css绑定-->
<!--方式1：直接绑定-->
<div :class="['bg','box']"></div> <!--方式2：关联绑定-->
<div :class="classes"></div>
</div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
classes:['bg','box']
},
//存储所有的vue的方法
methods:{
}
}) </script>
</body>
练习：
需求：通过点击【按钮】把上边图片的红色边框去掉
<head>
<meta charset="UTF-8">
<title>学无止境</title> <style>
.bg{
background-color: aqua;
width: 100px;
height: 100px;
}
.box{
border: 2px red solid;
}
</style> </head>
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--关联绑定-->
<div :class="classes"></div>
<!--绑定方法，通过点击把【classes】替换成只有：bg属性-->
<input type="button" value="changeClass" @click="changeClass">
</div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
classes:['bg','box']
},
//存储所有的vue的方法
methods:{
changeClass:function () {
this.classes = ['bg']
}
}
}) </script>
</body>
（2）绑定class，{}方式绑定（class属性字典的写法）
<head>
<meta charset="UTF-8">
<title>学无止境</title> <style>
.bg{
background-color: aqua;
width: 100px;
height: 100px;
}
.box{
border: 2px red solid;
}
</style> </head>
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--关联绑定 bg、box为false时,也可引用变量is_bg、is_box，则不展示该属性 -->
<div :class="{bg:true,box:true}"></div>
</div>
<!--导入-->
<script src="../js/vue.js"></script> <!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
classes:['bg','box'],
is_bg:true,
is_box:true
},
//存储所有的vue的方法
methods:{
changeClass:function () {
this.classes = ['bg']
}
}
}) </script>
</body>
（3）绑定class（class属性数组的写法）
<!--数组的写法中，每个值代表一个样式，所以要写成字符串-->
<p v-bind:class="['blue','red']">蓝色字体红色背景色</p>
<!--如果isBlue为真，则blue显示，否则为空，则不显示-->
<p v-bind:class="[isBlue?'blue':'','red']">蓝色字体红色背景色</p
VUE基础 · 绑定（1）的更多相关文章
- vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
随机推荐
- 浅谈flume
flume做日志收集的工具,将数据源导入到指定目标中.flume之间可以相互连接组件 source:如何从数据源中取数据,可以认为是两种主动source(主动取数据)和被动source(推给so ...
- 在使用IDEA提交git代码时,如何修改提交者的名字
在Terminal终端中输入 git config user.name git config --global user.name "xl"
- CVE-2020-1938 Tomcat AJP漏洞复现
一 漏洞环境 # vulhub靶场地址 https://github.com/vulhub/vulhub靶场还需要有python环境,pip,docker docker-composeGitHub上 ...
- Section 2.1: Falsy VSTruthy Value and == VS ===
Falsy VS Truthy Value and == VS === Falsy values: undefined, null, 0, '', NaN Truthy values: Not fal ...
- 安装kvm后，在windows主机启动virt-manger后报错(no polkit agent available to authenticate action org.libvirt.unix.manage)
解决方法如下: 1. 增加libvirtd用户组 groupadd libvirtd 2.在你使用的普通用户界面执行 sudo usermod -a -G libvirtd $USER 3.设置启动 ...
- kali对安卓的渗透（内网穿透）
前言:随着移动端的增加,安卓占比巨大,人们对手机的安全防范意识薄弱,手机为了人们更加的方便,缺乏防护软件,甚至好多木马不需要做免杀. 现在我来做安卓的渗透,不需要在内网也能进行,实现了内网穿透.(有公 ...
- DPU02是一个高度集成的USB转UART的桥接控制器
DPU02是一个高度集成的USB转UART的桥接控制器,该产品提供了一个简单的解决方案,可将RS-232设计更新为USB设计,并简化PCB组件空间.该DPU02包括了一个USB 2.0全速功能控制器. ...
- hive元起动报错：Exception in thread "main" java.lang.NoSuchMethodError: com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V
错误原因: 1.系统找不到这个类所在的jar包 2.jar包的版本不一样系统不知道使用哪个. hive启动报错的原因是后者 解决办法: 1.com.google.common.base.Precond ...
- pyg安装
pyg官网:pytorch_geometric documentation (pytorch-geometric.readthedocs.io) win安装pyg各种报错,原因在于pytorch和py ...
- linux合并bilibili下载的blv视频
B站下载的学习视频,用python+sh合并处理,自己mark一下 手机bilibili下载了视频,想要搞到电脑上看,结果发现下载下来的都是文件夹里的一堆片段,仔细一看还是 .blv,脑那样啊! 在虚 ...