文档章节

Vue.js-组件

tianyawhl
 tianyawhl
发布于 2017/09/01 11:40
字数 3957
阅读 16
收藏 0
点赞 0
评论 0

使用组件

1、注册

之前说过,我们可以通过以下方式创建一个Vue实例
new Vue({
  el: '#some-element',
  // 选项
})

(1)要注册一个全局组件,你可以使用Vue.component(tagName,options) 例如:
Vue.component("my-component",{
//选项
})

对应自定义标签名,Vue.js不强制要求遵循W3C规则

组件在注册之后,便可以在父实例的模块中以自定义元素
<my-component></my-component>的形式使用。要确保在初始化根实例之前注册了组件

<body class="">
    <div id="example-1">
        <my-component></my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-component", {
        template: `<div>a custom component</div>`
    })
    var app = new Vue({
        el: "#example-1",
    })
    </script>
</body>
渲染为
<div id="example">
  <div>A custom component!</div>
</div>

(2)局部注册
不必在全局注册每个组件,通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用

<body class="">
    <div id="example-1">
        <my-component></my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var child = {
        template: `<div>aa custom component</div>`
    }
    var app = new Vue({
        el: "#example-1",
        components: {
            //<my-component> 将只在父模板可用
            "my-component": child
        }
    })
    </script>
</body>

这种封装也适用于其它可注册的Vue功能,如指令

2、is属性

当使用DOM作为模板时,你会受到HTML的一些限制,因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容,尤其像一些元素<ul>,<ol>,<table>,<select>限制了能被它包裹的元素,而一些像option这样的元素只能出现在某些其它元素内部,在自定义组件中使用这些受限制的元素时会导致一些问题,例如
<table>
  <my-row>...</my-row>
</table>
在渲染的时候会导致错误。变通的方法是使用特殊的is属性,如下例子:

<body class="">
    <div id="example-1">
        <table>
            <tr is="my-row"></tr>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-row", {
        template: `<tr><td>11</td></tr> `
    })
    var app = new Vue({
        el: "#example-1"
    })
    </script>
</body>

注意如果您使用来自以下来源之一的字符串模板,这些限制将不适用
1、<script type="text/x-template">
<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>

        <-- 注意:使用<script>标签时,type指定为text/x-template,意在告诉浏览器这不是一段js脚本,浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->

        <script type="text/x-template" id="myComponent">//注意 type 和id。
            <div>This is a component!</div>
        </script>
    </body>
    <script src="js/vue.js"></script>
    <script>
        //全局注册组件
        Vue.component('my-component',{
            template: '#myComponent'
        })

        new Vue({
            el: '#app'
        })

    </script>
</html>

2、JavaScript 内联模版字符串
        <template id="myComponent">
            <div>This is a component!</div>
        </template>

3、.vue 组件,创建.vue后缀的文件,如组件Hello.vue,放到components文件夹中,在使用的页面进行引用

3、data必须是函数

通过Vue构造器传入的各种选项大多数可以在组件里用,data是个例外,它必须是函数

<body class="">
    <div id="example-1">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var data={counter:0}
    Vue.component("simple-counter",{
        template:`
        <button v-on:click="counter+=1">{{counter}}</button>
        `,
        data:function(){
            return data
        }
    })
    var app = new Vue({
        el: "#example-1"
    })
    </script>
</body>

由于这3个组件共享了同一个data,因此增加一个counter会影响所有组件,我们可以通过为每个组件返回全新的data对象来解决这个问题

<body class="">
    <div id="example-1">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
    <script src="js/vue.js"></script>
    <script>
    
    Vue.component("simple-counter",{
        template:`
        <button v-on:click="counter+=1">{{counter}}</button>
        `,
        data:function(){
            return {
                counter:0
            }
        }
    })
    var app = new Vue({
        el: "#example-1"
    })
    </script>
</body>

现在每个counter都有它自己内部的状态了

4、构成组件

