Vue准备

  1. Vue 模板
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>
</html>
  1. Vue导入-挂载点
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>
</head>
<body>
    <div id="app">
        <hr>
        <p class="p1">{{ }}</p>
        <hr>
        <p class="p2">{{ }}</p>
        <hr>
        <p id="p">
            <b>{{ }}</b>
            <i>{{ }}</i>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    console.log(Vue);
    // new Vue({
    //    el: '.p1',
    // });
    // new Vue({
    //     el: '.p2'
    // });
    // new Vue({
    //     el: '#p'
    // })

    // el为挂载点,才有css3选择器语法与页面标签进行绑定,决定该vue对象控制的页面范围
    // 1.挂载点只检索页面中第一个匹配到的结果,所以挂载点一般都才有id选择器
    // 2.html与body标签不可以作为挂载点(组件中解释)
    new Vue({
        el: '#app',
    })
</script>
</html>

猜你喜欢

转载自www.cnblogs.com/zfb123-/p/11846033.html