vue.js框架组件中将JavaScript和HTML代码分离的两种方式

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_33709609

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengao/p/6530933.html

版权

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 id="app">
          <my-component></my-component>
    </div>
    <!--使用<script>标签时，type指定为text/x-template，
     意在告诉浏览器这不是一段js脚本，
     浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->
    <script type="text/x-template" id="myComponent">
          <div>This is a component</div>
</script>
</body>
      <script src="js/vue.js"></script>
      <script>
          Vue.component('my-component',{
              template:'#myComponent'
          })
          new Vue({
              el:'#app'
          })
      </script>
</html>
4.使用<template></template>标签
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!--将JavaScript和HTML代码分离 ,使用script标签-->
    <div id="app">
          <my-component></my-component>
    </div>
    <!--使用script和template两种标签对js和html进行分离-->
    <!--使用使用template标签不需要写type-->
    <template id="myComponent">
          <div>This is a component</div>
    </template>
</body>
      <script src="js/vue.js"></script>
      <script>
          Vue.component('my-component',{
              template:'#myComponent'
          })
          new Vue({
              el:'#app'
          })
      </script>
</html>

转载于:https://www.cnblogs.com/zhengao/p/6530933.html

weixin_33709609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js框架组件中将JavaScript和HTML代码分离的两种方式

1.vue.js框架组件中，template选项中拼接HTML元素比较麻烦，如果将js和HTML分离开，那么代码就会很清晰了这样也便于阅读和维护代码。2.方法：使用<script></script>和<template></template>标签3.实现例子：1）使用<script></script>&lt...
复制链接

扫一扫