组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模板中使用了组件B。它们之间必须需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件,然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性
在Vue中,父子组件的关系可以总结为props down,events up.父组件通过props向下传递数据给子组件,子组件通过events给父组件发送信息

使用Prop传递数据
组件实例的作用域是孤立的,这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据,要让子组件使用父组件的数据,需要通过子组件的props选项,子组件要显式的用props选项声明它期待获得的数据

<body class="">
    <div id="example-1">
        <message v-bind:message="data"></message>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("message", {
        props: ["message"],
        template: `
        <span>{{message}}</span>
        `,
    })
    var app = new Vue({
        el: "#example-1",
        data: {
            data: "hello props"
        }
    })
    </script>
</body>

camelCase vs.kebab-case
HTML特性是不区分大小写的,所以,当使用的不是字符串模板,camelCased(驼峰式)命名的prop需要父组件属性名需要转换为相应的kebab-case(短横线隔开式)命名

<body class="">
    <div id="example-1">
        <message v-bind:my-message="data"></message>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("message", {
        props: ["myMessage"],
        template: `
        <span>{{myMessage}}</span>
        `,
    })
    var app = new Vue({
        el: "#example-1",
        data: {
            data: "hello props MY MESSAGE"
        }
    })
    </script>
</body>

如果你使用字符串模板,则没有这些限制
字面量语法与动态语法
初学者常犯的一个错误是使用字面量语法传递数值
//传递了一个字符串“1”
<comp some-prop="1"></comp>
因为它是一个字面prop,它的值是字符串“1”,而不是number,如果想传递一个实际的number,需要使用v-bind从而让它的值被当作JavaScript表达式计算
<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

单向数据流
prop是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来,另外每次父组件更新时,子组件的所有prop都会更新为最新值,这意味着你不应该在子组件内部改变prop.如果你这么做了,Vue会在控制台给出警告
为什么我们会有修改prop中的数据的冲动呢,通常有2种原因
1、prop作为初始值传入后,子组件想把它当做局部数据来用
2、prop作为初始值传入,由子组件处理成其它数据输出
对于这2种原因,正确的应对方式是:
(1)定义一个局部变量,并用prop的值初始化它

<body class="">
    <div id="example-1">
        <message v-bind:message="initialCounter"></message>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("message", {
        props: ["message"],
        data: function() {
            return { counter: this.message }
        },
        template: `
        <span>{{counter}}</span>
        `,
    })
    var app = new Vue({
        el: "#example-1",
        data: {
            initialCounter: 1
        }
    })
    </script>
</body>

(2)定义一个计算属性,处理prop的值并返回

<body class="">
    <div id="example-1">
        <message v-bind:message="initialCounter"></message>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("message", {
        props: ["message"],
        computed:{
            newmessage:function(){
                return this.message.trim().toLowerCase()
            }
        },
        template: `
        <span>{{newmessage}}</span>
        `,
    })
    var app = new Vue({
        el: "#example-1",
        data: {
            initialCounter: "THIS IS THE SINGLE DATA SAMPLE"
        }
    })
    </script>
</body>

注意在JavaScript中对象和数组是引用类型,指向同一个内存空间,如果prop是一个对象或数组,在子组件内部改变它会影响父组件的状态

自定义事件
我们知道,父组件是使用props传递数据给子组件,但子组件怎么跟父组件通信呢,这个时候Vue的自定义事件系统就派上用场了,使用v-on绑定自定义事件
每个Vue实例都实现了事件接口(Events interface)即使用$on(eventName)监听事件
使用$emit(eventName)触发事件
Vue的事件系统分离自浏览器的EventTarget API尽管它们的运行类似,但是$on ,$emit不是addEventListener和dispatchEvent的别名
另外,父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件
不能用$on侦听子组件释放的事件,而必须在模板里直接使用v-on绑定,就像以下的例子

