前端-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) 前 ...
随机推荐
- 『居善地』接口测试 — 7、Requests库使用proxies代理发送请求
目录 1.代理的了解 2.代理的分类 (1)正向代理 (2)反向代理 (3)总结 3.Requests库使用代理 4.总结 1.代理的了解 在上图中我们可以把Web server看成是Google服务 ...
- Could not get JDBC Connection排查
最近在维护的一个比较旧的项目,发现总是隔一段时间JDBC就报错: Could not get JDBC Connection; nested exception is org.apache.commo ...
- GEMM与AutoKernel算子优化
GEMM与AutoKernel算子优化 随着AI技术的快速发展,深度学习在各个领域得到了广泛应用.深度学习模型能否成功在终端落地应用,满足产品需求,一个关键的指标就是神经网络模型的推理性能.一大波算法 ...
- 三色标记法与读写屏障, G1工作过程
https://www.jianshu.com/p/12544c0ad5c1 https://www.cnblogs.com/GrimMjx/p/12234564.html 自我总结和记忆: 为了解决 ...
- 【渗透实战】sqlmap_修改tamper脚本_绕过WAF_第三期
/文章作者:Kali_MG1937 CSDN博客号:ALDYS4 QQ:3496925334/ 今天google找注入点的时候发现某企业一个挺有意思的waf 常规操作绕过去后决定写一篇博客 信息收集 ...
- 【NX二次开发】Block UI 列表框
属性说明 常规 类型 描述 BlockID String 控件ID Enable Logical 是否可操作 Group Logical ...
- Unicode编码转换， MD5加密，URL16进制加密解密
一.站长网址:http://www.msxindl.com/ 1.Unicode与中文互转 16进制Unicode编码转换.还原 :http://www.msxindl.com/tools/uni ...
- 认识5G
认识5G 一 移动通信发展历程 1移动通信技术具有代际演进规律 "G"代表一切 每10年一个周期 二 5G技术指标 流量密度:单位面积内的总流量数,是衡量移动网络在一定区域范围 ...
- 深入理解 sync.Once 与 sync.Pool
深入理解 sync.Once 与 sync.Pool sync.Once 代表在这个对象下在这个示例下多次执行能保证只会执行一次操作. var once sync.Once for i:=0; i & ...
- Spring WebFlux 教程：如何构建反应式 Web 应用程序
Spring WebFlux 教程:如何构建反应式 Web 应用程序 反应式系统提供了我们在高数据流世界中所需的无与伦比的响应能力和可扩展性.然而,反应式系统需要经过专门培训的工具和开发人员来实现这些 ...