vue 组件属性props,特性驼峰命名,连接线使用

Posted 2020-08-29 啊啦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件属性props,特性驼峰命名,连接线使用相关的知识，希望对你有一定的参考价值。

今天在学习vue的时候碰到了一个有趣的问题

是这样的,先来个话题引入,后面会用到

var myname={
    \'first-name\':\'9\',
    \'last-name\':\'l o n g\'
}
console.log(myname.first-name);
console.log(myname[\'first-name\']);

　　打印出来是 NaN 9

解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,name也不知道是什么,所以会 undefined-undefined=NaN

++++++++++++++++++++++++++++++++++++++++++++++++++++华丽的分割线+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

下面是vue组件属性的例子,直接看图,这个组件有三个属性 username userName user-name 然后再页面中使用这个组件,展示页面.

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <my-component  username="username"   userName="userName" user-name="user-name"></my-component>
</div>
<script>
    Vue.component(\'my-component\',{
        template:\'<p class="baz boo">用户名是:{{username}},驼峰用户名是:{{userName}},连接线用户名是:{{user-name}}</p>\',
        props:[\'username\',\'userName\',\'user-name\']
    });
var vm=new Vue({
    el:\'#app\'
});
</script>
</body>
</html>

View Code

图示