<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!-- 使用组件 --> <userlist></userlist> <Login></Login> <!-- 组件的使用分为三部分 --> <!-- 第一步创建组件 --> <!-- 第二部注册组件 --> <!-- 第三步使用组件 --> </div> <div id="app1"> <userlist></userlist> <Login></Login> <helloworld></helloworld> </div> <!-- 小细节,VUE中是可以使用自闭和标签的,但是前提是必须在脚手架环境使用 --> <!-- 在创建组件的时候,可以省略Vue.extend,但是底层依旧调用了 --> <!-- 组件的名字要求如下,全部小写或首字母大写,后面全部小写 --> <!-- 或者驼峰命名都可以 --> <!-- 不要用HTML标签的名字做组件的名字 --> <script> // 创建组件 const abc = { template : `<h1>哈哈哈哈哈哈</h1>` }; Vue.component("helloworld",abc); // 创建组件 const myCon1 = Vue.extend({ template : ` <div> <h3>用户登录</h3> <form @submit.prevent="login()"> 账号:<input type="text" v-model="username"/><br><br> 密码:<input type="password" v-model="password"/><br><br> <button>登录</button> </form> </div> `, data(){ return { username : "", password : "" } }, methods : { login(){ alert(this.username+this.password); } } }); // 第一步创建组件,传递的内容和我们new Vue传递的内容几乎是一样的 const myCon = Vue.extend({ // 创建组件的时候,不能使用EL配置项,只能使用TEMPLATE配置项(模板语句) template : ` <ul> <li v-for="user,index in users" :key="user.id"> {{index}}:{{user.id}}:{{user.name}} </li> </ul> `, // 创建组件的时候,配置项不能使用el配置项 // 在组件中的data必须是function返回对象的方式获取数据 // 配置项的data必须使用function data() { return { users : [ {id : "001",name : "Jack"}, {id : "002",name : "Rose"}, {id : "003",name : "Tom"}, {id : "004",name : "Jerry"} ] } } // 如果是大括号的形式就会导致多个data共享一个数据,复用就实现不了 // 比方说我们在多个页面中都使用了同一个组件 // 一旦该组件的数据更新,就会导致我们多个页面的内容遭到更新 // 使用函数的形式就能保证每次返回的是一个单独的数据 }); // 搞一个全局注册 Vue.component('userlist',myCon); Vue.component('Login',myCon1); const vm = new Vue({ el : "#app", data : { msg : "Hello" }, // 这里是局部注册 // 注册组件在这里注册 components : { // 左边是我们组件的名字,右边是组件 userlist : myCon, Login : myCon1 } }); const vm1 = new Vue({ el : "#app1" }); // let data = { // counter : 1 // }; // function data(){ // return { // counter : 1 // } // }; // let x = data(); // let y = data(); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 使用组件 -->
<userlist></userlist>
<Login></Login>
<!-- 组件的使用分为三部分 -->
<!-- 第一步创建组件 -->
<!-- 第二部注册组件 -->
<!-- 第三步使用组件 -->
</div>
<div id="app1">
<userlist></userlist>
<Login></Login>
<helloworld></helloworld>
</div>
<!-- 小细节,VUE中是可以使用自闭和标签的,但是前提是必须在脚手架环境使用 -->
<!-- 在创建组件的时候,可以省略Vue.extend,但是底层依旧调用了 -->
<!-- 组件的名字要求如下,全部小写或首字母大写,后面全部小写 -->
<!-- 或者驼峰命名都可以 -->
<!-- 不要用HTML标签的名字做组件的名字 -->
<script>
// 创建组件
const abc = {
template : `<h1>哈哈哈哈哈哈</h1>`
};
Vue.component("helloworld",abc);
// 创建组件
const myCon1 = Vue.extend({
template : `
<div>
<h3>用户登录</h3>
<form @submit.prevent="login()">
账号:<input type="text" v-model="username"/><br><br>
密码:<input type="password" v-model="password"/><br><br>
<button>登录</button>
</form>
</div>
`,
data(){
return {
username : "",
password : ""
}
},
methods : {
login(){
alert(this.username+this.password);
}
}
});
// 第一步创建组件,传递的内容和我们new Vue传递的内容几乎是一样的
const myCon = Vue.extend({
// 创建组件的时候,不能使用EL配置项,只能使用TEMPLATE配置项(模板语句)
template : `
<ul>
<li v-for="user,index in users" :key="user.id">
{{index}}:{{user.id}}:{{user.name}}
</li>
</ul>
`,
// 创建组件的时候,配置项不能使用el配置项
// 在组件中的data必须是function返回对象的方式获取数据
// 配置项的data必须使用function
data()
{
return {
users : [
{id : "001",name : "Jack"},
{id : "002",name : "Rose"},
{id : "003",name : "Tom"},
{id : "004",name : "Jerry"}
]
}
}
// 如果是大括号的形式就会导致多个data共享一个数据,复用就实现不了
// 比方说我们在多个页面中都使用了同一个组件
// 一旦该组件的数据更新,就会导致我们多个页面的内容遭到更新
// 使用函数的形式就能保证每次返回的是一个单独的数据
});
// 搞一个全局注册
Vue.component('userlist',myCon);
Vue.component('Login',myCon1);
const vm = new Vue({
el : "#app",
data : {
msg : "Hello"
},
// 这里是局部注册
// 注册组件在这里注册
components : {
// 左边是我们组件的名字,右边是组件
userlist : myCon,
Login : myCon1
}
});
const vm1 = new Vue({
el : "#app1"
});
// let data = {
// counter : 1
// };
// function data(){
// return {
// counter : 1
// }
// };
// let x = data();
// let y = data();
</script>
</body>
</html>