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

图示