<body class="">
    <div id="example">
        <div>{{total}}</div>
        <my-component v-on:crement="crementTotal"></my-component>
        <my-component v-on:crement="crementTotal"></my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-component", {
        template: `
           <button v-on:click="incrementCounter">{{counter}}</button>
        `,
        data: function() {
            return {
                counter: 0
            }
        },
        methods: {
            incrementCounter: function() {
                this.counter += 1
                this.$emit("crement")

            }
        }
    })
    var app = new Vue({
        el: "#example",
        data: {
            total: 0
        },
        methods: {
            crementTotal: function() {
                this.total += 1
            }
        }
    })
    </script>
</body>

自定义事件不能用驼峰来命名
本例中,子组件已经和它的外部完全解耦,链接桥梁是自定义事件crement

给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on 例如
<my-component v-on:click.native="doTheThing"></my-component>

在一些情况下,我们可能需要对一个prop进行双向绑定,事实上这正是Vue1.x中的,由于破坏了单向数据流的假设,我们在2.0版本中移除.sync
但在实际应用中.sync还是有其适用之处,从2.3.0起我们重新引用了.sync 修饰符
完整实例代码如下:

<body class="">
    <div id="example">
        <div>{{bar}}</div>
        <comp v-bind:foo.sync="bar"></comp>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("comp", {
        props: ["foo"],
        template: `
        <button v-on:click="changeMessage">{{foo}}</button>
        `,
        methods: {
            changeMessage: function() {
                this.$emit('update:foo', "changedM")
            }
        }
    })
    var app = new Vue({
        el: "#example",
        data: {
            bar: "initial message"
        }
    })
    </script>
</body>

非父子组件通信
如果2个组件不是父子组件,也需要通信,在简单的场景下,可以使用一个空的Vue实例作为中央事件总线

<body class="">
    <div id="app">
        <c1></c1>
        <c2></c2>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var Bus = new Vue();
    Vue.component('c1', {
        template: '<div>{{msg}}</div>',
        data: function() {
            return { msg: 'Hello World!' }
        },
        created() {
            var self = this
            Bus.$on('setMsg', function(content) {
                self.msg = content;
            });
        },
    });
    Vue.component('c2', {
        template: '<button @click="sendEvent">Say Hi</button>',
        methods: {
            sendEvent() {
                Bus.$emit('setMsg', 'Hi Vue!!');
            }
        }
    });
    var app = new Vue({
        el: '#app'
    })
    </script>
</body>

在复杂的情况下,我们应该考虑使用专门的状态管理模式

5、使用Slot分发内容

在使用组件时,我们常常要像这样组合它们
<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

1、<app>组件不知道它会收到什么内容。这是由<app>的父组件决定的
2、<app>组件很可能有它自己的模板
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板,这个过程被称为内容分发
Vue.js实现了一个内容分发API,使用特殊的<slot>元素作为原始内容的插槽

编译作用域
在深入内容分发API之前,我们先明确内容在哪个作用域里编译,假定模板为:
<child-component>{{message}}</child-component>
message应该绑定到父组件的数据
组件作用域简单的说是:
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译

(1)单个slot
除非子组件的模板包含至少一个<slot>插口,否则父组件的内容将会被丢弃。当子组件的模板只有一个没有属性的slot时,父组件整个内容片段将插入到slot所在的DOM位置,并替换掉slot标签本身
最初在<slot>标签中的任何内容都被视为备用内容,备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容才显示备用内容

<body class="">
    <div id="example">
        <h2>父组件标题</h2>
        <my-component>
            <p>这是一些初始内容</p>
            <p>这是另一些初始内容</p>
        </my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-component", {
        template: `
          <div>
          <h2>子组件标题</h2>
          <slot>没有分发内容时显示</slot>
          </div>
        `
    })
    var app = new Vue({
        el: "#example",
    })
    //子模板要用div包裹
    </script>
</body>

最后渲染为

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

(2)具名Slot
<slot>元素可以用一个特殊的属性name来配合如何分发内容。多个slot可以有不同的名字,具名slot将匹配内容片段中有对应slot特性的元素,仍然可以有一个匿名slot,它是默认slot,作为找不到匹配的内容片段的备用插槽,如果没有默认的slot,这些找不到匹配的内容
 

