02.Vue模板语法

76 阅读1分钟

image.png

 <div id="root">
    <h1>插值语法</h1>
    <h3>hello, {{name.toUpperCase()}}!</h3>
    <hr />
    <h1>指令语法</h1>
    <a v-bind:href="url">点我到掘金网址</a><!-- v-bind:可以简写为: -->
    <a :href="Date.now()">也要写js表达式</a>

</div>
<script>
    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

    //创建Vue实例
    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
        data: {//data用于储存数据,数据供el指定的容器使用,值我们先暂时写成一个对象
            name: 'world',
            url: 'https://juejin.cn/'

        }
    })
</script>

image.png

总结

image.png