vue学习笔记

一、vue以及生态圈(技术栈) vue技术栈: 官方： vue vue-router vuex 第三方: axios(网络通信) elementui（pc） mintui(mobile) vux(mobile) weex(实现native) 。。。。

1、基础语法 指令: v-for="(tmp,index) in list" v-if=“expression” : v-bind 属性绑定 @ v-on 事件绑定 v-model 表单元素 双向数据绑定( view->model 将表单操作的结果 绑定到数据 model->view 将数据绑定到表单元素 ) 属性: Vue.component(’’,{ //data 初始化数据 //methods 定义方法 //computed 计算属性(聪明 有依赖缓存) //components 局部组件 //filters 过滤器 //props 指定允许通过哪些属性给传值(父–》子) //watch //… })

2、组件 封装的好处？ ①提高代码的复用率 ②提到了开发速度 ③提高了代码的可维护性

组件：是可被反复使用的，带有特定功能的视图

创建: SFC(single file component) **.vue

使用: 路由访问 login–》login.vue 作为子组件 假设Main.vue需要调用Header.vue: import Header from ‘…’ //声明为全局 Vue.component(‘my-header’,Header) //声明为局部 Vue.component(‘main’,{ components:{ myheader:Header } })

3、通信 组件间通信 props down (父–》子) 发送：

接收: Vue.component('my-list',{ props:['cartList'] }) events up (子---》父) event bus ref parent

网路通信 npm i axios import axios from ‘axios’ axios.get/post(url).then(()=>{})

4、路由 (路由的本质:建立一种映射关系)

SPA:single page application

基础路由的搭建 ①安装核心插件 vue-router，激活 vue.use(VueRouter) ②准备一个容器 ③完成路由数组的定义和调用 //路由词典(路由数组)由多个路由对象构成的数组 const myRoutes = [ {path:’/’,component:Login}, {path:’/main’,component:Main} ]

new Vue({ router:new VueRouter({ routes:myRoutes }) }) 跳转

this.$router.push(’/main’)

传参： ① 配置接收方的路由 /main —> /main/:id ② 发送 this.$router.push{(}^{\prime }/main/3^{\prime })③接收this.$route.params.id

路由嵌套 假设A需要嵌套B、C ①给A指定一个容器 ②设置子路由 { path:’/a’, component:A, children:[ {path:’/b’,component:B} … ] }

路由守卫 router.beforeEach() { path:"", component:*, beforeEnter:()=>{ } }

路由懒加载 const Foo = () => import(’./Foo.vue’)

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

5、vuex vuex集中式管理数据 state：管理数据 getters：获取数据 mutations: 修改的数据 actions:异步 modules:模块化

什么是Vue: 渐进式的 基于MVVM的 执行数据操作的 纯前端js框架 渐进式: 可以逐步在项目中使用Vue框架 可以和现有传统技术很好的结合 全家桶: 如果要使用一种框架，就只能使用框架的所有技术。不能和其它技术混搭。 基于MVVM？ 执行数据操作的: 终极简化对网页执行的数据操作: 增删改 纯前端js框架: 不要nodejs，仅靠浏览器就可运行项目

MVVM模式: 传统的DOM: HTML: 只负责静态内容，不会自动变化 CSS: 只负责静态样式，不会自动变化 JS: 即要负责内容的变化，又要负责样式的变化 问题: 1. 步骤繁琐且重复: 查找，绑定，遍历，替换，拼接字符串 2. 不便于维护：jQuery中，如果页面结构或内容发生变化，则js中选择器和HTML片段都要跟着修改

现代框架: MVVM模式

界面/视图View: 包括静态的HTML+CSS数据模型Model: 页面中所需的所有数据的整体控制器/视图模型ViewModel: 自动将数据模型Model中的变量，填充到界面中所需的位置 总结: 什么是M V VM模式: 页面需要什么，模型就定义什么。 视图模型会自动将模型中的数据填充到页面中。且模型数据发生变化时，视图模型会自动更新页面。 优点: 1. 没有任何重复的代码 2. 界面和模型松耦合，界面变化，不需要修改模型，甚至不需要修改ViewModel控制器。——及其便于维护

ViewMode的原理: 当new Vue将模型对象和页面元素绑定在一起时，内部自动构建两大子系统:

响应系统: 自动将data中的每个变量变成访问器属性 今后，所有对变量的读写，自动都被访问器接管，由访问器属性代为执行。 比如：修改变量的值时，自动调用变量的set方法，修改实际的变量值。 而每个变量的set方法，当变量发生改变时，都会自动发送通知：xxx变量的值变成xxx了 通知是交给另一子系统，虚拟DOM树的虚拟DOM树： 当new Vue()创建对象时，会扫描el:"#app"指向的父元素div，及其子元素。然后，仅找到可能发生变化的元素，保存在一个简化版的虚拟DOM树结构中： 比如： var virtualDOM={ element: div, //<div id="#app" id:"#app", children:[ { element: button, //click me({{n}}) innerHTML: “click me {{n}}”, @click:“add” }, //其它可能变化的元素 ] } 什么是虚拟DOM树: 仅保存可能变化的元素的简化版树结构对象，同时预先封装了要对元素执行的DOM操作。 当响应系统发来某变量被修改的通知后，虚拟DOM树先遍历自己内部的元素，找到受这个被修改变量影响的元素。然后自动调用预先定义好的DOM操作，更新实际DOM树上的元素。其余未受变量影响的元素，保持不变。 虚拟DOM树的优点: @1. 仅包含可能变化的元素，内容精简，便于快速遍历，查找变化的内容。 @2. 封装了DOM操作，自动执行DOM操作，无需开发人员重复编码。