<body class="">
    <div id="example">
        <my-component>
            <h2 slot="header">这是一个标题</h2>
            <h2 slot="footer">这是底部</h2>
            <h3>其它内容</h3>
        </my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-component", {
        template: `
         <div class="container">
          <header>
          <slot name="header"></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
          <slot name="footer"></slot>
          </footer>
         </div>
        `
    })
    var app = new Vue({
        el: "#example",
    })
    //子模板要用div包裹,子组件的slot 的name属性与父组件slot属性对应
    </script>
</body>

(3)作用域插槽
2.1.0新增
作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素
在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样

<body class="">
    <div id="example">
        <div class="parent">
            <child>
                <template scope="props">
                    <span>this is from parent</span>
                    <br>
                    <span>{{props.text}}</span>
                </template>
            </child>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("child", {
        template: `
         <div class="child">
            <div>child div</div>
            <slot text="hello from child"></slot>
         </div>
        `
    })
    var app = new Vue({
        el: "#example",
    })
    //可以通过模板中的scope属性获得子组件里面的text的值,父模板与子组件的正常HTML内容都会保留
    </script>
</body>

最后解析成下面 

div id="example">
        <div class="parent">
            <div class="child">
                <div>child div</div>
                <span>this is from parent</span>
                <br> 
                <span>hello from child</span></div>
        </div>
</div>

作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表的每一项

<body class="">
    <div id="example">
        <div class="parent">
            <child>
                <template slot="item" scope="props">
                    <li>{{props.tex}}</li>
                </template>
            </child>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("child", {
        template: `
         <ul>
         <slot name="item" v-for="item in items" v-bind:tex="item.text"></slot>
         </ul>
        `,
        data: function() {
            return {
                items: [
                    { text: "text1" },
                    { text: "text2" },
                    { text: "text3" },
                ]
            }
        }
    })
    var app = new Vue({
        el: "#example",
    })
    
    </script>
</body>

动态组件
通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变! -->
</component>

也可以直接绑定到组件对象上:
var Home = {
  template: '<p>Welcome home!</p>'
}
var vm = new Vue({
  el: '#example',
  data: {
    currentView: Home
  }
})

 

keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染,为此可以添加一个keep-alive指令参数
<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存! -->
  </component>
</keep-alive>

编写可复用的组件
Vue组件的API来自三部分-props,events 和slots;
Props允许外部环境传递数据给组件
Events允许从外部环境在组件内触发自定义事件
Slots允许外部环境将额外的内容组合在组件中

内联模板
如果子组件有inline-template特性,组件将把它的内容当做它的模板,而不是把它当作分发内容,这让模板更灵活

<body class="">
    <div id="example">
        <my-component inline-template>
            <div>
                <p>These are compiled as the component's own template.</p>
                <p>Not parent's transclusion content.</p>
            </div>
        </my-component>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-component",{
        
    })
    var app = new Vue({
        el: "#example",
    })
    </script>
</body>

渲染成
<div id="example">
        <div>
            <p>These are compiled as the component's own template.</p>
            <p>Not parent's transclusion content.</p>
        </div>
</div>

X-Templates
另一种定义模板的方式是在JavaScript标签里使用text/x-template类型,并且指定一个ID.例如
<script type="text/x-template" id="hello-world-template">
  <p>hello </p>
</script>
Vue.component("hello-world",{
template:"#hello-world-template"
})
这在有很多模板或者小的应用中有用,否则应该避免使用,因为它将模板和组件的其他定义隔离了

对低开销的静态组件使用v-once
尽管在Vue中渲染HTML很快,不过当组件中包含大量静态内容时,可以考虑使用v-once将渲染结果缓存起来,就像这样
Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ... a lot of static content ...\
    </div>\
  '
})

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 196
码字总数 93481
作品 0
常州
前端工程师
前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component...

cacao111
07/11
0
0
VueJS简明教程(二)之组件

