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 ...
随机推荐
- vs2015重新安装后，项目属性中的目标框架中没有framework4.6.1
vs2015重新安装后,安装完后 项目属性中的目标框架中没有framework4.6.1, 控制面板的程序和功能中存在该安装包. 原因: NDP461-DevPack-KB3105179-CHS.e ...
- sbt第一次运行下载jar包很慢解决办法
一.补充sbt配置文件,添加下载路径 文件结构如下:修改了sbtconfig.txt,repo.properties. sbtconfig.txt配置内容为: # Set the java args ...
- golang语言并发与并行——goroutine和channel的详细理解（一） 转发自https://blog.csdn.net/skh2015java/article/details/60330785
如果不是我对真正并行的线程的追求,就不会认识到Go有多么的迷人. Go语言从语言层面上就支持了并发,这与其他语言大不一样,不像以前我们要用Thread库 来新建线程,还要用线程安全的队列库来共享数据. ...
- linux在线中文手册
linux在线中文手册 http://linux.51yip.com/ 百度中的百度应用也不错 http://www.baidu.com/s?word=linux%E5%91%BD%E4%BB%A4& ...
- Linux配置Python默认版本
我们知道在Windows下多版本共存的配置方法就是改可执行文件的名字,配置环境变量. Linux中的配置原理差不多,思路就是生成软链接,配置到环境变量. 在没配置之前,我的Ubuntu中安装了pyth ...
- [原创] 抛弃vboot不格盘用Grub4dos+Winvblock或Firadisk安装Ghost版XP到VHD，轻松RAMOS!
[原创] 抛弃vboot不格盘用Grub4dos+Winvblock或Firadisk安装Ghost版XP到VHDhttp://bbs.wuyou.net/forum.php?mod=viewthre ...
- 【linux】之常用命令-杂项
查看端口:lsof -i :80 二.内存大小[root@xbidc ~]# cat /proc/meminfo |grep MemTotalMemTotal: 1034612 kB[root@xbi ...
- TCP/IP学习20180624
计算机要互相通信.要有标准. TCP/IP协议,很多协议在一起.所以也叫TCP/IP协议族.经常接触的也就十几种. TCP/IP协议族按层次分为四层: 应用层(最上一层,http,ftp,pop3,i ...
- HTML-Ronoob-基础教程：HTML 字符实体
ylbtech-HTML-Ronoob-基础教程:HTML 字符实体 1.返回顶部 1. HTML 中的预留字符必须被替换为字符实体. HTML 实体 在 HTML 中,某些字符是预留的. 在 HTM ...
- centos6.5制作OpenStack云平台Windows7镜像
# yum install virt-manager libvirt qemu-img virt-viewer -y # vi /etc/libvirt/qemu.conf # service lib ...