vue的学习(常用功能)

1、介绍vue

MVP和MVVM模式&＃xff01;&＃xff01;&＃xff01;

mvp模式&＃xff0c;其中m是模型是ajax请求数据&＃xff0c; v是视图层&＃xff08;html&＃xff09;&＃xff0c;p是控制器&＃xff0c;就是使用jq来实现业务逻辑相关操作(DOM操作很多)

MVVM模式&＃xff0c;其中M是new实例里面相关操作&＃xff0c;v是视图层&＃xff0c;vm即vue自己进行操作转化&＃xff01;

首先使用vue&＃xff08;mvvm模式&＃xff09;可以通过两种方式&＃xff0c;

第一种&＃xff1a;是直接通过引入vue.js的形式&＃xff0c;那么这时候的vue直接写在里面&＃xff0c;这时候的vue是全局注册作为全局变量&＃xff01;我们进行全局注册组件的时候&＃xff0c;可以直接引用&＃xff0c;如果是进行

<div id&＃61;"app">
{{ message }} &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;》》》》V层

div>



2、vue的实例化

3、vue中的基本语法
计算属性&＃xff08;computed&＃xff09;、方法&＃xff08;methods&＃xff09;、事件监听&＃xff08;watch&＃xff09;
computed属性&＃xff0c;会有一个缓存机制&＃xff0c;计算页面重新加载&＃xff0c;只要计算的属性没有发生改变&＃xff0c;就不会重复执行computed&＃xff0c;而方法methods中&＃xff0c;只要页面有重新加载就会被重复执行&＃xff0c;
对于监听事件&＃xff08;watch&＃xff09;&＃xff0c;需要监听的属性有发生变化时才会执行&＃xff01;&＃xff01;也既有缓存机制&＃xff0c;但是相比代码量会比computed多&＃xff01;&＃xff01;

computed中的get和set函数&＃xff01;&＃xff01;&＃xff01;

类名跟样式表达式

&＃xff1a;class&＃61;“{active&＃xff1a;isActive}” 这时候&＃xff0c;是通过isActive来控制active类名是否要显示

&＃xff1a;class&＃61;“[actived]” 这个时候activde的值是通过data里面的值来控制的

样式表达式

