He110_Wr0ld

【VueJs】VueJS----组件基础

组件基础

基本示例

这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: ''
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

new Vue({ el: '#components-demo' })

You clicked me 0 times.

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。

组件的复用

你可以将组件进行任意次数的复用：

You clicked me 1 times. You clicked me 1 times. You clicked me 1 times.

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

`data` 必须是一个函数

当我们定义这个组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

You clicked me 9 times. You clicked me 9 times. You clicked me 9 times.

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。

通过 Prop 向子组件传递数据

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '{
           { title }}'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

My journey with Vue

Blogging with Vue

Why Vue is so fun

然而在一个典型的应用中，你可能在 data 里有一个博文的数组：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

并想要为每篇博文渲染一个组件：

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

单个根元素

当构建一个组件时，你的模板最终会包含的东西远不止一个标题：

{
           { title }}

最最起码，你会包含这篇博文的正文：

{
           { title }}

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：


  {
           { title }}

看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：

所以是时候重构一下这个组件了，让它变成接受一个单独的 postprop：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    
      {
           { post.title }}
      
    
  `
})

上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。

现在，不论何时为 post 对象添加一个新的属性，它都会自动地在内可用。

通过事件向父级组件发送消息

在我们开发组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据属性来支持这个功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

它可以在模板中用来控制所有博文的字号：

现在我们在每篇博文正文之前添加一个按钮来放大字号：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    
      {
           { post.title }}
      
      
    
  `
})

问题是这个按钮不会做任何事：

当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件：

然后我们可以用 v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件一样：

My journey with Vue

Enlarge text

...content...

Blogging with Vue

Enlarge text

...content...

Why Vue is so fun

Enlarge text

...content...

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

或者，如果这个事件处理函数是一个方法：

那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

在组件上使用 `v-model`

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

等价于：

当用在组件上时，v-model 则会这样：

为了让它正常工作，这个组件内的必须：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

到目前为止，关于组件自定义事件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把自定义事件读完。

通过插槽分发内容

和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：


  Something bad happened.

可能会渲染出这样的东西：

Error! Something bad happened.

幸好，Vue 自定义的元素让这变得非常简单：

Vue.component('alert-box', {
  template: `
    
      Error!
      
    
  `
})

如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！

到目前为止，关于插槽你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把插槽读完。

动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

HomePostsArchive

Home component

上述内容可以通过 Vue 的元素加一个特殊的 is 特性来实现：

在上述示例中，currentTabComponent 可以包括

已注册组件的名字，或
一个组件的选项对象

你可以在这里查阅并体验完整的代码，或在这个版本了解绑定组件选项对象，而不是已注册组件名的示例。

到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态和异步组件读完。

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如

 和  和 ，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
  
      
 
        
         
          
  

  
         
        
      
这个自定义组件  会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法： 
       
        
         
          
  

  
         
        
      
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的： 
       
       字符串 (例如：template: '...') 
       单文件组件 (.vue) 
       
                    
                    
                
                
                    
                        
                        
                             
                        
                        
                        
                            
                        
                        
                        
                            
                        
                    
                
            
        
    
    
        你可能感兴趣的:(VueJs,vuejs)
        
            
                
                    vuejs获取当前对象元素
                        frankgo

                        vue中有两种方法获取到当前元素varel=event.target;//当前元素，可修改（能够用此方法获取到他的子元素，不能获取他本身的内容）varel=event.currentTarget;//当前元素，不可修改（能够用此方法获取到他的子元素及能获取他本身的内容）html复杂的click哈哈jsvarexample2=newVue({el:'#example-2',data:{name:'V
                    
                    vue 组件水平滚动_Vue.js自定义垂直/水平滚动条组件|vue模拟滚动条
                        weixin_39726379
