一、变量的定义命名
虽然这个没有硬性规定，为了规范还是要遵循一些约定。
1、变量的定义
好的做法是将要使用的变量名用var(es6,let/const)关键字一起定义在代码的开头，变量名之间用逗号,隔开。好处：
- 便于理解，很清除下面的代码会用到哪些变量。
- 方便管理，变量定义与逻辑代码分开
- 因为js的变量提升特性（es6，let/const就没有变量提升特性了），代码之间的变量定义在编译时还是会被提到最前面，这样做也符合逻辑。
2、变量和函数名命名
- 允许包含字母、数字、美元符号
$和下划线_，但第一个字符不允许是数字，不允许包含空格和其他标点符号。（这是js规定） - 一般变量、局部变量，首单词首字母小写，后面单词首字母大写（驼峰命名法），
var winUrl = '123'。 - 对于常量、全局变量，采用全大写，单词之间下划线
_分隔（帕斯卡命名法）,var SAVE_OR_REV = true。 - jQuery选择器获后赋值变量，变量以
$开头命名。这样做可以很方便的与普通变量区分开，一看到$就知道可以直接调用jQuery相关方法。
二、引号的使用
html代码里面使用双引号""(属性值只能用双引号)，js中优先使用单引号''（虽然双引号也可以）。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p id="text"></p>
<script>
var name = '百度';
//href=".." HTML中保持双引号，JavaScript中保持单引号
document.getElementById('text').innerHTML = '<a href="http://baidu.com/">'+name+'</a>';
</script>
</body>
</html>
js中引号里面还需要引号时，单双引号嵌套才符合规则，或者用转译。坚持这样写代码清晰，不会出现这里单引号那里双引号，代码有点乱。
三、对象字面量的属性名
- 对象内属性名如果有以
-分隔单词的写法，需要加上引号把属性包裹（否则编译报错Uncaught SyntaxError: Unexpected token -），其他可以不加引号。
例如：
<script>
var obj = {
name: 'qrx',
ID: '12138',
'course-catalog': ["语文", "数学"],
courseCatalog: ["语文", "数学"],
}
</script>
- 在Vue中，自定义指令（directive）名称是驼峰格式或组件（component）名称命名是驼峰格式，调用的时候需要把驼峰转小写然后
-分隔。
自定义指令：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-test-focus>
</div>
<script>
Vue.directive('testFocus',{
inserted(el){
el.focus();
}
});
const vm = new Vue({
el:"#app",
});
</script>
</body>
</html>
定义组件：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 调用时要转-分隔 -->
<my-com1></my-com1>
</div>
<template id="tmp1">
<div>
<h3>组件名称为驼峰格式调用时要转化</h3>
</div>
</template>
<script>
Vue.component('myCom1',{ //组件名称为驼峰格式
template: '#tmp1'
});
var vm = new Vue({
el: "#app",
});
</script>
</body>
</html>
- Vue中，父组件通过属性绑定向子组件传数据，绑定的属性名如果是驼峰格式，则绑定的时候需要把驼峰转小写然后
-分隔，在子组件props数组中用驼峰形式声明。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<!-- 通过属性绑定方式把父组件数据传递给子组件内部 -->
<com1 :parent-msg = "msg"></com1>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
msg:'msg-父组件数据',
},
components:{
com1:{
template:'<h1>这是子组件——{{parentMsg}}</h1>', //子组件中使用父组件传递过来的数据
props:['parentMsg'] //父组件传递过来的属性在props数组中定义一下，这样才能使用这个数据
},
}
});
</script>
</body>
</html>
四、Vue指令后面的值
Vue指令后面的值会当作表达式来解析，直接解析为Vue实例中的data数据、者methods中的方法、js赋值等表达式等等。
如果想识别为字符串则需要在值的外层多套一层引号''。
- 例如自定义指令传参数：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 此处900可不加，本身就是数值格式 -->
<!-- red要识别为纯字符串，需要在外层再加上引号'' -->
<!-- 否则会识别为表达式报错： [Vue warn]: Property or method "red" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. -->
<span v-fontweight="900" v-color-swatch="'red'">画画</span>
<!-- 此处指令后面color识别为表达式，即vue实例data数据或方法 -->
<span v-color-swatch="color">写代码</span>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
color: 'blue',
},
directives: { //自定义私有指令
'fontweight': {
bind(el, binding) {
el.style.fontWeight = binding.value;
},
},
'color-swatch'(el, binding) {
el.style.backgroundColor = binding.value;
}
}
});
</script>
</body>
</html>
- 例如使用
component属性展现组件：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<!-- component元素使用v-bind绑定is属性的值为组件名称，需要识别为字符串外层加上引号 -->
<component :is="'sign'"></component>
</div>
<template id="templ1">
<h2>登陆组件页面</h2>
</template>
<script>
Vue.component('sign', {
template: '#templ1',
});
Vue.component('register', {
template: '#templ2',
});
var vm = new Vue({
el: "#app",
data: {
flag: true
}
});
</script>
</body>
</html>
五、组件名称和模板对象
注意：组件名称仅限于通过尖括号<>在html中去使用；在路由规则的component属性的值只能是组件模板对象，不能是路由名称。
网友评论