当前位置：首页 > 前端技术 > vue >内容正文

vue

Vue.js入门系列教程（二）

发布时间：2025/3/15 vue 56 豆豆

生活随笔收集整理的这篇文章主要介绍了 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 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'},methods: {}});</script> </body></html> View Code

定义格式化时间的全局过滤器

定义私有过滤器

字符串的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"><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 实例，得到 ViewModelvar 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> View Code

生命周期

<!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 实例，得到 ViewModelvar 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> View Code

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 实例，得到 ViewModelvar 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> View Code

转载于:https://www.cnblogs.com/cnki/p/9672230.html

新人创作打卡挑战赛发博客就能抽奖！定制产品红包拿不停！

总结

以上是生活随笔为你收集整理的Vue.js入门系列教程（二）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： JavaScript 基础数据类型与运
下一篇： vue之二级路由