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 ...
随机推荐
- ESP8266 ESP-01调试方法
1. 用AMS1117搭建一个3.3V输出的电路 2. ESP8266 ESP-01接线 只要连接UTXD.GND.CH_PD.VCC.URXD这五个管脚就可以直接使用了. 注意的是CH_PD要接高电 ...
- org.apache.ibatis.binding.BindingException: Invalid bound statement
idea中出现了这个问题 我的解决方案是: 把mapper映射文件放到资源目录下 然后就行了. 当然,这个具体原因就是:mapper.xml和接口对不上引起的,具体问题还要具体解决 协助博客:http ...
- Using the SDRAM on Altera’s DE1-SoC Board with Verilog Designs
Using the SDRAM on Altera’sDE1-SoC Board with Verilog Designs 1.DE1-SOC Board上SDRAM资源 2.系统架构框图 3.关于S ...
- messageBox 的几种显示方式
1.最简单的,只显示提示信息 MessageBox.Show("Hello~~~~"); 2. 可以给消息框加上标题. MessageBox.Show("There ar ...
- 解决 VUE 微信登录验证 【感谢原文：https://segmentfault.com/a/1190000009493199】
[感谢原文:https://segmentfault.com/a/1190000009493199] SPA单页应用中微信授权登录的一点思路 单页应用应该如何解决微信授权登录的尴尬跳转?后退无法返回? ...
- Maven Docker部署
镜像构建方式 docker-maven-plugin插件构建docker镜像有两种方式: 1. 指定参数,由docker-maven-plugin插件根据这些参数来制作镜像: 2. 指定Dockerf ...
- JavaScript压缩代码解压缩还原具体办法
我们知道许多网站都对Javascript代码进行了压缩,但这对开发者和学习者来说,读起来很费劲,本文分享给大家在Chrome浏览器中,如何使用Pretty Print功能反压缩JS代码,让代码更加直观 ...
- java读写操作心得
一.获得控制台用户输入的信息 public String getInputMessage() throws IOException...{ System.out.println ...
- 对poi-Excel导入的浅层理解
本文即将对POI方式导入excel文件最核心的步骤予以说明,为的是简单,也是为了阐明文件导入的原理. 文件导入有一个很明显的线索: 1.首先是我们知道硬盘中的文件,即:文件对象File file 2. ...
- Ubuntu 14.10 下Hadoop 错误集
1 FATAL org.apache.hadoop.ha.ZKFailoverController: Unable to start failover controller. Parent znode ...