Vuejs框架的总结

素颜马尾好姑娘i 2022-05-27 08:26 210阅读 0赞

## 前端知识点总结——Vue ##

2018-04-15   [web前端开发][web]

#### 1.框架和库的区别 ####

框架（framework）：有着自己的语法特点、都有对应的各个模块。

库（library）：专注于一点。

框架的好处：

1.  提到代码的质量，开发速度
2.  提高代码的复用率
3.  降低模块之间的耦合度（高内聚低耦合）

UI：user interface

GUI：graphical user interface

CLI：command line interface

API：application interface

思维模式的转换：从操作DOM的思维模式 切换到以数据为主。

#### 2.Vue概述 ####

##### 1、what #####

是一个渐进式的构建用户界面的js框架

##### 2、where #####

小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序

##### 3、why #####

1.  方便阅读的中文文档
2.  容易上手 （学习曲线比较缓和）
3.  体积小
4.  基于组件化的开发方式
5.  代码的可读性、可维护性得到了提高

##### 4、how #####

工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能

##### 搭建环境 #####

方式1

全局安装 vue-cli

npm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

安装依赖，走你

cd my-project

npm install

npm run dev

方式2

直接引入对应的js文件

#### 3.Vue中基础知识 ####

##### 1、双花括号 #####

mustache(胡子)/interpolation（插值表达式）

语法：

作用：将表达式执行的结果 输出当调用元素的innerHTML中；还可以将数据绑定到视图。

##### 2、指令-循环指令 #####

基本语法1：

基本语法2：

作用：在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签。

##### 3、指令-选择指令 #####

语法：

1.  `   <any v-if="表达式"></any>`
2.  `   <any v-else-if="表达式"></any>`
3.  `   <any v-else="表达式"></any>`

作用：根据表达式执行结果的真假，来决定是否要将当前的这个元素 挂载到DOM树

##### 4、指令-事件绑定 #####

语法：

作用：给指定的元素 将handleEvent的方法绑定给指定eventName事件。

##### 5、指令-属性绑定 #####

基本语法：

补充，支持简写：

作用：将表达式执行的结果绑定到当前元素的myProp属性。

动态样式绑定：

<p :style="\{backgroundColor:myBGColor\}" >动态样式绑定</p>

动态样式类绑定：

<h1 :class="\{myRed:false\}">动态样式类的绑定</h1>

##### 6、指令-双向数据绑定 #####

方向1：数据绑定到视图

方向2：将视图中（表单元素）用户操作的结果绑定到数据

基本语法：

<表单元素 v-model=“变量”></表单元素>

#### 4.组件化 ####

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

所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。

组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序。

##### 1、组件的创建 #####

全局组件：

