Vue初识、el、data

it2023-02-26 74

2020年10月20日真是痛苦的一天

第一个VUE程序

步骤

导入开发版本的Vue.js创建Vue实例对象，设置el属性和data属性使用简洁的模板语法把数据渲染到页面上 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="text"> {{ message }} </div> <script> const text = new Vue({ el: '#text', data: { message: '我搞' } }) </script> </body>

el挂载点

作用设置Vue实例挂载(管理)的元素

Veu实例的作用范围是什么 Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他选择器可以使用其他的选择器，建议使用ID选择器

是否可以设置其他的dom元素可以使用其他的双标签，不能使用HTML和BODY

data：数据对象

Vue中用到的数据定义在data中data中可以写复杂类型的数据渲染复杂类型数据时，遵守js的语法即可 <div id="app"> {{ message }} <h2> {{ school.name }} {{ school.mobile }}</h2> <ul> <li>{{ campus[0] }}</li> <li>{{ campus[3] }}</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:"黑马程序员", mobile:"400-618-9090" }, campus:["北京校区","上海校区","广州校区","深圳校区"] } }) </script>

最新回复(0)