vue其他杂七杂八

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杂七杂八</title>
</head>
<body>
    <div id="parent">
        <user ref="profile"></user>
    </div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('user',{
        template:'<p>你好,蔡蔡</p>'

    })
    var vm=new Vue({
        el:'#parent',
        data:{
        }
    })
    var child=vm.$refs.profile  //取得这个组件的实例:


</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杂七杂八</title>
</head>
<body>
    <div id="parent">
        <user ref="profile"></user>
    </div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('user',{
        template:'<p>你好,蔡蔡</p>'

    })
    var vm=new Vue({
        el:'#parent',
        data:{
        }
    })
    var child=vm.$refs.profile  //取得这个组件的实例:


</script>
</html> -->

<!-- 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步组件</title>
</head>
<body>

    <div id="box">
        <z-jian></z-jian>
    </div>
    
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('zJian',function(cana,canb){   //组件名称可定义为zJian z-jian ZJian  这几种  但在html里区分大小写                                                      全部写成z-jian   在templates  模版里可写成与组件名一样的格式
        setTimeout(function(){
            cana({
                template:'<div> hello caicai !</div>'
            })

        },1000)

    })
    new Vue({
        el:'#box',
        data:{}
    })
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步组件</title>
</head>
<body>

    <div id="box">
        <z-jian name="stack-overflow"></z-jian>
    </div>
    
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('z-jian',{
        name:'stack-overflow',
        template:'<div><stack-overflow>哈哈哈哈</stack-overflow></div>'
    })
    new Vue({
        el:'#box',
        data:{}
    })
    
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态组件</title>
</head>
<body>
    <div id="box">
        <terms-of-service></terms-of-service>
    </div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('terms-of-service', {
      template: '\
        <div v-once>\
          <h1>Terms of Service</h1>\
          ... a lot of static content ...\
        </div>\
      '
    })
    new Vue({
        el:"#box",
    })
    //你可以在模板内部使用v-once,这样可以生成缓存,节约不少性能;
</script>
</html> -->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x-template</title>
</head>
<body>
    <div id="box">
        <zjname></zjname>
    </div>
    
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/x-template" id="zj">
      <p>对于html内容比较多的模板,你可以把模板定义在外面:</p>
</script>
<script type="text/javascript">

    Vue.component('zjname',{
        template:"#zj"

    })
    new Vue({
        el:'#box',
    })

</script>

</html>

 

posted @ 2017-10-19 22:50  Jinsuo  阅读(146)  评论(0编辑  收藏  举报