vue官网传送门vue官网
下面是第一个vue程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { message: "welcome to vue!" } }) </script> </body> </html>
其中的核心部分是这一块
首先第一行的哪个div是我们要显示的内容,现实的内容用{{message}}这个变量来替代,message的值呢,在下边我们new了一个Vue对象,里边的el表示选择的对象元素,他选择了id为app的一个标签,标签里边的内容呢就是message所代表的"welcome to vue!"
不只是div其他的只要是闭合的标签都可以使用
可以看到下边的这个name也可以显示出来
vue实例的范围
{{ }}是不是可以放到任何位置呢,如下
可以看到div标签的外面引入是没有作用的
如果写在el所表示的哪个标签的里边的子标签里边发现也是可以显示的,
由此说明,vue的实例范围就是el所选择的标签的内部所有位置
el不止可以用id还可以用class和标签选择器来选中某个元素
body标签是否可以用作el来选择
可以看到并没有显示出来,并且还爆了错,提示说不要把el挂载到body上边,看来body并不支持vue的操作
