前端
关注
分享
扫一扫
书香水墨
积跬步，行千里。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue 应用里 main.js 的作用
【代码】Vue 应用里 main.js 的作用。原创 2025-02-08 15:31:08 · 268 阅读 · 0 评论 -
Vue.js 事件处理器
一、Vue.js 事件处理器事件监听可以使用 v-on 指令：<div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p></div> <script>new Vue({ el: '#app', data: { counter: 0 }})</原创 2022-12-19 17:07:59 · 419 阅读 · 0 评论 -
Java中两个对象的 hashCode() 相同，则 equals() 也一定为 true吗？
不对，两个对象的 hashCode() 相同，equals() 不一定 true。代码示例：String str1 = "通话";String str2 = "重地";System. out. println(String. format("str1：%d | str2：%d", str1. hashCode(),str2. hashCode()));System. out. println(str1. equals(str2));执行的结果：str1：1179395 | str2：11原创 2022-10-17 10:23:16 · 803 阅读 · 0 评论 -
ArrayList、LinkedList、Vector区别
ArrayList、LinkedList、Vector区别原创 2022-10-11 11:15:44 · 196 阅读 · 0 评论 -
JS (=＞) 箭头函数
一、=> 箭头函数ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：x => x * x// 相当于function (x) { return x * x;}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了还有一种可以包含多条语句，这时候就不能省略{ ... }和returnx原创 2022-03-12 09:22:59 · 1592 阅读 · 0 评论 -
Vue.js 响应接口
一、Vue.js 响应接口Vue 可以添加数据动态响应接口。例如以下实例，我们通过使用 watch属性来实现数据的监听，watch 属性来实现数据的监听，watch属性来实现数据的监听，watch 必须添加在 Vue 实例之外才能实现正确的响应。实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }原创 2022-03-09 09:12:29 · 413 阅读 · 0 评论 -
Vue.js Ajax(axios)
一、GET 方法<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.staticfile.org/axios/0原创 2022-03-09 09:11:58 · 218 阅读 · 0 评论 -
Vue.js 混入
一、Vue.js 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例：var vm = new Vue({ el: '#databinding', data: { }, methods : { },});// 定义一个混入对象var myMixin = { created: function () {原创 2022-03-08 16:47:33 · 365 阅读 · 0 评论 -
Vue.js 过渡 & 动画
一、过渡Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。语法格式<transition name = "nameoftransition"> <div></div></transition>// 实例<div id = "databinding"><button v-on:click = "show = !show"&g原创 2022-03-08 16:46:56 · 396 阅读 · 0 评论 -
Vue.js 路由
一、Vue.js 路由本章节我们将为大家介绍 Vue.js 路由。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。二、简单实例Vue.js + vue-router 可以很简单的实现单页应用。<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。以下实例中我们将 v原创 2022-03-08 16:46:19 · 703 阅读 · 0 评论 -
Vue.js 自定义指令
一、Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus></div> <script>// 注册一个全局自定义指令 v-focusV原创 2022-03-08 16:45:29 · 412 阅读 · 0 评论 -
Vue.js 表单
一、Vue.js 表单可以用 v-model 指令在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。<!-- 演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定 --><div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我……"> <p>消原创 2022-03-08 16:43:23 · 171 阅读 · 0 评论 -
Vue.js 样式绑定
一、class 属性绑定<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active { width: 100px; height原创 2022-03-08 16:40:48 · 235 阅读 · 0 评论 -
Vue.js watch 属性
一、watch 属性通过 watch 来响应数据的变化<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head> <body>原创 2022-03-08 16:40:17 · 436 阅读 · 0 评论 -
Vue.js 组件
一、Vue.js 组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树注册一个全局组件语法格式： Vue.component(tagName, options)tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>二、全局组件&原创 2022-03-08 16:44:20 · 592 阅读 · 0 评论 -
Vue.js computed属性
一、computed声明了一个computed属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ rev原创 2022-03-08 16:38:37 · 767 阅读 · 0 评论 -
Vue.js 条件语句
一、条件判断1.1 v-if在元素 和 template 中使用 v-if 指令：<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> <原创 2022-03-06 13:55:16 · 282 阅读 · 0 评论 -
Vue.js 模板语法
一、Vue.js 模板语法Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。二、插值2.1 文本// 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<div id="app"> <p>{{原创 2022-03-06 13:34:54 · 699 阅读 · 0 评论 -
Vue.js 实例
一、Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下：var vm = new Vue({ // 选项})二、实例<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1></div><script typ原创 2022-03-06 12:58:41 · 356 阅读 · 0 评论 -
Vue.js 安装
一、script 引入<head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script></head><body><div id="app"> <p>{{ mess原创 2022-03-06 12:41:09 · 355 阅读 · 0 评论 -
JS解除切屏限制、解除快捷键操作屏蔽 解除复制粘贴限制
// 解除切屏限制window.onblur = null;window.onblur = function() {console.debug(1);}// 解除快捷键操作屏蔽window.onkeyup =window.onkeydown = window.onkeyPress = document.onkeyup =document.onkeydown =document.onkeyPress =document.body.onkeyup =document.body.onkey原创 2021-08-24 14:17:48 · 4686 阅读 · 3 评论 -
Angular使用ng-include指令后，ng-model取不到值
因为ng-include指令会创建新的作用域，导致父页面无法找到ng-model绑定的值。解决方法：在被ng-include的界面加上$parent，这样父类就能获取到值了<div ng-include="'s1.html'"></div><!-- s1.html --><input ng-model="$parent.value" type="text">var app = angular.module('app', []);app.co.原创 2021-07-05 17:32:10 · 422 阅读 · 0 评论 -
AngularsJS中的$parse、$eval
一、$parse服务$parse服务可以将一个表达式转换为一个函数。这个函数可以被调用，其中的参数是一个上下文对象，通常来说是作用域。另外，通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数，它可以用来在给定的上下文中改变这个表达式的值。<div my-attr="obj.name" my-directive>testing</div>app.directive('myDirective',function($log, $pa原创 2021-03-17 21:21:30 · 257 阅读 · 0 评论 -
AngularJS指令中的transclude
transclude可以设置为false（默认），true或者对象三种值，如果不设该属性就默认为false，也就是说你不需要将该指令所在元素包含的内容嵌入到模板中。一、transclude设置为true当transclude为true的时候，这时指令所在元素包含的内容会被嵌入到模板中有ng-transclude指令的元素中，例如：<hello> <p>hello</p><hello>angular.module("app", [])..原创 2021-03-03 21:36:35 · 493 阅读 · 0 评论 -
angular.copy、angular.extend
一、angular.copyangular.copy用于深复制angular.copy(src,[dst]) src：源对象 dst：目标对象，复制的对象js中 ‘= ’操作符复制的是指针，所以前后两个变量指向的还是内存中的同一个对象，所以在其中一个变量上操作该对象时，对另外一个变量也会生效。而angular.copy方法是深复制，会在内存中再生成一个对象，两个变量彼此独立，互不影响。 接收一个必须参数src，一个可选参数dst。如果dst没有提供，就会创建对象或者数组的复制原创 2021-03-03 21:35:41 · 481 阅读 · 0 评论 -
AngularJS $parsers、$formatters
一、$parsers、$formatters$parsers的数组中函数会以流水线的形式被一一调用。第一个$parse被调用后在进行第二个$parse调用$formatters返回最终的格式angular.module('form').directive('guacLenientDate', ['$injector', function guacLenientDate($injector) { // Required services var $filter = $inj原创 2021-03-03 21:34:56 · 307 阅读 · 0 评论 -
Js 获取对象属性个数
一、方法一var attributeCount = function(obj) { var count = 0; for(var i in obj) { if(obj.hasOwnProperty(i)) { // 建议加上判断,如果没有扩展对象属性可以不加 count++; } } return count;}var testObj = { name1: "value1", name2: "v原创 2021-02-13 22:26:53 · 6675 阅读 · 0 评论 -
HTML a标签打开连接的几种方式
一、调转到写界面<a href="/test" target="_blank">跳转打开一个新的界面></a>原创 2021-02-13 22:26:00 · 4918 阅读 · 0 评论 -
JS判断浏览器是否安装了某个软件
一、JS判断浏览器是否安装了某个软件首先到https://github.com/ismailhabib/custom-protocol-detection/blob/master/protocolcheck.js 下载 protocolCheck.js插件window.protocolCheck("调用本地软件的协议", function() { // 没有安装时的执行函数});...原创 2021-02-13 22:22:39 · 3174 阅读 · 2 评论 -
JS判断字符串是否为某个字符开始
一、substr() 方法if("123".substr(0, 2) == "12"){ console.log(true);}二、substring() 方法if("123".substring(0, 2) == "12"){ console.log(true);}三、slice()方法if("123".slice(0,2) == "12"){ console.log(true);}四、indexOf() 方法if("123".indexOf("12")原创 2021-02-13 22:20:25 · 2402 阅读 · 0 评论 -
Js获取操作系统版本 && 获得浏览器版本
一、获取操作系统版本function getOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator原创 2021-02-13 22:20:02 · 3717 阅读 · 1 评论 -
JS去除字符串空格
一、replace正则匹配方法1、去除字符串内所有的空格：str = str.replace(/\s*/g,"");2、去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,""); 3、去除字符串内左侧的空格：str = str.replace(/^\s*/,"");4、去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");var str = " a b c ";str = str.replace(/\s*/g,"");co原创 2021-02-13 22:19:24 · 217 阅读 · 0 评论 -
JS中隐含参数arguments、callee、caller
一、argumentsarguments 该对象代表正在执行的函数和调用它的函数的参数function test() { if(arguments.length > 0) { for(var v of arguments) { console.log(v); } }}test(1, 2, 3);123二、calleecallee属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装原创 2021-02-13 22:18:39 · 310 阅读 · 0 评论 -
JS监听浏览器关闭、刷新界面
window.onbeforeunload = function() { return "quite";}原创 2021-02-13 22:18:05 · 646 阅读 · 0 评论 -
JS 中forEach，for in、for of的使用
一、forEach1.1 遍历数组var array = [1,2,3,4,5,6];/*** currentValue 当前元素* index 当前元素的索引值* arr 当前元素所属的数组对象**/array.forEach(function(currentValue, index, arr) { console.log("index: " + index + "; currentValue: ", currentValue);});1.2 遍历对象var object =原创 2021-02-13 22:17:17 · 301 阅读 · 0 评论 -
CSS中两个class之间有空格和没空格的区别
一、有空格有空格表示后代选择器，选择的是.example内的.children.example .children { color: orange;}<p class="example"> <p class="children">children</p></p>二、没有空格没有空格表示.example.children在一个元素上，该元素必须同时又这两个class才生效.example.children { color: or原创 2021-02-07 22:23:06 · 1156 阅读 · 0 评论 -
CSS display:flex 布局
一、display:flexdisplay:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。二、flex-directionflex-direction 容器内元素的排列方向(默认横向排列)``1：flex-dir原创 2021-02-07 22:22:36 · 17166 阅读 · 0 评论 -
CSS box-shadow属性
box-shadow属性可以设置一个或多个下拉阴影的框值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset可选。从外层的阴影（开始时）改变阴影内侧阴影div { width:300px; height:100px; background-color:yello.原创 2021-02-07 22:22:04 · 225 阅读 · 0 评论 -
CSS 垂直居中
一、position: relative.content{ width: 300px height: 300px; background: red;}.children { width: 100px height: 100px; background: orange; position: relative; top: calc(50% - 50px); left: calc(50% - 50px);}<div class="content"> <div ch原创 2021-02-07 22:21:31 · 151 阅读 · 0 评论 -
CSS Position(定位)
值描述static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）relative生成相对定位的元素，相对于其正常位置进行定位fixed生成固定定位的元素，相对于浏览器窗口进行定位absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位sticky粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超...原创 2021-02-07 22:20:50 · 303 阅读 · 0 评论