0%

模板语法(插值语法和指令语法)

<div id="root">
        <!-- 插值语法:用于解析标签体内容,可以是js表达式 -->
        <h1>Hello,{{name}}</h1>
        <h1>Hello,{{i+5}}</h1>
        <!-- 指令语法:用于解析标签,也可以写js表达式 -->
        <a v-bind:href="school.url">我的名字叫{{school.name}}</a>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建Vue实例
        new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务,值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                i: 5,
                name: '西南大学',
                school: {
                    name: '卢航我儿',
                    url: 'https://lzkpersonal.com.cn'
                }
            }
            //data用于存放数据,数据供el所指定容器服务
        })
    </script>