万字血书Vue—走近Vue
导读：Vue是什么？ Vue是一套用于...
Vue是什么？
Vue是一套用于构建用户界面的渐进式JavaScript框架
构建用户界面：用vue往html页面中填充数据
渐进式：Vue可以自底向上逐层的应用 ，从轻量小巧核心库的简单应用 ，到引入各式各样插件的复杂应用 。
框架：一整套现成的解决方案 ，遵守框架的规范 ，学习框架 ，就是学习框架中的规定用法
谁开发的？
https://zhuanlan.zhihu.com/p/58335278
Vue特点
采用组件化模式 ，提高代码复用率 ，且让代码更好维护 。 声明式编码 ，开发人员无需操作DOM ，提高开发效率 。Vue文档
https://v2.cn.vuejs.org/
https://cn.vuejs.org/
起步
<!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>Document</title> <!-- 引入Vue --> <script type="text/javascript" src="https://www.cnblogs.com/gfhcg/archive/2023/03/js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h1>Hello World!</h1> <h1>Hello {{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示 //创建Vue实例 //容器和实例 一一对应 const vm=new Vue({ el:#root,//用于指定当前Vue为哪个容器服务 ，值通常为css选择器字符串 ，不能基于body和html初始化 data:{//data中用于存储数据 ，供el指定的容器使用 name:张三, } }) </script> </body> </html>el和data的第二种写法:
<body> <div id="app">{{username}}</div> #导入脚本文件 <script src="https://www.cnblogs.com/gfhcg/archive/2023/03/17/vue.js"></script> <script> const vm=new Vue({ data(){ //此处this指向vue实例 return{ username:zs } } }) vm.$mount=(#app)//挂载 //data:对象式和函数式 ，组件时只能用后者 ，不能用箭头函数this会指向window而不是vue </script> </body>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！