1.vue.js框架组件中,template选项中拼接HTML元素比较麻烦,如果将js和HTML分离开,那么代码就会很清晰了
这样也便于阅读和维护代码。
2.方法:使用<script></script>和<template></template>标签
3.实现例子:
1)使用<script></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--将JavaScript和HTML代码分离 ,使用script标签-->
<div >4.使用<template></template>标签
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--将JavaScript和HTML代码分离 ,使用script标签-->
<div ></script>
<script>
Vue.component('my-component',{
template:'#myComponent'
})
new Vue({
el:'#app'
})
</script>
</html>