vue2.0模板的三种写法

vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现

    <!DOCTYPE html> 
  
    < 
   html 
   lang= 
   "en"> 
  
    < 
   head> 
  
    < 
   meta 
   charset= 
   "UTF-8"> 
  
    < 
   meta 
   name= 
   "viewport" 
   content= 
   "width=device-width, initial-scale=1.0"> 
  
    < 
   meta 
   http-equiv= 
   "X-UA-Compatible" 
   content= 
   "ie=edge"> 
  
    < 
   title>vue2.0的模板</ 
   title> 
  
    < 
   script 
   src= 
   "js/vue.js"></ 
   script> 
  
    </ 
   head> 
  
    < 
   body> 
  
    < 
   div 
   id= 
   "app"> 
  
    </ 
   div> 
  
    </ 
   body> 
  
    < 
   script 
   type= 
   "text/javascript"> 
  
   var app 
   =new 
   Vue({ 
  
    el: 
   "#app", 
  
    data:{ 
  
    }, 
  
    template: 
   ` 
  
   <h1 style="color:red">第一种写法</h1> 
  
   ` 
  
    }) 
  
    </ 
   script> 
  
    </ 
   html>

第一种方法使用与比较少的内容量可以使用它,利用``的方式来实现

    <!DOCTYPE html> 
  
    < 
   html 
   lang= 
   "en"> 
  
    < 
   head> 
  
    < 
   meta 
   charset= 
   "UTF-8"> 
  
    < 
   meta 
   name= 
   "viewport" 
   content= 
   "width=device-width, initial-scale=1.0"> 
  
    < 
   meta 
   http-equiv= 
   "X-UA-Compatible" 
   content= 
   "ie=edge"> 
  
    < 
   title>vue2.0的模板</ 
   title> 
  
    < 
   script 
   src= 
   "js/vue.js"></ 
   script> 
  
    </ 
   head> 
  
    < 
   body> 
  
    < 
   div 
   id= 
   "app"> 
  
    </ 
   div> 
  
    < 
   template 
   id= 
   "template"> 
  
    < 
   h1>我是模板的第二种写法</ 
   h1> 
  
    </ 
   template> 
  
    </ 
   body> 
  
    < 
   script 
   type= 
   "text/javascript"> 
  
   var app 
   =new 
   Vue({ 
  
    el: 
   "#app", 
  
    data:{ 
  
    }, 
  
    template: 
   "#template" 
  
    }) 
  
    </ 
   script> 
  
    </ 
   html>

第二种应该是项目中最常见的写法,利用template标签来实现内容的填充,最终通过id或者其他的选择器挂载到template上面,如果用vue-cli,它的模板应该如下面的代码所示

    < 
   template> 
  
   <!-- 页面的内容 --> 
  
    </ 
   template> 
  
    < 
   script> 
  
   /* 页面的js */ 
  
    </ 
   script> 
  
    < 
   style 
   scoped> 
  
   /* 页面的样式 
  
   注意:scoped的作用是style中所有的样式只对本页的html起作用 
  
   */ 
  
    </ 
   style>

    <!DOCTYPE html> 
  
    < 
   html 
   lang= 
   "en"> 
  
    < 
   head> 
  
    < 
   meta 
   charset= 
   "UTF-8"> 
  
    < 
   meta 
   name= 
   "viewport" 
   content= 
   "width=device-width, initial-scale=1.0"> 
  
    < 
   meta 
   http-equiv= 
   "X-UA-Compatible" 
   content= 
   "ie=edge"> 
  
    < 
   title>vue2.0的模板</ 
   title> 
  
    < 
   script 
   src= 
   "js/vue.js"></ 
   script> 
  
    </ 
   head> 
  
    < 
   body> 
  
    < 
   div 
   id= 
   "app"> 
  
    </ 
   div> 
  
    </ 
   body> 
  
    < 
   script 
   type= 
   "x-template" 
   id= 
   "template"> 
  
    <h2>我是模板的第三种写法</h2> 
  
    </ 
   script> 
  
    < 
   script 
   type= 
   "text/javascript"> 
  
   var app 
   =new 
   Vue({ 
  
    el: 
   "#app", 
  
    data:{ 
  
    }, 
  
    template: 
   "#template" 
  
    }) 
  
    </ 
   script> 
  
    </ 
   html>

这种写法是改变了script中的type.变为type="x-template",并且给它id,最终挂载到template中就可以了,使用于内容比较多或有公共的模板,可以使用,引入就可以了

vue2.0模板的三种写法

猜你喜欢