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 ...
随机推荐
- Go语言加解密--AES简单实践
AES加解密的简单实现,代码如下. package main import ( "crypto/aes" "crypto/cipher" "encod ...
- C#:memcached安装及.NET中的Memcached.ClientLibrary使用详解
memcached分布式缓存的负载均衡配置比例,数据压缩,socket的详细配置等,以及在.net中的常用方法. 下载地址:http://pan.baidu.com/s/1yVILw 提取 ...
- VMware Ubuntu配置虚拟机和主机互相ping通
安装VMware后,主机会有两个虚拟网卡: vmnet1和vmnet8是两个虚拟网卡,主要作用是让虚拟机可以通过你的宿主机的网线上网.注意:如果有“!”,说明不能用. vmnet1是为host-on ...
- 用monit监控mongodb，崩溃后自动重启mongdb
什么是monit Monit是一个跨平台的用来监控Unix/linux系统(比如Linux.BSD.OSX.Solaris)的工具.Monit特别易于安装,而且非常轻量级(只有500KB大小),并且不 ...
- 响应json去除参数值为空的参数-springboot配置
1.添加jackson相关依赖 <!--jackson 开始--><dependency> <groupId>com.fasterxml.jackson.core& ...
- Vivado中ILA的使用
Vivado中ILA的使用 1.编写RTL代码 其中需要说明的是(* keep = "TRUE" *)语句的意识是保持cnt信号不被综合掉,方便以后的调试,是否可以理解为 ...
- JavaScript学习总结（一、变量、for和for-in循环）
一.变量 全局对象: 1. 每个javascript环境都有一个全局对象,在任意函数外都能用this访问到这个全局对象. 此外,该全局对象有一个附加属性window,通常这个window也指该全局对象 ...
- .net 4.0 程序遇到 停止工作 appcrash ,kernelbase.dll 等提示
经测试,删除*.exe.config 中 <supportedRuntime version="v4.0" sku=".NETFramework,Version=v ...
- C#中全局处理异常方式
using System; using System.Configuration; using System.Text; using System.Windows.Forms; using ZB.Qu ...
- Visual Studio 2019/2017 安装使用教程（快速上手版）
目录 Visual Studio 2017 安装使用教程(详细) 在此鸣谢范华对本文工作的大力支持 一.下载 二.安装 2017版本新建项目过程 2019版本新建项目过程 然后你就可以简单编写一段代码 ...