- A+
所属分类:Web前端
Vue是什么?
Vue是一套用于构建用户界面的渐进式JavaScript框架
-
构建用户界面:用vue往html页面中填充数据
-
渐进式:Vue可以自底向上逐层的应用,从轻量小巧核心库的简单应用,到引入各式各样插件的复杂应用。
-
框架:一整套现成的解决方案,遵守框架的规范,学习框架,就是学习框架中的规定用法
谁开发的?
https://zhuanlan.zhihu.com/p/58335278
Vue特点
- 采用组件化模式,提高代码复用率,且让代码更好维护。
- 声明式编码,开发人员无需操作DOM,提高开发效率。
Vue文档
起步
<!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="../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="vue.js"></script> <script> const vm=new Vue({ data(){ //此处this指向vue实例 return{ username:'zs' } } }) vm.$mount=('#app')//挂载 //data:对象式和函数式,组件时只能用后者,不能用箭头函数this会指向window而不是vue </script> </body>