万字血书Vue—走近Vue

  • 万字血书Vue—走近Vue已关闭评论
  • 144 次浏览
  • A+
所属分类:Web前端
摘要

Vue是一套用于构建用户界面的渐进式JavaScript框架构建用户界面:用vue往html页面中填充数据

万字血书Vue—走近Vue

Vue是什么?

Vue是一套用于构建用户界面渐进式JavaScript框架

  • 构建用户界面:用vue往html页面中填充数据

  • 渐进式:Vue可以自底向上逐层的应用,从轻量小巧核心库的简单应用,到引入各式各样插件的复杂应用。

  • 框架:一整套现成的解决方案,遵守框架的规范,学习框架,就是学习框架中的规定用法

谁开发的?

https://zhuanlan.zhihu.com/p/58335278

Vue特点

  1. 采用组件化模式,提高代码复用率,且让代码更好维护。
  2. 声明式编码,开发人员无需操作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="../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>