Vue.js基础（一）
Vue.js的雏形：
数据绑定：
1，单向 {{输出}} 数据=>视图
2，双向 v-model 数据<=>视图
3，{{*msg}} 数据只绑定一次
4， {{{msg}}} HTML转意输出
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}}
</div>
</body>
Vue.js指令
相当于扩展html标签功能,属性
v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；
v-show 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none";
实现div显示隐藏功能
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
a:true
},
methods:{
fnShowHide() {
this.a=!this.a;
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="显示隐藏" @click="fnShowHide" >
<div style="width:100px; height:100px; background: red" v-show="a"> </div>
</div>
</body>
循环：
数组重复，无法循环问题？
track-by='索引' 提高循环性能也可以指定其他的数据
{{$index}} 下标索引 {{$key}} 键值
可以循环数组和Json
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<ul>
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
</div>
</body>
过滤器
-> 过滤模板数据
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
}
});
};
</script>
</head>
<body>
<div id="box">
{{|currency '￥'}}
</div>
</body>
系统提供一些过滤器:
{{msg| filterA 参数}}
uppercase 转大写字母
lowercase 转小写字母
currency 美元符号
属性:
width/height/title v-bind:src=""
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
事件：
事件对象: $event 参数可以得到一个事件对象
@click="show($event)"
$event ev.keyCode 获得键码编号
键盘:
@keydown @keyup
常用键:
回车 a) @keyup.13 b) @keyup.enter
@keyup/keydown.left @keyup/keydown.right
@keyup/keydown.up @keyup/keydown.down
默认行为(默认事件):
阻止默认行为: 点击右键不会出现菜单
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
数据交互：
this.$http.get()/post()/jsonp()
this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
跨域访问百度URL
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
文章还有不足随时可能更新！
Vue.js基础（一）的更多相关文章
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Vue.js基础拾遗
本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- Vue.js基础语法（三）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 记录21.07.22 —— Vue.js基础（一）
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
- 一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- Vue.js 基础示例
为 Vue.js 初学者写了一些简单的示例,在线示例 示例源码 了解更多请查看 Vue.js 官网文档:http://vuejs.org.cn/guide/
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
随机推荐
- 前端实现在线预览pdf、word、xls、ppt等文件
最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...
- xe5 android sample 中的 SimpleList 是怎样绑定的 [转]
C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile 例子中的绑定方式如下图: 1.拖拽一个listview到界面上,然 ...
- c#程序退出
Environment.Exit(0); Process.GetCurrentProcess().Kill();
- switch case语句重点概况
witch-case语句格式如下: switch(变量){ case 变量值1: //; break; case 变量值2: //...; break; ... case default: //... ...
- 关于Tomcat配置虚拟路径保存、访问图片
在项目中往往需要上传一些图片文件之类,一般不建议直接保存在数据库内,往往是讲图片等资源保存在服务器的某个文件夹下,传统做法是上传到部署目录下,通过相对路径进行访问. 这样当我们系统需要进行升级,进行全 ...
- 【Spring学习笔记-3】国际化支持
[Spring]国际化支持 一.总体结构: 两个国际化资源中的内容: 二.程序 2.1 配置Spring上下文 beans.xml文件 <?xml version="1.0" ...
- Hadoop概念学习系列之Hadoop新手学习指导之入门需知（二十）
不多说,直接上干货! 零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.从一开始什么都不懂,到能够搭建集群,开发.整个过程,只要有Linux基础,虚拟机化和java基础,其实hadoo ...
- 【C#】C#操作Excel文件(转)
实现C#与Excel文件的交互操作,实现以下功能: 1.DataTable 导出到 Excel文件 2.Model数据实体导出到 Excel文件[List<Model>] 3.导出数据到模 ...
- PAT 乙级 1076 Wifi密码 (15)
下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用wifi,又怕耽误亲们的学习,现将wifi密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一换.谢 ...
- HiveQL详解
Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构化的数据文件映射为一张数据库表,并提供完整的SQL查询 ...