前端-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) 前 ...
随机推荐
- Zabbix企业分布式监控工具
前言:在工作中常常需要对服务器进行监控,但是要选择一款合适监控软件可不容易,今天介绍下zabbix这款监控软件 一.Zabbix介绍1.Zabbix是一个企业级的.开源的.分布式的监控套件2.Zabb ...
- [源码解析] 深度学习分布式训练框架 Horovod (1) --- 基础知识
[源码解析] 深度学习分布式训练框架 Horovod --- (1) 基础知识 目录 [源码解析] 深度学习分布式训练框架 Horovod --- (1) 基础知识 0x00 摘要 0x01 分布式并 ...
- Linux实现ffmpeg H.265视频编码
Linux实现ffmpeg H.265视频编码 几乎所有观看的视频,数字地面电视,电缆,卫星或互联网上的压缩.原始的,未压缩的视频太大,会浪费太多的带宽.在DVD和Blu-ray之前,有视频CD(VC ...
- nvGRAPH API参考分析（一）
nvGRAPH API参考分析(一) 本文通过描述nvGRAPH库函数的输入/输出参数,数据类型和错误代码来指定其行为. 1. 返回值nvgraphStatus_t 除以下内容外,所有nvGRA ...
- NSight Compute 用户手册（上）
NSight Compute 用户手册(上) 非交互式配置文件活动 从NVIDIA Nsight Compute启动目标应用程序 启动NVIDIA Nsight Compute时,将出现欢迎页面.单击 ...
- TensorRT 7.2.1 开发概要（下）
TensorRT 7.2.1 开发概要(下) 1.2. Where Does TensorRT Fit? 一般来说,开发和部署深度学习模型的工作流要经过三个阶段. Phase 1 is trainin ...
- 反应式系统实现MQTT客户机
反应式系统实现MQTT客户机 Implementing an MQTT client for reactive systems MQTT Reactive是从LiamBindle的MQTT-C库派生的 ...
- C++/VS基础篇
------------恢复内容开始------------ VS: 1.项目配置 2.IDE设置 错误列表是输出窗口的大概,根据error语法整理出,不准确. C++: 1.C++特点 优点 可直接 ...
- 狂神说redis笔记（三）
八.Redis.conf 容量单位不区分大小写,G和GB有区别 可以使用 include 组合多个配置问题 网络配置 日志 # 日志 # Specify the server verbosity le ...
- 简单理解数据库连接池（JDBC）
为什么要使用连接池? 在我们写代码的时候,写了很多类,假如这些类都和数据库打交道.这样的话每个类都要去获取数据库连接,操作完了之后就把连接释放了. 要知道,获取数据库连接的操作其实是向操作系统底层去获 ...