Inline data binding using Weex / Vue?

Question

<template>
    <div class="demo">
        <profile-header :title="profileTitle" :imagePath="profileImagePath"></profile-header>   
    </div>
</template>

<style scoped>
    .demo {
        width: 750px;
        background-color: #f2f3f4;
    }
</style>

<script>
    import ProfileHeader from '../components/profile-header.vue'
    export default {
        components: { ProfileHeader },
        data () {
            return {
                profileTitle: "Lorem Ipsum",
                profileImagePath: "http://...."
            }
        }
    }
</script>

In Weex, I created a reusable component "profile-header" with title and imagePath properties. It appears that I can only pass the data to these two attributes using the code presented above, where I need to define two variables.

Is there anyway where I can pass data to my custom component by inlining the data right there? Like:

 <profile-header :title="This is the hardcoded title" :imagePath="hard coded path"></profile-header>

Answer 1

<profile-header title="This is the hardcoded title" imagePath="hard coded path"></profile-header>

or

<profile-header :title="'This is the hardcoded title'" :imagePath="'hard coded path'"></profile-header>

In the first case, you are simply not binding and the props are treated as strings. In the second case, you are binding a hard coded string (note the quotes).