<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>component组件学习</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/Vue2.5.16.js"></script>
</head>
<body>
<div id="lucky">
<input type="text" v-model="inputInt">
<button @click="myClick">提交</button>
<ul>
<!-- <li v-for="list in content">{{list}}</li> -->
<first-component
v-bind:fristcontent="list"
v-for="list in content">
</first-component >
</ul>
</div>
<script>
//全局组件
// Vue.component("first-component" ,{
// props: ["fristcontent"] ,
// template: "<li>{{fristcontent}}</li>",
// })
//局部组件
var firstComponent = {
props: ["fristcontent"],
template: "<li>{{fristcontent}}</li>"
}
var millia = new Vue({
el: "#lucky",
components: {
"first-component": firstComponent,
},
data: {
inputInt:"",
content: []
},
methods: {
myClick: function(){
this.content.push(this.inputInt);
this.inputInt = "";
}
}
});
</script>
</body>
<html>知识点
组件的命名和DOM引用方式：
kebab-case 短横线分隔命名：例如：my-component my-component-name
PascalCase 驼峰和首字母大写命名：例如：MyComponent myComponent
注意：
直接在DOM中使用时只有kebab-case 短横线分隔命名有效。所以直接在DOM中使用自定义组件时，自定义组件名：字母全小写必须包含 -(横线)一个连字符。
组件 (Component) 分全局组件和局部组件两种
全局组件注册方式：
Vue.component(组件名,{方法})
Vue.component("my-component",{
template:"<h1>我是全局组件</h1>"
});
注意：
全局组件必须写在Vue实例创建之前，才在该根元素下面生效；
模板里面第一级只能有一个标签，不能并行。例：
Vue.component("my-component", {
template: "<h1>我是全局组件</h1>"+"<p>我是全局组件内标签</p>"
});
Vue.component("my-component", {
template: "<h1>我是全局组件<p>"+"我是全局组件内标签</p></h1>"
});
局部组件注册方式，直接在Vue实例里面注册
var child={
template:"<h1>我是局部组件</h1>"
};
new Vue({
el: "#app1",
components:{
"child-component":child
}
});
注意：
属性名为components，s千万别忘了;
建议模板定义在一个全局变量里，代码看起来容易一点
props使用方法
Vue.component('my-component',{
props:['message'],
template:'<div class="tem1">{{message}}</div>'
});
<my-component message="hello"></my-component>
注意：
props 的声明需要放在template的前面
props可以使用实例中的变量赋值
如果使用PascalCase 驼峰和首字母大写命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名
全局组件可以获取用使用prop 的做操作
关于js变量命名要求
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
