menu
more_vert

Vue.js初探

作者:dayu

>{{aa}}</li> </ul> <!-- <button @click="add()">外部添加</button> --> </div> <button onclick="add()">外部添加</button> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> function add(){ console.log("我已经执行了"); //app.arr[1]=‘ddd‘; //我们需要用Vue.set(app.arr,1,’ddd’)来设置改变,vue才会给我们自动更新 Vue.set(app.arr,1,ddd); } //在构造器外部声明数据 var outData={ arr:[aaa,bbb,ccc] }; var app=new Vue({ el:#app, data:outData }) </script> </body> </html>

Template 制作模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>template 模板</title>
</head>
<body>
    <div class="container">
        <h1>template 模板</h1>
        <hr>
        <div id="app">
            <h4>{{message}}</h4>
        </div>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:#app,
            data:{
                message: hello Vue!
            },
            template: `<h4 style="color:green">template选项模板</h4>`
        })
    </script>    
</body>
</html>

当模板内容较多时上面的方式就不那么方便了,来看看template的标签模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>template 模板</title>
</head>
<body>
    <div class="container">
        <h1>template 模板</h1>
        <hr>
        <div id="app">
            <h4>{{message}}</h4>
        </div>
    </div>
    <template id="demo">
             <h2 style="color:red">我是template标签模板</h2>
    </template>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:#app,
            data:{
                message: hello Vue!
            },
            template: #demo
        })
    </script>    
</body>
</html>

Component 组件

在构造器外部注册全局化 Vue.component:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>Vue component</title>
</head>
<body>
    <div class="container">

        <!-- 组件标签 -->
        <small>*** 全局化就是在构造器的外部用Vue.component来注册</small>

        <div id="app">
            <h5>{{ message }}</h5>
            <hr />
            <momei></momei>
        </div>

    </div>
</body>
  <script src="https://unpkg.com/vue"></script>
    <script>
        //注册全局组件
        Vue.component(momei,{
            template:`<div style="color:red;">全局化注册的jspang标签</div>`
        })
        var app=new Vue({
            el:#app,
            data:{
                message: Component组件
            }
        })  
    </script>
</html>

局部注册和全局注册相对,只在其作用域可用:

<script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            components:{
                "momei":{
                    template:`<div>局部注册的panda标签</div>`
                }
            }
        })
</script>

components写在构造器内且加上了S。

Comonent 组件的props属性设置

propr选项就是设置和获取标签上的属性值。

<panda from-here="XIAN"></panda>

var app=new Vue({
    el: ‘#app‘,
    components: {
        "panda": {
             template: `<div>Panda from {{ fromHere }}.</div>`,
             props: [‘fromHere‘]  // 注意此处采用驼峰书写
        }
    }
})

Component 父子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>component 父子组件</title>
</head>
<body>
    <div class="container">
        <div id="app">
            <h3>{{ messgae }}</h3>
            <hr />
            <momei></momei>  
        </div>
    </div>
</body>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
       var city={
           template:`<div>from xian!</div>`
       }
        var momei = {
            template:`<div>
                        <p> 八百里秦川</p>
                        <city></city>
                    </div>`,
            components:{
                "city":city
            }
        }
        var app=new Vue({
            el:#app,
            data: {
                messgae: component 父子组件嵌套
            },
            components:{
                "momei":momei
            }
           
        })
    </script>
</html>

Component 标签

<component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。

定义组件:

var componentA = {
    template: `<h1 style="color:red;">Im componentA</h1>`
};
 var componentB = {
     template: `<h1 style="color:red;">Im componentB</h1>`
};
var componentC = {
    template: `<h1 style="color:red;">Im componentC</h1>`
};

compoments 挂载组件:

components:{
    "componentA":componentA,
    "componentB":componentB,
    "componentC":componentC,
}

在html里书写component标签,通过数据绑定,调用组件。

至此Vue的全局API已有一定的认识,要做的就是多多实践,去发现,去建立信心,去走更远。

Vue.js初探

原文地址:http://www.cnblogs.com/momei/p/7205002.html