Vue基础
Vue简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
Vue实例
-
示例：
<body> <div id = "app"> {{ message }} </div> <script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = Vue({ el : "#app" , data :{ message : "Hello, world!" } }) </script> </body> -
el挂载点：-
作用范围：
Vue会管理
el选项命中的元素及其内部的后代元素。 -
选择器：
可以使用
id选择器、class选择器，但是建议使用id选择器。 -
dom元素：
可以使用如
<div>的双标签，不能使用HTML和Body。
-
-
data数据对象：- Vue中用到的数据定义在
data中。 data中可以写复杂类型的数据。- 渲染复杂类型数据时，遵守js的语法即可。
- Vue中用到的数据定义在
-
示例：
<body> <div id = "app"> {{ message }} <h1> {{ school.name }}, {{ school.moblie}} </h1> <ul> <li>{{ campus[0] }}</li> <li>{{ campus[1] }}</li> </ul> </div> <script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el : "#app" , data : { message : "你好", school : { name : "xx", mobile : "xxx-xxx-xxxx" } , campus : ["X校区", "y校区"] } }) </script> </body>
注：本博客内容主要来自B站黑马程序员的视频合集。
标签：el,Vue,入门,app,message,data,选择器 From： https://www.cnblogs.com/ltdwtd/p/17161579.html