vue.js框架组件中将JavaScript和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>


posted @ 2017-03-10 15:27  gz_blog  阅读(2578)  评论(0)  编辑  收藏  举报