1.无参数模板
模板不需要传递参数,模板内标签是固定的。
虽然内容固定,但是它支持插值表达式,即可进行简单运算(四则运算+,-,*,/,%外加逻辑运算&,|,!,>>,<<,^,吧)。比如{{1+3}}{{(123>456)}}
其模板为
app.component("ab", {
template: `<t2>{{456+123}}</t2>`,
});
假设已声明 vue
对象 pp
,则可添加模板 example
如下。
vue
对象声明组件需要在挂载之前。即mount(“#asp”)
之前。
- HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="asp">
<title_tag title_l="123456" title_r="abc"></title_tag><br />
<title_tag :title_l="title_a" :title_r="title_b"></title_tag>
</div>
</body>
<script>
//.....
</script>
</html>
-
script代码
const app = Vue.createApp({ data() { return { title_a: "ook", title_b: "error", }; }, }); app.component("title_tag", { props: ["title_l", "title_r"], template: `<a>{{title_l}}---{{title_r}}</a>`, }); app.component("example", { template: `<a>abc123</a>`, }); app.mount("#asp");
2.有参数模板
模板通过声明props
来接收参数。
传递参数值有两种形式:
- 固定值,可以像标签的
id
src
等属性一样,直接赋值。 - 动态值,把
vue
对象中data
内的变量赋值,这样模板的内容会随着此变量的变化而变化。
2.1非属性参数
- html 部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./vue.js"></script>
<title>vue模板</title>
</head>
<body>
<div id="asp">
<title_tag title_l="123456" title_r="abc"></title_tag><br />
<title_tag :title_l="title_a" :title_r="title_b"></title_tag>
</div>
</body>
<script>
//...
</script>
</html>
其中,script导入的是vue的包,应该不用多说。
HTML部分引用了两次模板,
第一次为声明一个自己写的模板,两个参数大的值是固定的,title_l=“123456” title_r=“abc”。
然后第二个是动态绑定。两个参数的值分别为vue对象app内的变量 title_a: “ook”,title_b: “error”,当这两个变量发生变化时,模板的内容也会发生变化。vue 的特色,数据驱动视图
- script代码
const app = Vue.createApp({
data() {
return {
title_a: "ook",
title_b: "error",
};
},
});
app.component("title_tag", {
props: ["title_l", "title_r"],
template: `<a>{{title_l}}---{{title_r}}</a>`,
});
app.mount("#asp");
2.2属性参数
-
HTML部分代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="asp"> <example :style_m="class_red" :click_e="a_click" text="点我red"></example> <example :style_m="class_green" :click_e="b_click" text="点我green" ></example> </div> </body> <script> //... </script> </html>
声明两个标签,分别赋值style属性、click事件、显示文本。
-
script 部分代码
const app = Vue.createApp({ data() { return { title_a: "ook", title_b: "error", class_red: "background-color:red", class_green: "background-color:green", }; }, methods: { a_click() { alert("aaaa"); }, b_click() { alert("bbbbb"); }, }, }); app.component("example", { props: ["text", "click_e", "style_m"], template: `<button @click="click_e" :style="style_m">{{text}}</a>`, }); app.mount("#asp");
定义的两个事件以作点击区分;
三个参数 文本,点击事件,style属性。