<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初识vue</title> <!-- 引入Vue --> <script src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h1>Hello！{{name}}!</h1> </div> <script> Vue.config.productionTip = false // 阻止vue在启动时生成生产提示 new Vue({ el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{ //data用于存储数据，数据共el所指定的容器去使用 name:'JOJO' } }) </script> </body> </html>
效果：
注意：
想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新