vue组件水平滚动
                        介绍VScroll滚动条基于vuejs2.x构建的美化XY轴滚动条组件。支持原生滚动条、鼠标移出是否隐藏滚动条、自定义滚动条尺寸、颜色及层级等功能。拥有漂亮且流畅的滚动体验！参数配置props:{//是否显示原生滚动条native:Boolean,//是否自动隐藏滚动条autohide:Boolean,//滚动条尺寸size:{type:[Number,String],default:''},//
                    
                    使用位运算优化 Vue.js 应用：高效状态管理技巧
                        结城
vuevue.js前端javascript
                        在Vue.js开发中，位运算（BitwiseOperations）是一种高效的工具，尤其适用于需要管理大量布尔状态或优化性能的场景。位运算通过操作二进制位来实现状态的存储和检查，相比传统的数组或对象操作，内存占用更低，执行速度更快。本篇博客将介绍如何在Vue.js中应用位运算技巧，结合Vue的响应式系统实现高效的状态管理。读vue3响应式源码有感https://github.com/vuejs/c
                    
                    Vue常用插件汇总(2)
                        2401_84094908
程序员vue.js前端javascript
                        文件上传vue-upload-component-Vuejs文件上传组件vue-core-image-upload-轻量级的vue上传插件vue-dropzone-用于文件上传的Vue组件图片处理vue-lazyload-img-移动优化的vue图片懒加载插件vue-image-crop-upload-vue图片剪裁上传组件vue-svgicon-创建svg图标组件的工具vue-img-loade
                    
                    Javaweb学习之Vue模板语法（三）
                        不要数手指啦
vue.js学习前端
                        目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
                    
                    Vue3-尚硅谷笔记
                        八月份的天气
Vue3-笔记笔记
                        1.Vue3简介2020年9月18日，Vue.js发布版3.0版本，代号：OnePiece（n经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址：Releasev3.0.0OnePiece·vuejs/core截止2023年10月，最新的公开版本为：3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快55%,更新渲染快133%。内存减少54%。1.2.【
                    
                    Vue如何处理数据、v-HTML的使用及总结
                        网络点点滴
Vue3vue.jshtml前端
                        Vue如何处理数据、v-HTML的使用及总结Vue是如何处理数据的这里我们先看一段代码constapp=Vue.createApp({data(){return{courseGoalA:'学习Vue,最终掌握Vue',courseGoalB:'掌握Vue,并构建相应的应用程序',vueLink:'https://cn.vuejs.org/'};},methods:{outputGoal(){con
                    
                    VUE 2+3
                        一只鱼^_
Webvue.js前端javascript数据结构算法前端框架
                        Vue是什么？概念：Vue是一个用于构建用户界面的渐进式框架构建用户界面：基于数据动态渲染页面Vue的两种使用方式：1.Vue核心包开发场景：局部模块改造2.Vue核心包&Vue插件工程化开发场景：整站开发注：Vuejs核心包(声明式渲染，组件系统)优点：大大提升开发效率----------------------------------------------------------------
                    
                    《Vuejs设计与实现》第 12 章（组件实现原理 上）
                        前端 贾公子
vue.js前端javascript
                        目录12.1组件的渲染12.2组件状态与自更新12.3组件实例与生命周期2.4Props与组件被动更新在上一章节，我们详细探讨了渲染器的基本概念和实现方式，它的主要作用是将虚拟DOM渲染为真实DOM。然而，当我们处理复杂页面时，虚拟DOM描述页面结构的代码量可能会剧增，导致页面模板臃肿。为此，我们引入了组件化的概念，通过组件，我们可以将大型页面划分为多个模块，每个模块都独立为一个组件，最终组成完整
                    
                    VUE常用UI组件插件及框架
                        ctf_0226
vue.jsui前端
                        UI组件及框架element-饿了么出品的Vue2的webUI工具套件mint-ui-Vue2的移动UI元素iview-基于Vuejs的开源UI组件库Keen-UI-轻量级的基本UI组件合集vue-material-通过VueMaterial和Vue2建立精美的app应用muse-ui-三端样式一致的响应式UI库vuetify-为移动而生的VueJS2组件框架vonic-快速构建移动端单页应用vu
                    
                    Vue.js 中的 v-bind 指令详解
                        步行cgn
Vuevue.js前端javascript
                        Vue.js中的v-bind指令详解v-bind是Vue.js的核心指令之一，用于动态绑定HTML属性（如class、style、href等）或组件props到Vue实例的数据。一、基础语法二、核心功能动态绑定普通属性链接data(){return{url:'https://vuejs.org',imagePath:'/logo.png'}}绑定class和styleVue对这两个属性做了特殊增强
                    
                    快速搭建一个vue前端工程
                        是烟花哈
测试开发前端vue.jsjavascript
                        一、环境准备1、安装node.js下载地址：Node.js推荐版本如下：2、检查node.js版本node-vnpm-v二、安装Vue脚手架Vue脚手架是Vue官方提供的标准化开发工具。vue官网：https://cn.vuejs.org/全局安装@vue/cli（仅第一次搭建环境时执行）npminstall-g@vue/cli检查是否安装成功vue--version三、创建vue项目进入到你想要
                    
                    使用Vite构建Vue3项目，对路由Vue Router 4.x的设置
                        夏日米米茶
web前端Vue3vue-routervue3vite
                        Vue3官网：https://v3.cn.vuejs.org/Vite官网：https://cn.vitejs.dev/VueRouter官网：https://next.router.vuejs.org/zh/使用Vite构建时，会和以前的有些写法有些不同，例如之前我们使用//导入路由对象importVueRouterfrom'vue-router'//路径配置.vue可以省略constroute
                    
                    vue指令
                        爱吃鱼的小测试
VUE学习笔记vue.jsjavascript前端
                        Vue指令1、进入页面使一个输入框自动获取焦点2、自定义指令全局的局部的钩子函数钩子函数参数动态指令参数函数简写官方文档https://cn.vuejs.org/v2/guide/custom-directive.html1、进入页面使一个输入框自动获取焦点操作DOM的实现方式，在vue中不推荐使用document.getElementById('name').focus()想要实现的方式，在元素
                    
                    vue2学习文档
                        大卡拉米
学习vue.js前端
                        Vue2学习文档英文官网:Vue2:https://vuejs.org/Vue3：https://vuejs.org/中文官网Vue2:https://v2.cn.vuejs.org/Vue3:https://cn.vuejs.org/入门前言用来构建用户界面的渐进式的js库与其它前端JS框架的关联借鉴Angular的模板和数据绑定技术借鉴React的组件化和虚拟DOM技术特点声明式无需亲自操作D
                    
                    Vue百日学习计划Day43-45天详细计划-Gemini版
                        LuckyLay
vue.js学习前端
                        Day43:Composable函数基础与抽取简单逻辑(~3小时)本日目标:理解Composable函数的概念、优势，并学会如何将简单的、无状态的逻辑抽取为Composable。所需资源:Vue3官方文档(组合式函数):https://cn.vuejs.org/guide/reusability/composables.html学习计划:番茄时钟1(25分钟工作+5分钟休息):内容:Composa
                    
                    Vue百日学习计划Day28-32天详细计划-Gemini版
                        LuckyLay
vue.js学习javascript
                        总目标:在Day28-32深入理解Vue3的响应式机制，熟练掌握CompositionAPI中的setup,ref,reactive,toRefs,readonly,computed,watch,watchEffect等核心API的使用。所需资源:Vue3官方文档(组合式API):https://cn.vuejs.org/guide/introduction.html#composition-ap
                    
                    Vue百日学习计划Day24-28天详细计划-Gemini版
                        LuckyLay
vue.js学习前端
                        总目标:在Day24-27熟练掌握Vue.js的各种模板语法，包括文本插值、属性绑定、条件渲染、列表渲染、事件处理和表单绑定，并能结合使用修饰符。所需资源:Vue3官方文档(模板语法):https://cn.vuejs.org/guide/essentials/template-syntax.htmlVue3官方文档(条件渲染):https://cn.vuejs.org/guide/essenti
                    
                    Vue百日学习计划Day33-35天详细计划-Gemini版
                        LuckyLay
vue.js学习前端
                        总目标:在Day33-35理解Vue组件从创建到销毁的完整生命周期，熟练掌握CompositionAPI中主要的生命周期钩子，并知道在不同阶段执行哪些操作。所需资源:Vue3官方文档(生命周期钩子):https://cn.vuejs.org/guide/essentials/lifecycle.html你的Vue3实践项目。Day33:生命周期钩子-创建与挂载阶段(~3小时)本日目标:理解组件生命
                    
                    前端技术栈学习：Vue2、Vue cli脚手架、ElementUI组件库、Axios
                        随遇而安622&508
前端技术栈学习笔记
                        1基本介绍（1）Vue是一个前端框架,易于构建用户界面（2）Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合（3）支持和其它类库结合使用（4）开发复杂的单页应用非常方便（5）Vue是Vue.js的简称官网:https://cn.vuejs.org/git地址:https://github.com/vuejs2MVVM机制示意图解读MVVM思想(上图)M∶即Model，模型，包括
                    
                    Vue百日学习计划Day21-23天详细计划-Gemini版
                        LuckyLay
vue.js学习前端
                        总目标:在Day21-23完成Vue.js的介绍学习、环境搭建，并成功运行第一个Vue3项目，理解其基本结构。Day21:Vue.js介绍与概念理解(~3小时)本日目标:理解Vue.js是什么、渐进式框架的概念以及选择Vue的原因。初步了解Vite是什么及其作用。所需资源:Vue3官方文档(介绍):https://cn.vuejs.org/guide/introduction.htmlVite官方
                    
                    尤小右：VitePress 初步实现小目标，极简静态站点生成器
                        前端开发博客
javavuejavascripthtmlweb
                        VitePress：Vite&Vue驱动的静态网站生成器https://github.com/vuejs/vitepressVuePress的小兄弟，建立在vite的基础上npminstall-Dvitepressecho'#HelloVitePress'>index.md#startsdevservernpxvitepress#build>.vitepress/distnpxvitepressb
                    
                    开发过程中需要安装的浏览器插件
                        zlpzlpzyd
前端前端
                        Vue.jsdevtoolshttps://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN&utm_source=ext_sidebarModHeaderhttps://chromewebstore.google.com/detail/modheader-modify
                    
                    active-class 是哪个组件的属性？
                        nanzhuhe
前端
                        active-class属于vue-router的样式方法，当router-link标签被点击时将会应用这个样式一、首先，active-class是什么，active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html二、在vue-ro
                    
                    vue中使用web serial api实现串口通信
                        学了就忘
VUE串口vue.jsjavascript
                        文章目录webserialapi相关资料网址vue中实现字符串转GBK字节数组字节数组转16进制vuejs中使用vue文件中调用js的方法webserialapi相关资料网址网址：https://wicg.github.io/serial/#open-method相关资料：https://curtion.github.io/Web-SerialPort/https://github.com/Cur
                    
                    带你深入浅出Vue
                        zyyn_未来可期
Vuevue.js前端javascript
                        如果文章对你有帮助欢迎【关注❤️❤️❤️点赞收藏⭐⭐⭐】一键三连！一起努力！前言️Vue介绍Vue是一套用于构建用户界面的渐进式框架与其它大型框架不同的是：Vue被设计为可以自底向上逐层应用Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动️官网：https://cn.vuejs.
                    
                    Vue3源码【一】—— ref&reactive响应式原理及简单实现
                        Modify_QmQ
#vue3javascript前端vue.js
                        响应式ref、reactive源码地址：https://github.com/vuejs/core首先还是从最开始学的ref的源码看起，他的路径在packages/reactivity/src/ref.ts，这里看源码分析就直接将源码执行的步骤给他粘贴出来了哈。首先我们看一下ref是怎么创建的1、创建Ref//第一步，我们还是直接到ref关键字，可以看到这个，这个就是我们使用的ref()用来创建响
                    
                    前后端分开架构下web vuejs三维立体three曲线设计入门
                        zjqhadoop
数码相机
                        import*asTHREEfrom'three';import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import*ascurveSubjectfrom"@/api/hologram/curveSubject";exportdefault{name:'ThreeDCurve',mounted(){letwinW
                    
                    vuejs入门three曲线图设计
                        zjqhadoop
数码相机
                        import*asTHREEfrom'three';import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import*ascurveSubjectfrom"@/api/hologram/curveSubject";exportdefault{name:'ThreeDCurve',mounted(){letwinW
                    
                    7个最好用的Vue Tree Select树形组件
                        萌尛喵
vue.js前端javascript
                        Vue树形选择器（Vuetreeselect）组件在搭建Vue的app中特别常用，Vuetreeselect除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。VueJSTree-全功能，树状单选多选，可拖拽，过滤搜索VueDraggableNestedTree-纯树形选择，轻盈趁手VueTreeList
                    
                                集合框架
                                    天子之骄
java数据结构集合框架
                                       集合框架 
集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 
从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。 
  
简单介绍： 
  
Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
                                
                                Table Driven（表驱动）方法实例
                                    bijian1013
javaenumTable Driven表驱动
                                    实例一：   
/**
 * 驾驶人年龄段
 * 保险行业，会对驾驶人的年龄做年龄段的区分判断
 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞)
 */
public class AgePeriodTest {

    //if...el
                                
                                Jquery 总结
                                    cuishikuan
javajqueryAjaxWebjquery方法
                                    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
                                
                                面向对象概念的提出
                                    麦田的设计者
java面向对象面向过程
                                       
     面向对象中，一切都是由对象展开的，组织代码，封装数据。 
  在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。 
  
    下面就结合编程语言的发展史，聊一聊面向过程和面向对象。 
     c语言由贝尔实
                                
                                linux网口绑定
                                    被触发
linux
                                    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 
 
一、环境描述 
我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 
 
二、双网卡绑定步骤： 
2.1 修改/etc/sysconfig/network
                                
                                XML基础语法
                                    肆无忌惮_
xml
                                    一、什么是XML？ 
XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。 
  
二、为什么学习XML？ 
用来解决程序间数据传输的格式问题 
做配置文件 
充当小型数据库 
  
三、XML与HTM
                                
                                为网页添加自己喜欢的字体
                                    知了ing
字体 秒表 css
                                    @font-face {
			font-family: miaobiao;//定义字体名字
			font-style:  normal;
		    font-weight: 400;
			src: url('font/DS-DIGI-e.eot');//字体文件
		} 
使用： 
 
<label style="font-size:18px;font-famil
                                
                                redis范围查询应用-查找IP所在城市
                                    矮蛋蛋
redis
                                    原文地址： 
http://www.tuicool.com/articles/BrURbqV 
需求 
 
根据IP找到对应的城市 
 
原来的解决方案 
 
oracle表（ip_country）： 
 
 
查询IP对应的城市： 
 
1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 
 
2. select city from ip_
                                
                                输入两个整数， 计算百分比
                                    alleni123
java
                                    	public static String getPercent(int x, int total){
		 
		double result=(x*1.0)/(total*1.0);
		System.out.println(result);
		
		
		DecimalFormat df1=new DecimalFormat("0.0000%");
		

                                
                                百合——————>怎么学习计算机语言
                                    百合不是茶
java 移动开发
                                        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
                                
                                linux下tomcat开机自启动
                                    bijian1013
tomcat
                                    方法一： 
修改Tomcat/bin/startup.sh 为: 
export JAVA_HOME=/home/java1.6.0_27
export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export PATH=$JAVA_HOME/bin:$PATH
export CATALINA_H
                                
                                spring aop实例
                                    bijian1013
javaspringAOP
                                    1.AdviceMethods.java 
package com.bijian.study.spring.aop.schema;

public class AdviceMethods {

	public void preGreeting() {
		System.out.println("--how are you!--");
	}
} 
2.beans.x
                                
                                [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization
                                    bit1129
serialization
                                    enableComplexMapKeySerialization配置项的含义 
 Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。 
  
GsonBuilder用于
                                
                                【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题
                                    bit1129
Stream
                                    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 
1. At most once，数据最多只能接受一次，有可能接收不到 
2. At least once, 数据至少接受一次，有可能重复接收 
3. Exactly once  数据保证被处理并且只被处理一次， 
  
具体的多读几遍http://spark.apache.org/docs/lates
                                
                                shell脚本批量检测端口是否被占用脚本
                                    ronin47

                                    #!/bin/bash
cat ports   |while read line
do#nc -z  -w 10  $line

nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then
echo $line:ok
else
echo $line:fail
fi

done

这里的ports 既可以是文件
                                
                                java-2.设计包含min函数的栈
                                    bylijinnan
java
                                    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ 
 

import java.util.ArrayList;
import java.util.List;


public class MinStack {

	//maybe we can use origin array rathe
                                
                                Netty源码学习-ChannelHandler
                                    bylijinnan
javanetty
                                     
一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 
例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 
因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 
它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 
 
 

p
                                
                                java生成随机数
                                    cngolon
java
                                    方法一： 
/** 
* 生成随机数 
* @author [email protected] 
* @return 
*/ 
public synchronized static String getChargeSequenceNum(String pre){ 
StringBuffer sequenceNum = new StringBuffer(); 
Date dateTime = new D
                                
                                POI读写海量数据
                                    ctrain
海量数据
                                    import java.io.FileOutputStream; 
import java.io.OutputStream; 
 
import org.apache.poi.xssf.streaming.SXSSFRow; 
import org.apache.poi.xssf.streaming.SXSSFSheet; 
import org.apache.poi.xssf.streaming
                                
                                mysql 日期格式化date_format详细使用
                                    daizj
mysqldate_format日期格式转换日期格式化
                                     
 日期转换函数的详细使用说明 
   DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
                                
                                一个程序员分享8年的开发经验
                                    dcj3sjt126com
程序员
                                      
在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 
明确入行的目的 
很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
                                
                                android欢迎界面淡入淡出效果
                                    dcj3sjt126com
android
                                    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 
主要代码如下： 
package com.myaibang.activity; 
import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
                                
                                linux 复习笔记之常见压缩命令
                                    eksliang
tar解压linux系统常见压缩命令linux压缩命令tar压缩
                                    转载请出自出处:http://eksliang.iteye.com/blog/2109693 
linux中常见压缩文件的拓展名 
*.gz   gzip程序压缩的文件
*.bz2  bzip程序压缩的文件
*.tar  tar程序打包的数据，没有经过压缩
*.tar.gz  tar程序打包后，并经过gzip程序压缩
*.tar.bz2 tar程序打包后，并经过bzip程序压缩
*.zi
                                
                                Android 应用程序发送shell命令
                                    gqdy365
android
                                    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 
 
发就发吧！ 
 
一、关于shell指令： 
我们知道，shell指令是Linux里面带的
                                
                                java 无损读取文本文件
                                    hw1287789687
读取文件无损读取读取文本文件charset
                                    java 如何无损读取文本文件呢？ 
以下是有损的 
@Deprecated
	public static String getFullContent(File file, String charset) {
		BufferedReader reader = null;
		if (!file.exists()) {
			System.out.println("getFull
                                
                                Firebase 相关文章索引
                                    justjavac
firebase
                                    Awesome Firebase 
最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 
Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 
开发者只需引用一个 API 库文件就可以使用标准 RE
                                
                                C++学习重点
                                    lx.asymmetric
C++笔记
                                    1.c++面向对象的三个特性：封装性，继承性以及多态性。 
  
2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。 
  
3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。 
  
4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 
&n
                                
                                java bean和xml相互转换
                                    q821424508
javabeanxmlxml和bean转换java bean和xml转换
                                    这几天在做微信公众号 
做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 
然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 
还是贴出来记录一下  
  
  
顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。 
  
packag
                                
                                C 语言初级 位运算
                                    1140566087
位运算c
                                      第十章 位运算    1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节    2、位运算符：  运算符 作用  ~ 按位求反  << 左移  >> 右移  & 按位与  ^ 按位异或  | 按位或   他们的优先级从高到低；    3、位运算符的运算功能：  a、按位取反：  ~01001101 = 101
                                
                                14点睛Spring4.1-脚本编程
                                    wiselyman
spring4
                                    14.1 Scripting脚本编程 
 
 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 
 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 
 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 
 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; 
 spring支持脚本
                                
                
            
        
    


    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

【VueJs】VueJS----组件基础

组件基础

基本示例

组件的复用

data 必须是一个函数

组件的组织

通过 Prop 向子组件传递数据

{ { title }}

My journey with Vue

Blogging with Vue

Why Vue is so fun

单个根元素

{ { title }}

{ { title }}

{ { title }}

{ { post.title }}

通过事件向父级组件发送消息

{ { post.title }}

My journey with Vue

Blogging with Vue

Why Vue is so fun

使用事件抛出一个值

在组件上使用 v-model

通过插槽分发内容

动态组件

解析 DOM 模板时的注意事项

你可能感兴趣的:(VueJs,vuejs)

`data` 必须是一个函数

在组件上使用 `v-model`