随笔分类 - 【学习】Vue
摘要：VUE组件简单实例 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <div> <bt></bt> <bt></bt> </div> </div> <script src="https://cd
阅读全文
摘要：Vue增删改查简易实例 <!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> .ulStyle{ list-style-type: none; margin: 10px 30px; } .divStyle{ wi
阅读全文
摘要：挂载： beforeCreate created beforeMount mounted：el挂载到实例上时运行 更新： beforeUpdate updated 销毁： beforeDestory destoryed 各自出现的时机如下列代码所示：在log中查看 <!DOCTYPE html> <
阅读全文
摘要：过滤器实例：转换首字母大写 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <input type="text" name="" v-model="uname"> <div>{{uname |
阅读全文
摘要：计算属性是为了让页面显示更加简洁，基于data数据进行处理的方法，以下为实例 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <input type="text" name="" v-model
阅读全文
摘要：获取焦点简单实例，用Vue.directive(ps:指令）定义，命名不要是关键字，用v-加自定义指令名称调用，而内部用钩子函数inserted来实现 <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app
阅读全文
摘要：Vue的v-model.number顾名思义，即是将绑定的参数中的字符串强制转换为int类型 而v-model.trim是将参数的前后空格删除 v-model.lazy：v-model的绑定是实时响应，lazy则是在输入完成后，焦点离开v-model绑定的控件后响应，相当于change事件 以下是实
阅读全文
摘要：<!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> div{ margin: 30px; } .mulitStyle{ height:auto; } </style> </head> <body> <div i
阅读全文
摘要：<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <ol> <li v-for="(item,key,index) in obj"><input type="button" :value="key
阅读全文
摘要：<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <ol> <li v-for="item in fruit">{{item}}</li> <li v-for="(item,index) in m
阅读全文
摘要：if实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id=
阅读全文
摘要：Vue的动态样式实例1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .active{ border: 2px solid darkred; width: 100px; height: 100
阅读全文
摘要：v-cloak：使用的display：none； 直到编译完成后开始显示； v-text和插值表达式，非必要响应式用v-text会比较好，使用插值表达式要加上v-cloak; v-html：不推荐使用，动态渲染网页容易导致xss攻击； 本网站内部使用，不应该在来自使用外部数据或者跨域使用； v-pr
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/di
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/di
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input ty
阅读全文
