前端-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) 前 ...
随机推荐
- 排查利器：Tcpdump抓包 & Wireshark解析
在工作这一块,免不了和其他开发人员打交道.比如,和其他部门 or 公司联调,甚至是和自己部门的人联调的时候.这时候,对接问题就很容易暴露出来,特别是Tcp/Udp会话的时候,很容易就会呈现出公说公有理 ...
- logstash收集时filebeat区分日志
logstash收集时filebeat区分日志 1.场景 filebeat在服务器中同时收集nginx和web项目日志,需要对两个日志在logstash中分别处理 2.版本区别 ==6.x之前 ...
- 整数划分——区间dp（石子合并）
这不是将一个数以一来划分,而是把一个整数以位来划分 题目描述 如何把一个正整数N(N长度<20)划分为M(M>1)个部分,使这M个部分的乘积最大.N.M从键盘输入,输出最大值及一种划分方式 ...
- 智能驾驶L2发展策略
智能驾驶L2发展策略 智能驾驶L2,以们通俗的定义是,以高级辅助驾驶的产品为主的各种巡航产品,包括定速巡航,自适应巡航ACC,预见性巡航,智能巡航等等. 车辆驾驶是集注意力高度集中,手把控方向盘和换挡 ...
- 编译器设计-RunTime运行时环境
编译器设计-RunTime运行时环境 Compiler Design - Run-Time Environment 作为源代码的程序仅仅是文本(代码.语句等)的集合,要使其活动,它需要在目标计算机上执 ...
- 如何运行具有奇点的NGC深度学习容器
如何运行具有奇点的NGC深度学习容器 How to Run NGC Deep Learning Containers with Singularity 高性能计算机和人工智能的融合使新的科学突破成为可 ...
- 35 张图带你 MySQL 调优
这是 MySQL 基础系列的第四篇文章,之前的三篇文章见如下链接 138 张图带你 MySQL 入门 47 张图带你 MySQL 进阶!!! 炸裂!MySQL 82 张图带你飞 一般传统互联网公司很少 ...
- 最全JVM知识点思维导图,看这一篇就够了
此处是转发别人的,别人花了二个月, 我花一天时间看完, 觉得很有用 https://www.processon.com/view/link/5eea141cf346fb1ae56a44e7
- 即时性能分析工具 Pyroscope
当网站上线后,流量增加或短暂功能故障,都会造成使用者体验相当不好,而这时该怎么快速找到性能的瓶颈呢?通常 CPU 达到 100% 时,有时候也很难复制及找出关键问题点. 本篇文章,我们会介绍一套工具叫 ...
- Redundant Paths 分离的路径
Redundant Paths 分离的路径 题目描述 为了从F(1≤F≤5000)个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树．奶牛们已经厌倦了被迫走某一条路,所以她 ...