1.VUE准备工作

83 阅读1分钟

引入VUE:

产生一个全局的Vue“构造函数”,调用时用“new”创建实例:new Vue()

<head>
    <!-- 引入Vue -->
    <scrip type="text/javascript" src="../Vue_js/vue.js"></scrip>
</head>

创建容器:

“root”容器里的代码被称为“Vue模板”

<body>
    <!-- 准备一个容器 -->
    <div id="root">
    </div>
<body>

创建Vue实例:

“const x = new Vue()”由function Vue() {} 实例化出的Vue对象“this”为“x”Object对象,“this”属于Vue构造函数“this instanceof Vue ➡ true”

</body>
     <script type="text/javascript">
         Vue.config.productionTip = false  // 阻止提示
         // 创建Vue实例
         const x = new Vue()
     </script>
</body>

为Vue的实例传参,参数为一个对象{}:

const x = new Vue({
     el:'#root',  // e1用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
     data:{
         name:'Vue',
         url:'百度一下,你就知道'
     }  // data中用于存储数据,数据供e1所指定的容器去使用
})

在容器内利用“插值语法{{}}”读取data数据:

<div id="root">
    <h3>你好,{{name}}</h3>
</div>