上一篇:VueJS简明教程(一)之基本使用方法 组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能...

秦洛1023
07/19
0
0
在 Vue 中使用 TypeScript 的一些思考(实践)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: :使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是...

三毛丶
07/09
0
0
在 Vue 中使用 TypeScript 中的一些实践(思考)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: :使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是...

三毛丶
07/05
0
0
vue非父子组件之间的传值--bus(总线/观察者模式)

vue中父子组件的传值很简单,父组件向子组件传值通过属性的方式 <div id="app"> <hello :content="content"></hello> </div> <script type="text/javascript"> /vue父组件通过属性向子组件传......

成功需要积累
05/29
0
0
聊聊Vue.js组件间通信的几种姿势

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:https://github.com/answershuto/learnV...

染陌同学
2017/10/22
0
2
Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh
05/14
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
06/29
0
0
Vue中你不知道但却很实用的黑科技

本文纯技术干货,首发于 掘金,转载请注明出处和作者。 最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧...

Aresn
07/04
0
0
Vue(ES6)中的data属性为什么不能是一个对象?

以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象...

YaHuiLiang(Ryou)
07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

轻松搭建svn版本管理工具+svnmanager管理客户端

前面的文章有写过svn版本管理工具的安装是基于svn的安装包进行安装,对于svn与apache的结合还得下svn和apache的模块进行结合过程比较繁琐,今天来介绍下通过centos的yum来安装svn能够快速安装...

javazyw
10分钟前
0
0
keepalived配置高可用集群

Linux集群概述 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,另外一台作为冗余,当提供服务的机器宕机,冗余将接替继续提供服务 实现高可用的开源软件有:...

TaoXu
16分钟前
0
0
mysql联表批处理操作

1 概述 mysql中的单表增删改查操作,可以说是基本中的基本. 实际工作中,常常会遇到一些基本用法难以处理的数据操作,譬如遇到主从表甚至多级关联表的情况(如一些历史问题数据的批量处理),考虑到...

社哥
18分钟前
0
0
IntelliJ IDEA 详细图解最常用的配置,适合刚刚用的新人。

刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工。 比如:设置文件字体大小,代码自动完成提示,版本管理,本地代码历史,自动导入包,修改注释,修改...

kim_o
33分钟前
0
0
Google Java编程风格指南

目录 前言 源文件基础 源文件结构 格式 命名约定 编程实践 Javadoc 后记 前言 这份文档是Google Java编程风格规范的完整定义。当且仅当一个Java源文件符合此文档中的规则, 我们才认为它符合...

niithub
35分钟前
0
0
java.net.MalformedURLException异常说明

1.异常片段 Java代码中,在进行URL url = new URL(urllink)操作时,提示以下异常信息,该类异常主要问题出在参数urllink上面。 异常片段1 java.net.MalformedURLException at java.ne...

lqlm
35分钟前
1
0
CentOS7修改mysql5.6字符集

解决办法:CentOS7下修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家所需要的字符集,是国际编码。 具体操作如下: 1.进入MySQL [root@tianqi-01 ~]# mysql -uroot -p Enter passw...

河图再现
37分钟前
0
0
DevExpress v18.1新版亮点——WPF篇(一)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WPF v18.1 的新功能,快来下载试用新版本!点击下载>> Accordion Co...

Miss_Hello_World
40分钟前
0
0
Rancher 2.0集群与工作负载告警

Rancher 2.0操作指南。本文将step by step演示如何使用Rancher 2.0中集成的告警功能,包括设置通知程序、设置集群级别以及工作负载级别的告警。 在Rancher 1.x时期,告警功能是很多Rancher用...

RancherLabs
44分钟前
1
0
Python中字符串拼接的N中方法

python拼接字符串一般有以下几种方法: ①直接通过(+)操作符拼接 s = 'Hello'+' '+'World'+'!'print(s) 输出结果:Hello World! 使用这种方式进行字符串连接的操作效率低下,因为python中...

木头释然
46分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部