Vue笔记

  • Vue笔记已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

一套用于构建用户界面的渐进式javascript框架构建用户界面:拿到的数据转换为用户可以看到的数据


vue简介

1.vue是什么

一套用于构建用户界面渐进式javascript框架

构建用户界面:拿到的数据转换为用户可以看到的数据

渐进式:vue可以自底向上逐层用 从一个轻量小巧的库逐渐递进到使用各式各样的vue插件

2.vue开发者(老二次元了,哈哈)

2013 受到Angular的启发,尤雨溪开发出了一款轻量框架Seed同年12月,Seed更名为vue 版本号0.6.0
2014 vue正式对外发布,版本0.8.0
2015 10月27日,正式发布vue1.0.0 Evangelion(新世纪福音战士)
2016 10月1日,正式发布vue2.0.0 Ghost in the Shell(攻壳机动队)
2020 10月27日,正式发布vue1.0.0 One Piece(海贼王)

3.vue的特点

采用组件化模式,提高代码的复用率,且代码更好的维护

Vue笔记

声明式编码 让编码人员无需操作DOM,提高开发效率

声明式编码和命令式编码区别

1.命令式:举个例子就是说一下做一下不说就不做

2.声明式:举个例子就是口有点干,说一声口有点干 然后就会有人给我泡茶倒水端到我跟前

4.虚拟DOM

  • 虚拟DOM就是内存中的一个数据vue可以最后转换成真实的DOM

Vue笔记

把代码转换为虚拟的DOM然后虚拟DOM转换为真实DOM,如果数据中新添加了赵六,vue会创建一个新的DOM,然后会跟旧的DOM作比较(通过Diff算法)没有改变的数据直接复用,然后转换为页面的真实DOM

vue开发环境

1.引入vue文件

<script type="text/javascript" src="https://unpkg.com/vue"></script><!--这里引入的是vue的cnd-> 

2.下载插件

Vue笔记

在浏览器扩展里面搜索Vue.js devtools插件 下载(注意:在详细信息里面勾选 允许访问文件 URL选项)

初始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> </head> <!-- 引入vue.js文件 --> <script src="../static/js/vue.js"></script> <body>     <!-- 容器 -->     <div id="root">         <h1>{{name}}</h1>     </div>        <script>     //创建vue实例对象       new Vue({         //el指定当前vue实例为当前那个容器服务,值通常为css选择器字符串         el: "#root",         //data用于存储数据 数据供el提供的容器使用         data: {             name: "初始vue",         },     })     </script> </body> </html> 
  • 当vue开始工作的时候把容器拿过来解析,解析容器里有没有vue的语法,里面有一个插值语法,然后找到name把属性值赋值给容器里面的name,然后生成了全新的一个容器,在把解析完的容器放到页面当中