双向数据绑定原理
双向数据绑定是通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter,如果有数据变动,就发布消息给订阅者,触发监听
什么是路由?
- 后端路由:对于普通的⽹站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
- 前端路由:对于单⻚⾯应⽤程序来说,主要通过URL中的hash ( # 号) 来实现
不同⻚⾯之间的切换,同时,hash有⼀个特点:HTTP请求中不会包含hash相关的内容;所以,单⻚⾯程序中的⻚⾯跳转主要⽤hash实现; - 在单⻚⾯应⽤程序中,这种通过hash改变来切换⻚⾯的⽅式,称作前端路由
(区别于后端路由)
vue结构解析
1、node_modules:npm 加载的项目依赖模块
2、public:存放一些主要的打包文件,如index.html等等,可以放置一些需要在index.html配置的文件
3、src:源码目录
4、.gitignore: git上传时的忽略文件,可以避免在提交代码时把我们不想上传的文件提交到git中
5、babel.config.js:(Babel 是一个 JavaScript 编译器,可以对 JavaScript 文件进行转码,类似的有 ES6 转为 ES5 兼容不同的浏览器。babel.config.js是 babel 的配置文件
6、jsconfig.json:指定编译项目所需的根文件和编译器选项(配置文件)
7、package.json:一个重要的配置文件,它包含了项目的名称、版本、作者、依赖等信息
8、package-lock.json:记录项目的依赖关系和确保在不同的开发环境中安装相同版本的依赖项
9、README.md:项目的一些说明
10、vue.config.js:vue自主构建,是项目的配置文件
src
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:(小)组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)store:放置vuex需要的状态关联文件,设置公共的state等,是公共数据管理器,关联页面都可随时访问数据,是一个专为vue.js应用开发的状态管理模式,集中式存储管理应用的所有组件的状态
5)views:页面组件
6)App.vue:根组件;也是项目的第一个vue组件
7)main.js:全局脚本文件(项目的入口)
路由的基本使用
- 创建路由new VueRouter(),接受的参数是⼀个对象
- 在实例化的对象⾥配置属性routes:[],这个数组⾥的对象包含path属性和
component属性 - path属性是url的地址,component属性就是显示的组件(传组件的对象)
- 使⽤
使⽤ router-link 进⾏⻚⾯间的跳转
使⽤ router-view 设置所需跳转的⻚⾯在哪⾥显示
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view/>
find、some区别
some()方法测试数组中的是不是至少有1个元素通过了被提供的函数测试。它返回的是一个boolean类型的值。
find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。