目录
全局组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<!-- 第一种写法 -->
<div id="box"><quanju></quanju></div>
<!-- 第二种写法,写在网页端 -->
<div id="div1"><seccc></seccc></div>
<!-- 第二种写法,自定义内容(第二种推荐写法) -->
<template id="tt3"><h1 @click="fn1()">自定义标签的第二种写法</h1><span></span></template>
<script type="text/javascript">
//全局组件化，格式： component(自定义标签名,标签和内容，但需要注意，根只有一个)
//错误示范： template:"<div></div><div></div>" 必须只有一个大的范围包围，不能并行
//第一种写法,可读性极差
Vue.component("quanju",{template:"<h1>hello world </h1>"});
var vm=new Vue({
el:"#box"
});
//第二种写法，推荐
Vue.component("seccc",
{
template:"#tt3",
//也可以设置属性,但只能在组块内使用
data:function(){
return {mes:"吴师傅",age:18}
},
methods:{
fn1(){
console.log("也可以有方法的哦");
}
}
})
var tm=new Vue({
el:"#div1"
});
</script>
</body>
</html>`
最低0.47元/天 解锁文章
1545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
