Vue.js入门系列教程（二）
序言
过滤器：filter
全局过滤器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div> <script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
</body> </html>
定义格式化时间的全局过滤器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div> <script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
</body> </html>
定义私有过滤器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div> <script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
</body> </html>
字符串的padStart方法
自定义按键修饰符
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script> </head>
<body>
<div id="app">
<!--click事件-->
<input type="button" value="添加" @click="add()">
<!--enter事件-->
<input type="text" class="form-control" v-model="name" @keyup.enter="add()"> <!--f2键盘按键事件-->
<input type="text" class="form-control" v-model="name" @keyup.113="add()">
<input type="text" class="form-control" v-model="name" @keyup.f2="add()">
</div> <script> //自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113 // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: { },
methods: {
add() {
alert(1);
}
} });
</script> </body>
</html>
钩子函数
自定义私有指令
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script> </head>
<body>
<div id="app">
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
</div> <script> // 使用 Vue.directive() 定义全局的指令 v-focus
// 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
// 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
// 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次 }
}) // 自定义一个 设置字体颜色的 指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和样式相关的操作，一般都可以在 bind 执行 // console.log(binding.value)
// console.log(binding.expression) el.style.color = binding.value
}
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
dt: new Date()
},
methods: {
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
} });
</script> </body>
</html>
生命周期
总的来说 Vue 的生命周期包括四个状态
1、creating 状态--vue 实例被创建的过程
2、mounting 状态--挂到到真实的 DOM 节点
3、updating 状态--如果 data 中的数据改变就会触发对应组件的重新渲染
4、destroying 状态--实例销毁
上面个四个状态对应 8 个方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script> </head> <body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log('执行了show方法')
}
},
beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
console.log("beforeCreate()")
// console.log(this.msg)
// this.show()
// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
},
created() { // 这是遇到的第二个生命周期函数
console.log("created()")
// console.log(this.msg)
// this.show()
// 在 created 中，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
console.log("beforeMount()")
// console.log(document.getElementById('h3').innerText)
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
console.log("mounted()")
// console.log(document.getElementById('h3').innerText)
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
}, // 接下来的是运行中的两个事件
beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】
console.log("beforeUpdate()")
/* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg) */
// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
},
updated() {
console.log("updated()")
//console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
//console.log('data 中的 msg 数据是：' + this.msg)
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
}
});
</script>
</body>
</html>
vue-resource发起get、post、jsonp请求
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/Vue.js/vue.js"></script>
<script src="../Scripts/Vue.js/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
},
jsonpInfo() { // 发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script> </body>
</html>
资料
Vue.js入门系列教程（二）的更多相关文章
- Vue.js入门系列教程（一）
基本的Vue代码结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- Vue.js入门系列教程（三）
序言
- Vue.js入门系列（一）
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Android视频录制从不入门到入门系列教程(二)————显示视频图像
1.创建一个空的工程,注意声明下列权限: <uses-permission android:name="android.permission.CAMERA"/> < ...
- Android视频录制从不入门到入门系列教程(一)————简介
一.WHY Android SDK提供了MediaRecorder帮助开发者进行视频的录制,不过这个类很鸡肋,实际项目中应该很少用到它,最大的原因我觉得莫过于其输出的视频分辨率太有限了,满足不了项目的 ...
- Android视频录制从不入门到入门系列教程(三)————视频方向
运行Android视频录制从不入门到入门系列教程(二)————显示视频图像中的Demo后,我们应该能发现视频的方向是错误的. 由于Android中,Camera给我们的视频图片的原始方向是下图这个样子 ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 数据挖掘入门系列教程（二）之分类问题OneR算法
数据挖掘入门系列教程(二)之分类问题OneR算法 数据挖掘入门系列博客:https://www.cnblogs.com/xiaohuiduan/category/1661541.html 项目地址:G ...
- 数据挖掘入门系列教程（十二）之使用keras构建CNN网络识别CIFAR10
简介 在上一篇博客:数据挖掘入门系列教程(十一点五)之CNN网络介绍中,介绍了CNN的工作原理和工作流程,在这一篇博客,将具体的使用代码来说明如何使用keras构建一个CNN网络来对CIFAR-10数 ...
随机推荐
- 产品激活 比如Windows激活 , office激活 等激活的原理是什么？ KMS等激活工具安全吗？
什么是密钥管理服务 (KMS)? 密钥管理服务 (KMS) 允许在本地网络上激活产品.这样,单台计算机不必连接至 Microsoft 便可激活产品.需要将一台计算机配置为 KMS 主机.管理员必须为 ...
- 转发--UIPATH http://baijiahao.baidu.com/s?id=1596656405106773890&wfr=spider&for=pc&qq-pf-to=pcqq.c2c
之前和朋友聊起RPA,他们第一反应就是哎哟,主流几家vendor太贵了. 我们公司业务量没有那么大,用不上啦~ 尤其Blue Prism和 Automation anywhere报价,一般规模的企业一 ...
- Qt__主窗口、菜单和工具条(QMainWindow,QMenu,QToolBar)
转自豆子空间 主窗口 Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow.MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域: 最上面是Wind ...
- SAP入行就业
就大局势来说, 缺乏人最多的模块有abap 还有就是FICO 和MM. 如果您 英语水平特别高的话,建议您学习FICO HR 或BW. 如果您想追求高薪,那就是FICO无疑了.想快速就业或者有编程基础 ...
- Test Scenarios for Excel Export functionality
1 File should get exported in proper file extension2 File name for the exported excel file should be ...
- Visual Studio 2017各版本安装包离线下载、安装全解析
关于Visual Studio 2017各版本安装包离线下载.更新和安装的方法以及通过已下载版本减少下载量的办法 微软最近发布了正式版Visual Studio 2017并公开了其下载方式,不过由于V ...
- BZOJ2631tree——LCT
题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一:+ u v c:将u到v的路径上的点的权值都加上自然数c:- u1 v1 u2 v2:将树中原有的边( ...
- BZOJ1283 序列（费用流）
不妨看做是先用k个指针指向被选择的前k个元素,然后每次将选中当前第一个元素的指针移到最后,并且需要满足位置变化量>=m.显然这样可以构造出所有的合法方案.那么可以以此建立费用流模型,以一条流量k ...
- day30 item系列
item 会将数据操作类似于字典的操作具体用到的方法 __getitem__(self, item): __setitem__(self, key, value): __delitem__(self, ...
- 【转】cJSON 使用笔记
缘 起 最近在stm32f103上做一个智能家居的项目,其中选择的实时操作系统是 rt_thread OS v1.2.2稳定版本,其中涉及到C和java(android)端数据 ...