Vue.component('my-com',\{

template:\`

<h2 >it is a header</h2>

\})

局部组件：

new Vue(\{

components:\{

‘my-footer’:\{

template:\`

<h2 >it is a footer</h2>

\})

##### 2、组件使用 #####

作为普通的标签去使用

<my-com></my-com>

##### 3、注意事项 #####

1.  组件的id和使用方式 遵循烤串式命名方式：a-b-c
2.  如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
3.  全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用

#### 5.自定义指令 ####

创建：

Vue.directive('change',\{

bind:function(el,bindinds)\{

//首次调用

\},

update:function()\{

//解绑

\})

使用：

#### 6.过滤器 ####

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据。

过滤器的本质 就是一个带有参数带有返回值的方法。

Vue1.\* 支持内置的过滤器，但是Vue2.\* 就不再内置过滤器，但是支持自定义过滤器。

##### 1、过滤器的创建和使用 #####

1.创建

Vue.filter(

'myFilter',function(myInput)\{

//myInput是在调用过滤器时，管道前表达式执行的结果

// 针对myInput,按照业务需求做处理

// 返回

return ‘处理后的结果’

)

2.使用

1.  `       <any>{ {expression | myFilter}}</any>`

##### 2、如何在调用过滤器时，完成参数的发送和接受 #####

1.发送

1.  `   <any>{ {expression | myFilter(参数1，参数2)}}</any>`

2.接受

1.  `   Vue.filter('myFilter',function(myInput，参数1，参数2){`
2.  `       return '处理后的结果'`
3.  `   })`

#### 7.复合组件 ####

知识回顾：

1.  `     Vue.component('my-header',{`
2.  ``       template:`<div></div>` ``
3.  `     });`
4.  ``
5.  `     <my-header></my-header>`

复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件。

注意事项：

1.组件要渲染的内容 取决于在定义组件时template

1.  `     <my-list>`
2.  `       <my-item></my-item>`
3.  `     </my-list>`

效果是出不来的。

2.允许在一个组件中，直接来调用另外一个组件。

#### 8.生命周期 ####

四个阶段：

*  create 准备工作 （数据的初始化。。。）
 *  mount 挂载前后针对元素进行操作
 *  update 数据发生变化，
 *  destroy 清理工作 (关闭定时器、集合清空..)
 *  beforeCreate/created
 *  beforeMount/mounted
 *  beforeUpdate/updated
 *  beforeDestroy/destroyed

##### 9.常用属性 #####

##### 1、watch #####

1.表单元素的双向数据绑定

1.  `   v-model="myValue"`

2.监听

1.  `       watch:{`
2.  `       myValue:function(newValue,oldValue){`
3.  ``
4.  `       }`
5.  `       }`

##### 2、computed #####

计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。

1.指定计算属性

1.  `           computed:{`
2.  `             myHandle:function(){`
3.  `              return 数据`
4.  `             }`
5.  `           }`

2.调用

1.  `   <any>{ {myHandle}}</any>`

#### 10.组件间通信 ####

##### 1、父与子通信 （props down） #####

1.发送

1.  `   <son myName='zhangsan'></son>`

2.接受到son组件：

1.  `           Vue.component('son',{`
2.  `             props:['myName'],`
3.  ``             template:` ``
4.  `              <p>{ {myName}}</p>`
5.  ``             ` ``
6.  `           })    `

##### 2、子与父通信 (events up) #####

1.绑定

1.  `       methods:{`
2.  `        handleEvent:function(msg){}`
3.  `       }`
4.  `       <son @customEvent="handleEvent"></son>`

2.触发

子组件内部：

1.  `       this.$emit(‘customEvent’,100);`

##### 3、ref(reference 引用/参考 外号) #####

帮助在父组件中 得到子组件中的数据、方法。

1.指定ref属性

1.  `   <son ref="mySon"></son>`

2.根据ref得到子组件实例

1.  `   this.$refs.mySon`

##### 4、$parent #####

this.$parent得到父组件的实例

##### 5、兄弟组件通信 #####

1.  `var bus = new Vue();`

2.接收方

1.  `   bus.$on('eventName',function(msg){})`

3.发送方

1.  `   bus.$emit('eventName',123);`

#### 11.补充组件创建的方式 ####

##### 1、直接在template属性中指定模板内容 #####

1.全局组件

1.  `   Vue.component`

2.局部组件

1.  `       {`
2.  `         components:{`
3.  ```           'my-footer'：{ template:``}```
4.  `         }`
5.  `       }`

##### 2、.vue结尾的文件 #####

1.  `       <template></template>`
2.  `       <script></script>`
3.  `       <style></style>`

##### 3、单独指定一个模板内容 #####

1.  `       <script`
2.  `       id='myContent'`
3.  `       type='text/x-template'>`
4.  `       </script>`
5.  ``
6.  `       Vue.component('',{`
7.  `         template:'#myContent'`
8.  `       })`

#### 12.路由模块 ####

路由模块的本质 就是建立起url和页面之间的映射关系。

##### 1、SPA的基本概念和工作原理 #####

SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，比如Gmail、移动的webApp。

工作原理：

1.  解析地址栏：完整的页面地址、路由地址
2.  根据路由地址从路由词典中找到真正的要加载的页面
3.  发起ajax请求：请求要加载的页面
4.  像指定的容器中插入加载来的页面

##### 2、路由模块的基本使用 #####

专业术语：

*  router路由器
 *  route路由
 *  routes 路由数组（路由词典）

1.引入 `vue.js vue-router.js`

2.指定一个容器

1.  `   <router-view></router-view>`

3.创建业务所需要用到的组件类

1.  `   var MyLogin = Vue.component()`

4.配置路由词典

1.  `    const myRoutes = [`
2.  `     {path:'',component:MyLogin},`
3.  `     {path:'/login',component:MyLogin}`
4.  `    ];`
5.  ``
6.  `    const myRouter = new VueRouter({`
7.  `     routes:myRoutes`
8.  `    })`
9.  ``
10. `    new Vue({`
11. `      router:myRouter`
12. `    })`

5.测试

修改地址栏中的路由地址，测试看加载的组件是否正确

注意事项：

1.先引入vue，再引入插件

2.一定要指定router-view

3.route路由 `{path:'',component:}`

routes：路由数组 \[\]

router：路由器，按照指定的路由规则去访问对应的组件 new VueRouter

##### 3、使用路由模块来实现页面跳转的方式 #####

方式1：

直接修改地址栏

方式2：

1.  `   this.$router.push(‘路由地址’);`

方式3：

1.  `    <router-link`
2.  `    to="路由地址"></router-link>`

##### 4、完成参数的传递 #####

在页面之间跳转的时候，在有些场景下，需要同时指定参数

1.明确发送方和接收方

1.  `   list --20--> detail`

2.配置接收方的路由地址

1.  `   /detail --》 /detail/:index`
2.  ``
3.  `   this.$route.params.index`

3.发送

1.  `   routerLink to="/detail/20"`
2.  `   this.$router.push('/detail/20')`

##### 5、路由嵌套 #####

在一个路由中，path对应一个component，如果这个component需要根据

不同的url再加载其他的component，称之为路由的嵌套

举例：比如A组件现在需要根据不同的url，加载B组件或者C组件

1.给A组件指定一个容器

1.  `     <router-view></router-view>`

2.配置路由词典

1.  `     {`
2.  `       path:'/a',`
3.  `       component:A,`
4.  `       children:[`
5.  `         {path:'/b',component:B}`
6.  `       ]`
7.  `     }`

需求：现在有两个组件，分别是login/mail,建立SPA。

在此基础上，希望mail组件 嵌套inbox/outbox/draft

补充：在设置子路由，路由匹配规则依然是适用的，只不过路由地址为空和异常，要携带父组件的路由地址

1.  `     /mail /mail/draft`

#### 13.搭建基于CLI开发环境的方式 ####

1.指定一个文件夹： `C:\xampp\htdocs\framework\vue\project`

2.将tpls.zip拷贝到project中

3.右键单击压缩包，解压缩到当前文件夹

4.进入到tpls

5.同时按下shift和鼠标右键，选择在此位置打开命令行串口

6.执行npm install

7.执行npm start

[web]: https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649087610&idx=1&sn=6ccb0b8275762f429a003121025cdd9c&chksm=be5bf9d7892c70c1b599e37918cead15d8b9652ed9d110f946df8bc3f132e4f89b228799ab84&mpshare=1&scene=1&srcid=0415nYj4buez01ZxQerKIpOi&key=7adaa83aa29cc3e82d34560899c239d7a6d3ffcbdc4058209b5dc9829f28b07810b75a07c08f587d12766fef0e3512ef392c24fcb529b85054f2ce7507ba51154683d3fbbbf7e4ee644ff058dc9e7cbf&ascene=1&uin=Mjc4MDA3MzQ0MA%3D%3D&devicetype=Windows+7&version=6206021b&lang=zh_CN&pass_ticket=RMBH8vz0zQAnB6L3CViULBF2NZyjX%2B3F6yWW1tt59Ib3Lr4%2Fr0I4FYkkZi8mNAxm&winzoom=1#%23