第一章 Vue核心 第一节 初识Vue
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么模板用到该数据的地方也会自动更新；
注意区分：js表达式和js代码（语句）
1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码（语句）
(1). if(){}
(2). for(){}
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识Vue</title> <!--引入Vue--> <script src="../lib/vue.js"></script> </head> <body> <!--学习Vue的前置知识： ES6语法规范 ES6模块化 包管理器 原型、原型链 重点 数组常用方法 axios promise --> <!--准备好一个容器--> <div id="root"> <h1>hello,{{name}}</h1> <!--{{}}中必须是js表达式 插值语法--> <h1>my age is:{{age}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false ; //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'#root', //el element的缩写用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串，也可以是元素对象 data:{ //存储数据，供el指定的容器使用 name:'retrace', age:21 } }); </script> </body> </html>
本文作者：何以之
本文链接：https://www.cnblogs.com/serendipity-echo/articles/15398606.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步