Vue.js使用v-bind创建一个按钮

Question

我在使用Vue运行组件时遇到问题。我不知道我是否使用了正确的CDN链接，但它似乎根本不起作用。

模板

<div id="app">
    <button v-on:click="showing = !showing">show or hide</button>

    <transition name="slide-fade" tag="div">
        <div v-if="showing">Hello!</div>
    </transition>
    <weather-meter></weather-meter>
</div>

<script type="text/x-template" id="weather-meter-template">
    <div>
        Today's high: {{high}}
        <div class="pointer" v-bind:style:="{width: showHigh}"></div>
        How we  feel about this: {{ourFeelings}}
    </div>
</script>

Javascript

    new Vue({
    el:'app',
    data: function(){
        return{
            showing: true
        }
    }
});
    Vue.component("weather-meter", {
        template:"#weather-meter-template",
        data:function (){
            return{
                high:40,
                shownHigh: 40,
                ourFeelings: "meh"
            }

这些是我正在使用的CDN脚本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>