前端-Vue基础1
Vue核心思想：只要改变数据，页面就会发生改变
1.引入vue
1.下载vue.js
2.在script标签的src属性中，引入vue.js
<script src="js/vue.js"></script>
2.vue实例
el：vue接管的div元素，注：只能接管一个div，所有需要vue处理的，必须写在这个div中
data：数据
methods：方法
new Vue({
//接管一个div
el:'#app',
data:{
msg:'test',
count:0,
url:'https://www.baidu.com',
classes:['box','bg'],
phoneNumber:10086,
// games:['绝地求生','英雄联盟','王者荣耀']
//games:{"name":"绝地求生","company":'dfsfs'}
games:[{"name":"绝地求生"},{"name":"英雄联盟"},{"name":"王者荣耀"}]
},
methods:{
change:function () {
this.msg='fdsfsf'
},
changeclass:function () {
this.classes=['bg']
}
}
})
3.v-show和v-if
接口测试平台，成功，失败，根据后台返回的结果状态，显示对应的文案
v-show 如果条件为False，则对标签加display=none
v-if 只有符合条件的才加载
<body>
<div id="app">
<span v-if="phoneNumber==10086">移动</span>
<span v-else-if="phoneNumber==10010">联通</span>
<span v-else>电信</span>
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
phoneNumber:10086
}
})
</script> </body>
<body>
<div id="app">
<span v-show="phoneNumber==10086">移动</span>
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
phoneNumber:10010
}
})
</script> </body>
4.v-on:click (绑定事件)
全写：v-on:click
简写：@click
click对应的方法是methods的方法
<body>
<div id="app">
{{msg}}
<input type="button" value="denglu" @click="change">
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
phoneNumber:10010,
msg:'v-on:click test'
},
methods:{
change:function () {
this.msg = 'change text'
}
}
})
</script> </body>
5.v-bind（标签属性绑定）
全写：v-bind:href
简写：href
可以使用data中的数据
class的样式绑定
<body>
<div id="app">
<!-- {{url}}这种只能用于两个标签中，属性中不能使用，如果属性中要使用，则要用v-bind，简写：-->
<a :href="url">{{url}}</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
phoneNumber:10010,
msg:'v-on:click test',
url:'https://www.baidu.com'
},
methods:{
change:function () {
this.msg = 'change text'
}
}
})
</script> </body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
background-color: blue;
width: 100px;
height: 200px;
}
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div :class="classes"></div>
<!-- is_bg:true显示，is_bg：false不显示-->
<div :class="{bg:is_bg}"></div>
<input type="button" value="change-Class" @click="changeClasses">
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
phoneNumber:10010,
msg:'v-on:click test',
url:'https://www.baidu.com',
classes:['bg','box'],
is_bg:true
},
methods:{
change:function () {
this.msg = 'change text'
},
changeClasses:function () {
this.classes = ['bg'] } }
})
</script> </body>
6.v-for（循环）
v-for支持list，map
要循环哪个标签，就将v-for写在那个标签上
<body>
<div id="app">
<!-- v-for list-->
<ul>
<li v-for="(game,index) in games">{{index}}-{{game}}</li>
</ul> <!-- v-for map-->
<ul>
<li v-for="(value,key) in games1">{{key}}--{{value}}</li>
</ul> <ul>
<li v-for="game1 in games2">{{game1.name}}</li>
</ul>
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
games:['绝地求生','英雄联盟','王者荣耀'],
games1:{"name":"绝地求生","company":'dfsfs'},
games2:[{"name":"绝地求生"},{"name":"英雄联盟"},{"name":"王者荣耀"}]
},
methods:{
change:function () {
this.msg = 'change text'
},
changeClasses:function () {
this.classes = ['bg'] } }
})
</script> </body>
显示结果如图所示：
7.v-model（双向数据绑定）
通过修改标签 例：切换radio、checkbox...都会对data中绑定的数据有影响。
通过事件触发方法，修改data中数据，反向作用域radio、checkbox.....
a)、input
<body>
<div id="app">
<div>{{input_value}}</div>
<input type="text" v-model="input_value">
<input type="button" value="change" @click="change">
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
input_value:'default'
},
methods:{
change:function () {
this.input_value='change text'
} }
})
</script> </body>
效果如图所示：
b)、radio
<div id="app">
<div>{{sex}}</div>
<input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="2" v-model="sex">女
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
sex:'1'
},
methods:{ }
})
</script> </body>
显示效果如图所示：
c)、checkbox —> value 配置成 [] 用于存储选择的多个数据
<body>
<div id="app">
<div>{{movies}}</div>
<input type="checkbox" name="movie" value="钢铁侠" v-model="movies">钢铁侠
<input type="checkbox" name="movie" value="复仇者联盟" v-model="movies">复仇者联盟
<input type="checkbox" name="movie" value="蜘蛛侠" v-model="movies">蜘蛛侠
<input type="checkbox" name="movie" value="绿巨人" v-model="movies">绿巨人 </div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
movies:[]
},
methods:{ }
})
</script> </body>
显示效果如图：
d)、select —> value 配置成 str
<body>
<div id="app">
<div>{{movie}}</div>
<select v-model="movie">
<option disabled value="">请选择</option>
<option value="钢铁侠" >钢铁侠</option>
<option value="复仇者联盟" >复仇者联盟</option>
<option value="绿巨人" >绿巨人</option>
</select> </div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
movie:'钢铁侠'
},
methods:{ }
})
</script> </body>
<body>
<div id="app">
<div>{{movie}}</div>
<select v-model="movie">
<option disabled value="">请选择</option>
<option v-for="option in options" :value="option.id">{{option.name}}</option>
</select> </div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
movie:2,
options:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}]
},
methods:{ }
})
</script> </body>
前端-Vue基础1的更多相关文章
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- [前端] VUE基础 (9) (element-ui、axios、Vuex)
一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue ...
- [前端] VUE基础 (8) (vue-cli脚手架)
一.安装vue-cli脚手架 官方文档:https://cli.vuejs.org/zh/guide/cli-service.html Vue CLI 的包名称由 vue-cli改成了 @vue/c ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- 前端-Vue基础3（父子组件交互）
1.子组件往父组件传值 点击子组件的值,子组件自增,父组件的值也跟着自增 通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法 点击子组件触发cli ...
- 前端-Vue基础2
1.过滤器 前台通过后台传值,要对后台传过来的变量进行特殊处理,比如根据id转成中文等: 1.1 局部过滤器 局部过滤器只针对一个Vue实例 默认将|左侧count传递给右侧方法 {{count|fi ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
随机推荐
- 使用 JavaScript 将 HTML 转换为 PDF
使用 JavaScript 将 HTML 转换为 PDF 更多相关学习资料参见http://www.pdfdownload.cn/b/ba_index.php 在本文中,我们将了解如何在浏览器(即完全 ...
- .net core 使用阿里云分布式日志
前言 好久没有出来夸白了,今天教大家简单的使用阿里云分布式日志,来存储日志,没有阿里云账号的,可以免费注册一个 开通阿里云分布式日志(有一定的免费额度,个人测试学习完全没问题的,香) 阿里云日志地址: ...
- Azure DevOps（二）利用Azure DevOps Pipeline 构建基础设施资源
一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...
- arm，asic，dsp，fpga，mcu，soc各自的特点
arm,asic,dsp,fpga,mcu,soc各自的特点 人工智能受到越来越多的关注,许多公司正在积极开发能实现移动端人工智能的硬件,尤其是能够结合未来的物联网应用,对于移动端人工智能硬件的实现方 ...
- video视频标签自定义显示隐藏播放控件&Shadow DOM
方法一:controlslist属性 controlslist="nodownload nofullscreen noremoteplayback" controlslist仅三种 ...
- MySQL索引简介（转）
一.为什么用索引例:先假设有一张表,表的数据有10W条数据,其中有一条数据是nickname='css',如果要拿这条数据的话需要写的sql是 SELECT * FROM award WHERE ni ...
- 【NX二次开发】指定矢量控件，记住上次选择的方向
block UI控件如果有RetainValue属性,就用这个属性.没有这个属性可以参考下面这种方法.以矢量控件为例: 1.在apply_cb回调中,将控件值保存到文本中 double TopForT ...
- MySQL分页查询limit踩坑记
1 问题背景 线上有一个批处理任务,会批量读取昨日的数据,经过一系列加工后,插入到今日的表中.表结构如下: 1 CREATE TABLE `detail_yyyyMMdd` ( 2 `id` bigi ...
- Binding(一):数据绑定
这节开始分几期来讲一下WPF中Binding的相关用法,本节主要讲使用Binding进行数据绑定. Binding的作用 在WinForm中,我们要想对控件赋值,需要在后台代码中拿到控件对象进行操作, ...
- PTA4题学习总结
前言: 这是我20多年以来第一次写博客了,还是在学校里那可(牛)爱(逼)的Java老师的安(逼)慰(迫)下,含泪写下第一篇博客,大家应该都明白这种含泪写下的佳(废)作(品)是多么的动人的. 就不开玩笑 ...