vue2.x学习笔记(十七)】的更多相关文章

python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容 Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖析树(parse tree). 它提供简单又常用的导航(navigating),搜索以及修改剖析树的操作.它可以大大节省你的编程时间. Beautiful Soup Documentation — Beautiful Soup 4.4.0 documentationhttp://www.crummy…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套+动画</title> <link rel="stylesheet" href="animate.css"> </head> <body> &…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套</title> </head> <body> <div id="app"> <div> <router-link to="/home…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12616847.html. 动态组件&异步组件 在前面学习组件基础的时候学习过动态组件,官方文档给出过一个例子:在一个多标签的界面中使用[is]属性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 在上面的例子中,切换组件是会创建一个新的实例的,这就意味着你在前一个组件所做的一些操作不会被保…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12682364.html. 单元测试 vue cli拥有开箱即用的通过jest或mocha进行单元测试的内置选项.官方的vue test utils还提供了更多详细的指引和自定义设置. 简单的断言 你不必为了可测性在组件中做任何特殊的操作,导出原始设置就可以了: <template> <span>{{ message }}</span> </template> <scr…
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | filterB }} #,条件渲染     #,注意v-if与v-show的区别,v-if是决定是否创建DOM,而v-show则是DOM始终存在,只是改变了显示样式:     #,如果要切换多个元素的时候,我们就使用<template v-if='ok'>:     #,v-if 有更高的切换消…
十七. 面向对象程序设计 ● 面向对象程序设计的基本概念 ※ 类实际上是一种复杂的数据类型,它不仅包含不同类型的数据,还包含对这些数据的一些必要的操作. 而对象则是这种复杂的数据类型的一个变量. 类是抽象的,对象是具体的,一个对象是某个类的一个具体实例(instance):如同动物和鱼类/人类......的关系. ※ 在面向对象的方法中把对象发出的服务请求称为消息. 消息有不同的实现方式,如函数调用.程序间的内部通信.各种事件的发生和响应等.也就是说, 消息不能简单地等同于对象的成员函数调用,事…
一.EL语法 1.1.语法结构 ${expression} 1.2.[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符号,就一定要使用 [].例如: ${user.My-Name}应当改为${user["My-Name"] } 如果要动态取值时,就可以用[]来做,而.无法做到动态取值.例如: ${user[data]}中data 是一个变量 1.3.变量 EL存取变量数据的方法很简单 例如:${username}…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12633051.html. 自定义指令 简介 除了核心功能默认内置的指令([v-mode]和[v-show]等),vue也允许注册自定义指令.注意,在vue2.x中,代码复用和抽象的主要形式是组件.然而,在有的情况下,我们仍然会需要对普通的dom元素进行底层直接操作,这时候就会用到自定义指令. 举一个聚焦输入框的例子:当页面加载的时候,需要该输入框获得焦点(注意,autofocus属性在移动版的safari上不工…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12631022.html. 程序化的事件侦听器 在前面的学习中,我们已经知道了[$emit]全局属性的用法,它可以被[v-on]指令侦听,但是vue实例同时在其事件接口中提供了其他的方法,我们可以: 1.通过[$on(eventName, eventHandler)]侦听一个事件. 2.通过[$once(eventName, eventHandler)]一次性侦听一个事件. 3.通过[$off(eventName…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12616543.html. 组件中的插槽 在2.6.0的版本中,vue为具名插槽和作用域插槽引入了一个新的统一的语法(即[v-slot]指令),它取代了[slot]和[slot-scope]这两个目前已经被废弃但是还没被移除且仍在文档中的attribute. 插槽内容 vue实现了一套内容分发的api,这套api的设计灵感来源于web components的规范草案,将<slot>元素作为承载分发内容的出口.…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12609450.html. 组件的自定义事件 这里来学习一下组件中的自定义事件. 事件名 不同于组件名和prop,事件名不存在任何自动化的大小写转化,而是触发的事件名需要完全匹配监听这个事件所用的名称. 举个例子,如果触发一个camelCase名字的事件: this.$emit('myEvent') 则监听这个名字的kebab-case版本是不会有任何效果的: <!-- 没有效果 --> <my-comp…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 这里有一个vue组件的实例: // 定义一个名为button-counter的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录入功能,因此要特别认真仔细地掌握其中的相关知识点. 基础用法 你可以使用[v-model]指令在表单<input>.<textarea>以及<select>元素上创建双向数据绑定,它会根据控件(元素)的类型自动选取正确的方式来更新元素.尽管看起来有些神奇,但是[v-mode…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12577433.html. 列表渲染 vue提供了一个[v-for]指令用于列表渲染(循环). 用[v-for]指令把一个数组对应为一组元素 我们可以使用[v-for]指令基于一个数组来渲染一个列表.使用[v-for]指令需要使用[item in items]形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名. <ul id="example-1"> <l…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12562137.html. vue实例 要使用vue提供的特性与功能,都需要通过vue实例来使用. 创建一个vue实例 每一个vue应用,都是通过用Vue函数创建一个新的vue实例开始的. var vm = new Vue({ // 选项(属性) }) 虽然vue没有完全遵循mvvm模型,但是一些设计还是收到了其中的启发,因此官方文档中经常会使用vm(view-model)这个变量名来表示vue的实例. 所谓的v…
使用vue开发项目已经过了一段时间了,对其中的很多东西还是一知半解,于是想要系统学习一下.主要内容是参照官方中文网站https://cn.vuejs.org/v2/guide/,然后加上一些自己的理解与批注. 什么是vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12683075.html. 安全 现在的企业都比较在意信息系统的安全问题,在使用vue的过程中也要注意这一点. 报告安全漏洞 官方承诺,当收到一个安全漏洞报告,将给予其最高优先级,并由全职贡献者停下手中的工作处理此事(可以将发现的安全漏洞通过邮件给security@vuejs.org的形式反馈给官方).虽然发现新安全漏洞是比较罕见的事情,但是官方仍然是推荐始终使用最新版本的vue及其官方的周边库,以确保应用尽可能…
接着前面的内容:https://www.cnblogs.com/yanggb/p/12682137.html. 单文件组件 介绍 在很多的vue项目中,我们都是使用[Vue.component]来定义全局组件,紧接着用[new Vue({el:'#container'})]在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作得很好,在这些项目里javascript只被用来加强特定的视图.当在更复杂的项目中,或者你的前端完全由javascript驱动的时候,下面的这些缺点将会变得非常…
1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有关该事件详细信息的对象. 事件传播:是浏览器决定哪个对象触发其事件处理程序的过程. 事件捕获:在容器元素上注册的特定处理程序有机会再事件传播打破真实目标之前拦截它. 阻止标签默认事件的发生   2.Window事件 focus,blur不冒泡.focusin,focusout冒泡. load当文档和…
一.MySQL的复制是将主数据库(master)的数据复制到从(slave)数据库上,专业一点讲就是将主数据库DDL和DML操作的二进制日志传到从库上,然后从库对这些二进制日志进行重做,使得主数据库与从数据库的数据保持同步. 二.MySQL复制的一些优点: 可以将大部分的查询任务放在从库上进行,降低主库的负载,提高性能,但要注意实时性要求高的数据仍需在主库上读取. 如果主库出现了宕机,可以快速切换到从库上,提高了可用性. 可以在从库上进行数据备份,降低在备份期间对主库的影响. 将数据挖掘和分析等…
表单 GET 和 POST 处理表单时候只会用到GET 和 POST 方法. Django 的登录表单使用POST 方法,在这个方法中浏览器组合表单数据.对它们进行编码以用于传输.将它们发送到服务器然后接收它的响应. 相反,GET 组合提交的数据为一个字符串,然后使用它来生成一个URL.这个URL 将包含数据发送的地址以及数据的键和值.如果你在Django 文档中做一次搜索,你会立即看到这点,此时将生成一个https://docs.djangoproject.com/search/?q=form…
在写有关文字的主题前,笔者翻阅了几本书上的相关章节,研究了几天无果. 徐明亮<OpenGL游戏编程>书中介绍的是“位图字体”,也就是把字体栅格化,然后画出来.照着书上的VC代码翻译为C#的,突然卡在一个windows API,  wglUseFontBitmpas()上面了,这个函数要传入一个DC,惨了,不知道怎么搞了. 另一本书上文字相关的章节介绍的类似于画贴图方式,载入文字纹理图片,由于它的代码使用了一个游戏框架,照成我需要研究整个框架是怎么运作的,试了一下还不太容易理解,就这样两天工夫就…
Theme 类,应用的主题,通过替换路径实现主题的应用,方法为获取根路径和根链接:yii2\base\Theme.php <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * @license http://www.yiiframework.com/license/ */ namespace yii\base; use Yii; use yii\helpe…
<?php class Person{ public $name; public $age; public function speak(){ echo "Hello world"; } //判断最大的数 public function findMax($arr) { //从数组中找最大的数 //1.假设数组的第一个数就是最大的数 $maxVal=$arr[0]; //2.计算最大数的下标 for($i=1;$i<count($arr);$i++) { if($maxVal…
Map接口 通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图. Collection中的集合,元素是孤立存在的(理解为单身),向集合中存储元素采用一个个元素的方式存储. Map中的集合,元素是成对存在的(理解为夫妻).每个元素由键与值两部分组成,通过键可以找对所对应的值. Collection中的集合称为单列集合,Map中的集合称为双列集合. 需要注意的是,Map中的集合不能包含重复的键,值可以重复:每个键只能对应一个值. Map中…
环境搭建 vue-cli@3    vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> 原始HTML <span v-html="msghtml"></span> 特性 <div v-bind:id="dynamicId"></div> 表达式{{ number + 1 }}  {{ ok ? 'YES' :…
[易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错.   写法一:全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>…
本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后点击邮件主题,可以查看该邮件的详细内容: 点击返回列表,再回到列表页 一. 创建index页面: <!DOCTYPE html> <html> <head> <title>14.1路由和视图切换</title> <meta charset=&q…
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理.在Vue中事件修饰符主要有: .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡 .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设…