前端-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) 前 ...
随机推荐
- Hadoop 基石HDFS 一文了解文件存储系统
@ 目录 前言:浅谈Hadoop Hadoop的发展历程 1.1 Hadoop产生背景 1.引入HDFS设计 1.1 HDFS主要特性 2.HDFS体系结构 HDFS工作流程机制 1.各个节点是如何互 ...
- Python Xpath语法
Python Xpath语法 一.选取节点 常用的路劲表达式: 表达式 描述 实例 nodename 选取nodename节点的所有子节点 xpath('//div') 选取了div节点 ...
- Step By Step(C调用Lua)
Step By Step(C调用Lua) 1. 基础: Lua的一项重要用途就是作为一种配置语言.现在从一个简单的示例开始吧. --这里是用Lua代码定义的窗口大小的配置信息 wid ...
- Steam游戏《Northgard（北境之地）》修改器制作
日期:2021.06.07 博客期:181 星期一 [温馨提示]: 我现在把资源先放到开头,不想研究学习的就直接取用.如果修改器失效了,你们可以在博客园本页直接评论,也可以给我发邮件告诉我,就是不要到 ...
- 给powershell增加类似于linux的alias功能
给powershell增加类似于快捷方式的功能(类似于linux的alias) 首先执行 set-executionpolicy remotesigned 允许powershell执行脚本 然后执行e ...
- 激光SLAM与视觉SLAM的特点
激光SLAM与视觉SLAM的特点 目前,SLAM技术被广泛运用于机器人.无人机.无人驾驶.AR.VR等领域,依靠传感器可实现机器的自主定位.建图.路径规划等功能.由于传感器不同,SLAM的实现方式也有 ...
- “ compiler-rt”运行时runtime库
" compiler-rt"运行时runtime库 编译器-rt项目包括: Builtins-一个简单的库,提供了代码生成和其他运行时runtime组件所需的特定于目标的低级接口. ...
- Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http://dubbo.apache.org/schema/dubbo]
dubbo的官方文档写的真好, http://dubbo.apache.org/zh-cn/docs/2.7/user/dependencies/ 在使用dubbo过程中的问题, 和解决 org.sp ...
- ES6中的变量结构赋值
小编的上一篇文章更新了es6中关于变量定义的问题,这篇文章继续来一些实用的干货,关于数组.对象的赋值问题.特别是在前后端合作项目的时候,对后端数据的拆分,还有就是对于函数的默认值的惰性赋值问题.看完下 ...
- Java IO学习笔记三：MMAP与RandomAccessFile
作者:Grey 原文地址:Java IO学习笔记三:MMAP与RandomAccessFile 关于RandomAccessFile 相较于前面提到的BufferedReader/Writer和Fil ...