&＃xff1a;style&＃61;“styleObejt”  styleObject的值是通过data来赋值&＃61;&＃61;》styleObject&＃xff1a;{color&＃xff1a;#fff&＃xff1b;}

key值标识唯一性

vue虚拟dom中&＃xff0c;会有自带缓存复用机制&＃xff0c;如果它检测到页面上相同的东西没有发生变化&＃xff0c;它就会进行有效的复用&＃xff01;

例如&＃xff1a;用户名的时候input的输入值是小明&＃xff0c;当你把用户名切换为密码是&＃xff0c;input上的值还是小明&＃xff0c;这是因为input被复用了

当给下面的两个input加key值&＃xff0c;那么这时候input中的元素就不会被有效地复用&＃xff01;

v-for指令

使用该指令的时候&＃xff0c;设置key值是不要使用index来赋值&＃xff0c;而是使用后端提供的id&＃xff0c;这样可以保证唯一性跟提高性能

数组操作

在vue中&＃xff0c;对数值进行时不能直接通过下标来增加&＃xff08;删除&＃xff09;数组&＃xff0c;通过这种方式增加数组&＃xff08;删除&＃xff09;&＃xff0c;数据上是变了&＃xff0c;但是页面上不会变。

例如list[4]&＃61;{"id":4,name:"55"}这时候页面上的list元素还是只有三个&＃xff01;

在vue中如果想操作数组的同时&＃xff0c;页面跟着变化。有两种方法。

第一种是使用数组中的7种编译方法来操作数组

 第二种是直接改变list数据的指定空间来改变

 

 在列表渲染中使用包裹占位符template&＃xff0c;来包裹需要循环的列表&＃xff0c;这时候template不会被页面渲染出来&＃xff01;&＃xff01;

对象操作

第一点&＃xff1a;遍历对象的时候&＃xff0c;直接往对象里面加值&＃xff0c;这时候页面也是没有跟着变的&＃xff0c;同样可以改变对象的引用&＃61;&＃61;》数据指向新的引用对象

第二点&＃xff1a;用vue中的set方法方法来改变对象&＃xff08;第一个参数是key&＃xff0c;第二个参数是name&＃xff09;和数组&＃xff08;第一个参数是下标&＃xff0c;第二个参数是对应的值&＃xff09;

对象&＃xff1a;

 

使用vue实例化方法的$set方法&＃xff01;&＃xff01;&＃xff01;&＃xff01;第一个是key&＃xff0c;第二个参数是name

 3、组件的使用

第一点&＃xff1a;全局组件跟局部组件&＃xff0c;和子组件与父组件之间的传值

第二点&＃xff1a;使用组件时的一些小细节用法

知识点1&＃xff1a;使用table的时候&＃xff0c;使用组件会有一个小bug&＃xff0c;在渲染的时候table标签下面只能是下面只能是,所以要是直接用组件&＃xff0c;在页面渲染出来的标签会出现在table外面&＃xff01;这时候在标签上是使用is&＃61;“row”进行组件渲染符合H5规范&＃xff0c;同样的ul li标签也适应

知识点2&＃xff1a;在组件中使用data&＃xff0c;当在跟组件中使用data的时候&＃xff0c;data可以是一个对象的形式&＃xff0c;因为在根组件中&＃xff0c;数据只被调取一次&＃xff0c;而在子组件中&＃xff0c;数据有可能被调用多次&＃xff0c;

这时候&＃xff0c;不能data只能用函数&＃xff0c;为每个数据都存储不同的空间。

知识点3&＃xff1a;

 在vue中&＃xff0c;如果遇到复杂的操作需要使用dom操作时&＃xff0c;可以使用$refs引用属性来获取dom元素

    &＃61;&＃61;&＃61;>>>>alert(this.$refs.hello.innerHTML)  //测试下ref

在组件中使用ref来引用不同的子组件&＃xff0c;这是ref指向的是这个组件

知识点4&＃xff1a;父子组件传值

父组件向子组件传值都是通过属性的形式传值的&＃xff08;但是页面渲染的时候&＃xff0c;属性没有渲染出来&＃xff09;

  //传值的时候&＃xff0c;如果count前面没有加“  &＃xff1a; ” 号&＃xff0c;那么这时候传的0是字符串类型

  //传值的时候&＃xff0c;如果count前面有加“  &＃xff1a; ” 号&＃xff0c;那么这时候双引号里面的值是一个js表达式&＃xff0c;这时候count传0的是一个数字类型

单项数据流&＃xff0c;子组件只能使用父组件传过来的值&＃xff0c;而不能直接对该属性值进行直接改变&＃xff0c;如果真的要改变&＃xff0c;可以在子组件的data里另取一个变量进行赋值修改

 父组件向子组件传count值 

 子组件接收到后count值后&＃xff0c;还需要对count的值进行&＃xff0c;修改&＃xff0c;这时候把count值赋予新变量number&＃xff0c;然后在子组件的data里面对number进行修改

知识点5&＃xff1a;组件参数验证&＃xff0c;在子组件接收父组件传过来的时&＃xff0c;props可以对这些值进行一些校验&＃xff0c;除了使用自带的基本校验方式&＃xff0c;我们还可以自定义validator进行自定义校验&＃xff01;&＃xff01;&＃xff01;

注意&＃xff1a;当用props属性接收的时候&＃xff0c;改属性不会被渲染出来&＃xff0c;如果是没有用props属性接收&＃xff0c;那么就是非props属性&＃xff0c;

这时候页面会报错&＃xff0c;子组件没办法用到content的值&＃xff0c;而且这时候子组件渲染成

content变成了子组件的自定义属性。

知识点6&＃xff1a;给组件绑定原生事件

给组件绑定的事件都是自定义事件&＃xff0c;这种事件只能从过子组件来触发&＃xff0c;如果想直接触发原生事件可以在事件中加native&＃xff01;&＃xff01;

知识点7&＃xff1a;非父子组件间传值&＃xff08;Bus/总线/发布订阅模式/观察者模式&＃xff09;

Vue.prototype.bus &＃61; new Vue()   &＃61;&＃61;&＃61;&＃61;>>>>表示把bus属性挂载在vue是&＃xff0c;这样每个有用到VUE实例的地方都有bus属性&＃xff0c;而bus属性又是一个new vue实例&＃xff0c;所以也拥有vue的相关属性&＃xff01;&＃xff01;&＃xff01;

触发方&＃xff1a;this.bus.$emit&＃61;(&＃39;change&＃39;,this.content)

接收方&＃xff1a;this.bus.$on&＃61;(&＃39;change&＃39;,function(msg){

})

知识点8&＃xff1a;插槽&＃xff08;slot&＃xff09;

父组件向子组件优雅传dom值&＃xff0c;使用插槽slot&＃xff0c;当子组件中使用插槽slot时&＃xff0c;父组件要是有传值&＃xff0c;那么solt上的默认值&＃xff0c;就不会被显示出来&＃xff0c;插槽直接渲染父组件传过来的值&＃xff0c;如果没有&＃xff0c;默认值就会被显示&＃xff01;

没有给slot取名字的话&＃xff0c;slot默认就是父组件插入的所有内容。取名字的话就会对应名字插件进去

 

知识点9&＃xff1a;动态组件切换&＃xff08;v-once&＃xff09;

应用场景&＃xff0c;例如我们想要通过点击一个按钮&＃xff0c;实现不同组件的切换&＃xff0c;这时候&＃xff0c;我们可以使用两种方法来实现&＃xff0c;一种是使用componet的is属性&＃xff0c;一种是通过v-if&＃xff0c;当我们使用v-if进行组件切换时&＃xff0c;会对另一个组件进行销毁&＃xff0c;然后切换到的时候再进行创建&＃xff0c;但是对于频繁需要切换的静态组件很好耗性能&＃xff0c;我们可以加v-once&＃xff0c;当这个v-once组件被第一次切换的时候&＃xff0c;就会被存在内存里面&＃xff0c;第二次使用的时候&＃xff0c;就会被拿出来&＃xff0c;在使用静态页组件切换时使用可以提高性能&＃xff01;&＃xff01;&＃xff01;

总结父组件跟子组件之间的相互通讯

父组件传值给子组件

export default {
      data (){
         return {
             selectType:true;
         }
     }

}

 

子组件通过props的方式从父级接收数据&＃xff1a;

props:{
     selectType:{
           type:Boolean,
           default(){
               return false;
           }

     }

}

在父级中&＃xff1a;title是在子级中要用的名字&＃xff0c;如果fff前面有&＃xff1a;那么后面的tit就是个变量&＃xff0c;在data中要去定义。如果没有那么就是普通字符串。

子组件传值给父组件

子组件&＃xff1a;

method:{

       suremit:function(){

              this.$emit(&＃39;addShop&＃39;,this.select,this.num);

       }     

}

父组件&＃xff1a;

method:{

       sureAddShop:function(key,num){}    

}

 4、vue中css的动画

知识点1&＃xff1a;动画原理

首先&＃xff0c;为需要动画的标签外层加一个,然后可以给其设置一个名字&＃xff0c;如果没有设置名字&＃xff0c;默认是V

显示的状态流程&＃xff0c;默认第一帧是fade-enter&＃xff0c;然后下一帧的时候fade-enter就会被销毁&＃xff0c;然后fade-enter-active是从第一帧开始就存在&＃xff0c;知道结束才销毁&＃xff0c;所以可以用该属性监听某个属性的变化&＃xff0c;从而使用transition进行动画过度效果

隐藏状态流程&＃xff0c;默认第一帧是fade-leave&＃xff08;动画第一瞬间就存在&＃xff0c;所以从显示到隐藏状态这个转态就已经有了&＃xff09;&＃xff0c;下一帧fade-leave销毁&＃xff0c;fade-leave-to创建&＃xff0c;而fade-leave-active从开始到结束一直存在

知识点2&＃xff1a;使用&＃64;keyframes&＃xff08;css3动画&＃xff09;和为动画自定义命名

自定义命名 enter-active-class&＃61;“active” &＃xff01;&＃xff01;&＃xff01;

知识点3&＃xff1a;animate动画库

 

我们现在的应用场景是点击按钮的时候&＃xff0c;动画才会执行&＃xff0c;如果想页面一加载就有动画效果&＃xff0c;我们可以给transition增加appear属性并且设置appear-active-class&＃61;“animated swing”

知识点4&＃xff1a;使用animated动画库跟自定义动画并且设置动画时长

type&＃61;"transition"来指定动画时长是以哪个动画为准&＃xff0c;这边指的是以transition动画时长为准&＃xff01;也可以通过设置&＃xff1a;duration来设置自定义时间

 4、vue中js的动画与velocity.js结合

通过js来写动画效果

 

velocity.js实现动画

知识点5&＃xff1a;多元素和多组件的切换(状态过度Tween.js)

多元素的切换&＃xff0c;使用mode设置多个元素过度&＃xff08;组件&＃xff09;效果&＃xff0c;设置key解除缓存效果&＃xff0c;出现动画效果

当多个元素是用v-for循环出来的时候&＃xff0c;可以使用来包裹v-for循环元素&＃xff01;&＃xff01;&＃xff01;

动画封装

 6、去哪儿项目实战

知识点1&＃xff1a;单页应用跟多页应用

多页应用&＃xff1a;页面的切换是通过请求不同的html页面&＃xff0c;首页加载比较快&＃xff0c;利于seo&＃xff0c;缺点是切换页面比较慢&＃xff01;

单页应用&＃xff1a;页面之前的切换是通过js来控制渲染&＃xff0c;始终都是在同一个页面&＃xff0c;优点是不同页面之间切换速度快&＃xff0c;缺点是首页加载比较慢&＃xff0c;不利于seo优化&＃xff01;&＃xff01;&＃xff01;

知识点2&＃xff1a;路径引用问题(webpack.base.config.js)

在vue中&＃64;符号表示的是src目录下的文件

 我们可以在webpack.base.config.js下面进行路径配置 &＃xff0c;在&＃39;styles&＃39;: resolve(&＃39;src/assets/styles&＃39;),设置完&＃xff0c;需要重启服务器

知识点3&＃xff1a;static文件夹的用法

static文件下的东西是用来放静态的东西&＃xff0c;是vue中唯一一个不需要打包编译就可以被外部访问的文件夹&＃xff08;通过相应的路径访问http://localhost:8088/static/mock/index.json&＃xff09;&＃xff0c;这里我们可以放模拟的数据&＃xff01;&＃xff01;&＃xff01;&＃xff01;

 知识点4&＃xff1a;步骤记录

gitignore文件&＃61;&＃61;&＃61;》用来增加提交不提交到git仓库里

 

 知识点5&＃xff1a;&＃xff08;提高网站性能&＃xff09;

 使用 包裹在来缓存路由&＃xff0c;减少每次切换路由的时候&＃xff0c;都请求ajax&＃xff0c;但是使用这个缓存路由的时候&＃xff0c;数据发送改变时也不会被重新请求路由&＃xff0c;这时候需要用到keep-alive提供的方法

activated因为只有该生命周期函数会被执行&＃xff0c;在里面判断前后数据有没有变&＃xff0c;有再重新执行&＃xff01;&＃xff01;

我们可以通过2中方法来使用来选择缓存不同的路由页面

方法一&＃xff1a;使用内封装的include和exclude两种方法

方法二&＃xff1a;动态配置路由&＃xff0c;在router里面的index.js设置

然后在然后在app.vue文件下修改一下keep-alive组件的用法

 

知识点6&＃xff1a;activated方法和deactivated生命周期钩子&＃xff08;activated 和 deactivated 将会在  树内的所有嵌套组件中触发&＃xff09;

keep-alive会缓存组件&＃xff0c;是的每次切换路由的时候&＃xff0c;页面都不会重新请求ajax&＃xff0c;而是直接用缓存里面的数据&＃xff0c;如果这时候我们的数据发送变化需要重新请求ajax的时候&＃xff0c;就需要用到keep-alive提供的activated函数&＃xff08;页面重新显示的时候会被执行&＃xff0c;可利用前后两次的数据是否变化来判断是否重新执行ajax&＃xff09;

activated&＃xff1a;keep-alive 组件激活时调用&＃xff08;页面进入或显示时失效被执行&＃xff09;

deactivated&＃xff1a;keep-alive 组件停用时调用&＃xff08;页面离开或隐藏时失效被执行&＃xff09;

注意一点&＃xff1a;activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的&＃xff0c;否则则不存在 &＃xff01;&＃xff01;&＃xff01;

 

 知识点7&＃xff1a;打包编译

知识点1&＃xff1a;打包编译上线&＃xff0c;cnpm   run build 命令编译&＃xff0c;然后提交dist 文件里面的index跟static文件。到服务端。然后就可以直接用localhost/的后端方式来打开&＃xff01;&＃xff01;&＃xff01;

知识点改变提交给服务端的路径&＃xff0c;这时候需要修改config里面的配置&＃xff0c;例如project文件里面

然后重新执行命令cnpm run  build然后在生成的dist文件修改问project&＃xff01;

 这时候就可以通过localhost/project来访问网站&＃xff01;&＃xff01;&＃xff01;

知识点8、异步组件调用提高网站加载速度从而提高性能

当路由中是调用组件名时&＃xff0c;页面在加载的时候会默认一次性把所有的组件页面都加载出来&＃xff0c;导致在打开首页的时候&＃xff0c;其它所有页面一起被加载出来&＃xff0c;从而打开速度缓慢&＃xff01;

方法一&＃xff1a;在router文件下index。js修改

修改为//改为箭头函数异步加载组件

export default new Router({
routes: [
{
path: &＃39;/&＃39;,
name: &＃39;Home&＃39;,
component: () &＃61;> import(&＃39;&＃64;/pages/home/Home&＃39;)   //改为箭头函数异步加载组件
}

 

方法二&＃xff1a;在引用组件的时候用箭头函数

components&＃xff1a;{

header&＃xff1a;&＃xff08;&＃xff09;&＃61;>import(&＃39;./components/Header&＃39;)

}

文件打包编译后会生成下面三个文件&＃xff0c;用后端网址打开时会有以下三个文件

异步组件调用拆分后&＃xff0c;app.js被拆分成一个个js文件

 

注意&＃xff1a;当app.js文件特别大的时候&＃xff0c;使用异步组件&＃xff0c;对app.js进行拆分&＃xff0c;拆分后每次切换到前面没有加载过的页面都相当于是一次http请求&＃xff08;有加载过的话&＃xff0c;有缓存不需要重新加载&＃xff09;&＃xff0c;所以当app.js不是很大的时候&＃xff0c;不推荐进行异步组件拆分&＃xff0c;直接在进首页的时候都加载&＃xff01;&＃xff01;&＃xff01;

 

知识点9、字体图标的使用

如何使用字体图标

首先打开iconfont官网&＃xff0c;选择相应的图标添加购物车&＃xff0c;然后加入我的项目&＃xff0c;然后下载到本地。解压&＃xff0c;然后选择如下文件放在自己的目录下&＃xff0c;然后修改iconfont.css下面相应的路径。

然后在需要用到字体图标的地方使用

iconfont.css路径修改

调用文件

如何新增字体图标

把新增的字体图标添加到项目后&＃xff0c;然后下载到本地&＃xff0c;替换四个字体文件&＃xff0c;样式文件不需要替换&＃xff0c;但是必须修改下旧的iconfont.css里面的base64位路径修改为最新下载下来的iconfont.css里面的base64位图片位置&＃xff01;&＃xff01;

2.在vue中&＃xff0c;如果某个函数需要用到ajax返回的data值&＃xff0c;那这时候&＃xff0c;不能通过在created或者mounted来获取数据然后调用函数&＃xff0c;需要在请求成功时&＃xff0c;直接调用传数据&＃xff01;

3.箭头函数的使用

在vue中使用cs6语法&＃xff0c;直接使用箭头函数&＃xff0c;那么函数所指的作用域直接指向最外层&＃xff0c;不用通过_this&＃61;this来指向最外层&＃xff01;&＃xff01;&＃xff01;res是函数里面的参数即是返回的结果&＃xff01;&＃xff01;&＃xff01;

4.过滤器的使用

过滤器的使用中&＃xff0c;如果没有带参数&＃xff0c;只需要写函数名即可&＃xff0c;默认第一个参数是val值。{{title | ratefilter}},要是用使用参数则需要用函数的形式来调用过滤器{{title | ratefilter&＃xff08;“元”&＃xff09; }}

 5.需要item中的item.check字段&＃xff0c; vue中如何来判断一个ajax字段是否存在&＃xff0c;如何给vue中设置需要的字段&＃xff01;&＃xff01;

使用typeof判断一个字段是否存在&＃xff0c;使用vue.$set来为item.check增加字段&＃xff0c;同时如果点击事件的时候要改变列表item中的某个值也需要使用this.$emit &＃xff01;&＃xff01;&＃xff01;但是如果是在forEach()里面可以直接赋值&＃xff01;&＃xff01;

如果列表是用v-for循环出来的&＃xff0c;那么在进行选中判断的时候&＃xff0c;可以使用索引来控制元素有没有被选中&＃xff01;&＃xff01;其中列表中的每一项使用forEach来循环相应的值&＃xff0c;如果不是循环出来的列表&＃xff0c;可以通过控制变量来实现选中操作!!!!!

循环出来的列表&＃xff0c;控制选中方式&＃xff01;&＃xff01;&＃xff01;

forEach&＃xff08;&＃xff09;循环

循环出来的列表样式控制

不是循环出来的列表选中方式控制

 

 

 6.&＃64;click事件里面可以直接使用简单表达式操作&＃xff0c;但是在使用vue的过程中&＃xff0c;如是在视图html命令上进行操作元素&＃xff0c;不用使用this来指定作用域进行操作&＃xff0c;因为在指令里面默认作用域就是当前元素&＃xff0c;使用指令会导致出错&＃xff01;只有在vue实例函数里面&＃xff0c;才能使用this进行作用域指定&＃xff01;&＃xff01;&＃xff01;

 

 7.vue中事件处理之事件修饰符&＃64;click.prevent.self和&＃64;click.self.prevent区别&＃xff08;事件执行的过程中&＃xff0c;根据冒泡事件从最里层开始触发到最外层依次执行&＃xff09;&＃xff01;&＃xff01;&＃xff01;

&＃64;click.prevent事件表示&＃xff0c;阻止默认事件例如a标签中 这个时候a链接就不会跳转&＃xff0c;而是会执行abc函数&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃64;click.prevent.self事件表示&＃xff0c;会阻止所有的点击。

所以这两个的区别是&＃64;click.self.prevent只会阻止自身的点击事件&＃xff0c;而不会阻止默认事件&＃xff08;跳转事件&＃xff09;。而&＃64;click.prevent.self都会阻止

&＃64;click.self.prevent事件表示只会阻止对元素自身的点击。就是只当在 event.target 即点击当前元素时触发处理函数&＃xff0c;即如果事件不是自身元素触发时&＃xff0c;而是内部元素点击冒泡触发时&＃xff0c;改元素的点击事件不会被执行&＃xff01;&＃xff01;

 

实例1&＃xff1a;&＃64;click.self.prevent

上面的代码中&＃xff0c;只有点击div2的时候alertf(2)才会被触发同时阻止默认跳转事件&＃xff0c;触发完冒泡触发div1的点击事件alertf(1)&＃xff0c;然后div3的点击事件alertf(3)不会被触发&＃xff01;&＃xff01;&＃xff01;

点击div3&＃xff0c;会alert3,alert1,跳转到/#。只阻止了alert(2)。因为会先判断self&＃xff0c;点击到div3&＃xff0c;不是self&＃xff08;即div2自身的点击&＃xff09;&＃xff0c;所以不会执行click事件&＃xff0c;就不会执行 阻止默认事件和alert(2) &＃xff0c;所以可以跳转&＃xff01;&＃xff01;&＃xff01;&＃xff01;

 

实例2&＃xff1a;&＃64;click.prevent.self

点击div3&＃xff0c;会alert3,alert1。不但阻止了alert(2)&＃xff0c;还阻止了a的默认跳转。

因为点击的时候会先prevent&＃xff0c;阻止默认事件&＃xff0c;阻止了跳转;然后判断是否是self&＃xff0c;因为点击到的是div3&＃xff0c;所以不是self&＃xff0c;阻止了alert(2)。