字符串模板~ES6字符串拼接模板 （七）

<script src="vue.js"></script>

<div id="demo"></div>

//单独把结构写在字符串str里:var str='<div>Hello,Vue</div>'; 
//以上的方式会有个弊端，就是如果换行，后台就会报错。

//如果存在变量Vue,写法如下：
//var str = '<div>Hello,"' + Vue + '"</div>';

//使用ES6字符串拼接模板方法 ` ` 的形式：
//如果存在变量在str里面呢？则使用双大括号文本插值的形式{{}}包住变量；
var str = `<h2>Hello,{{Vue}},
              <p>How are you</p>
            </h2>
          `;

console.log(str); 

//那怎么把上面的str放进结构里呢?

//在Vue实例里再加一个属性是template,后接str；如下：
var vm = new Vue({
    el:'#demo',
    data:{
        Vue:'jack'
    },
    template:str
})

注意：字符串模板template 会替换原始的html结构的；