vue2.x基础知识学习笔记

一、vue环境搭建 vue官网地址：https://cn.vuejs.org/index.html

准备工作：

①安装node.js

　　查看安装版本：node -v

②安装淘宝镜像加速（下载速度会更快）

　　npm install cnpm

③安装vue-cli （vue脚手架）

　　npm install -g @vue/cli （新版本）

创建项目：

　　管理员身份打开poweerShell或者cmd

　　①vue create 项目名称（只能小写字母，- 组成，最好不要使用下划线）

　　　　注：这一步如果有错误：无法加载文件，则执行下面操作：

　　　　　　set-ExecutionPolicy RemoteSigned ,之后选择 y ，再次创建即可

　　②↑ ↓选择到Manually select features回车

　　③选择Babel ，router（空格选择）回车

　　④询问是否选择history路由模式，默认no

　　⑤询问配置信息存储位置，选择packge.json即可，也可以自定义一个文件

　　⑥询问是否将此配置保存为模板，以便下次使用

　　⑦创建完成

　　⑧用提示信息两行命令开启服务器

安装插件、依赖：

　　安装element组件库、引入、注册官网地址：https://element.eleme.cn/#/zh-CN

　　　　npm install element-ui --save

　　路由安装、引入、注册

　　　　npm install vue-router@4

　　axios安装中文网地址：http://www.axios-js.com/zh-cn/docs/

　　　　npm install axios

二、vue的七大对象：

　　① el

　　② data

　　③ methods

　　④ template

　　⑤ render

　　⑥ computed

　　⑦ watch

三、vue-cli脚手架目录大致结构：

四、vue基本指令:

五、了解MVVM模式

六、vue路由基本用法：

七、vue生命周期（钩子函数）

八、组件（自定义标签，可复用，一个页面就是由很多组件构成）

　　1、基本用法：

　　　　html部分：　　　

　　　　js部分

　　2、组件中属性的传值

　　1、props属性，定义好组件之后，在自定义组件中自定义标签中定义属性，该属性绑定vue实例中的data中的某个数据（可以是引用数据，也可以是不是引用数据）　　　　　　　组件中props属性接收之后，在组件中的任何一个大方都可以使用了　2、prop属性值的验证　3、设置属性的默认值　　

　　3、子组件向父组件传值,使用自定义事件内容分发（ $emit()函数）

　　操作步骤：

①在子组件中定义一个事件来触发传值

②在事件中编写自定义函数 this.$emit("自定义名称" , "要传递的值"); ###要传递的值可以是普通类型，也可以是数组，也可以是对象

③在子组件标签中监听要传递的值

④在父组件中定义方法接收传过来的值

　　4、动态组件

九、网络通信（axios） 中文官网地址：http://www.axios-js.com/zh-cn/docs/

　　axios只需在需要使用的地方引入即可，无需注册

十、计算属性

　　所谓《计算属性》重在属性两个字，它就是一个属性，与data中的属性有相同特点，这个属性的特殊之处就是它的值可以通过计算获得　　1、基本用法：

{{name}} {{hobby.name}} {{hobby.time}} 　　　　　 {{sum}}

简易计算器 = {{result}}

十一、侦听属性

侦听属性是侦听一个属性（包括一般的属性和计算属性）的变化，相当于一个回调函数，当属性的值发生改变时，会执行某些操作
一般用来做数据同步：比如用户修改了自己的网名，个性签名后，可以在侦听属性中发起异步请求将数据库中的数据更新

//侦听属性（想要侦听哪个属性，方法名就是那个属性）
        watch: {
            //curr:属性变化之后的值   last：属性变化之前的值
            firstNum: function(curr , last){
                console.log("变化之后的值："+curr  + "变化之前的值："+last);
            },
            //也可以侦听计算属性
            result: function(after , before){
                console.log("变化之后："+after +"变化之前："+before);

            }
        }

十二、过滤器

针对插值（插值就是 {{}} 里面的内容）可以将原始数据进行处理
过滤器可以累加，一个过滤器处理后的结果再交给另一个过滤器处理

场景：给up主点赞，当赞的数量达到1000之后，显示1k、1.2k这种，当数量到达10000以上时，显示1w、1.2w类似的


//过滤器

　　data: { yesNum: 9998, },

  filters: {
     //value就是传过来的原始数据
     yesNumHandle: function(value){
     if(value >= 1000 && value < 10000){
        return (parseInt((value / 1000)*100) / 100) + "k";
     }else if(value >= 10000){
        return (parseInt((value / 10000)*100) / 100) + "w";
     }
   }
 }

十三、渲染函数

渲染函数具有非常强大的功能，使用的时候比较繁琐，在开发中使用的非常少（可以了解vue底层的实现）
渲染函数出现，body里面的所有标签都会消失
格式： createElement("标签的类型" , {属性、事件、样式} , [里面包含的标签] , "标签中的文本")
例如： createElement("div" ,{attrs:{id:"app"} , on:{click:this.btn} , style:{fontSize:"14px",color:"red"}} , [createElement("span" , "哈哈")])

　　　　　//渲染函数
        render: function(createElement){
            var divs_ = [];
            for(var i = 0 ; i < this.news.length ; i++){
                var div_ = createElement("div" , [
                            createElement("h4" , [
                                this.news[i].title,
                                createElement("span" ,{on:{click:this.btn} ,style:{color:"red" , fontSize:"13px"}} , this.yesNumHandle(this.news[i].like))
                            ])
            ])
                divs_.push(div_);
            }

            return createElement("div" , {attrs:{id: "app"}} , [
                createElement("div" , divs_)
            ]);
        }

十四、插槽

　只有一个插槽的时候，标签之间的内容默认都在插槽内
有多个插槽的时候，需要给插槽指定名称，用的时候用template标签包裹起来，并使用v-slot指定使用那个插槽
具名插槽：有具体名字的插槽
默认插槽：没有名字的插槽（default）
当模板中有多个插槽时，要清楚有没有默认插槽，哪个是默认插槽，在使用中如果有多个插槽，只有一个没有名字，那这个就是默认插槽，使用的时候，不用template配合v-slot指明使用哪个插槽的话，就会使用默认插槽
直接在模板中的slot标签内写的内容称为后备内容

　　1、基本使用：

十五、路由组件

　　1、嵌套路由

父组件：
        var parent= {template:'父组件中的内容
'}

        var child = {template:'这是子组件
'}

        router:[
            {
                path: '/parent',
                component:parent,
                children:[
                    {
                        path:'child',//子组件的路径
                        component:child //子组件
                    }
                ]
            }
        ]

        显示父组件
        显示子组件

　　2、命名路由

　　3、动态路由

　　　　动态传参 this.$router.push({path:'', params:{} , query:{}}) 前面是path，就不可以用params传值，只能用query传值；前面是name就可以使用params，也可以使用query

　　　　给同一个页面路由名字起别名（一个路由有多个名字）使用 alias:

　　4、路由守卫,一般指（路由独享守卫）

　　　　就是一个钩子函数(写在路由里面的) 　　　beforeEnter: function(to , from , next){} to指要去到哪个页面，from表示从哪个路由过来的，next控制是否放行，跳转到哪个路由

　　　　1）全局前置守卫

var router = new VueRouter({})

    router.beforeEach(function(to , from , next){

    })

　　　　2）解析守卫

router.beforeResolve(function(to , from , next){})

　　　　3）后置守卫

router.afterEach(function(to , from){})

　　　　4）组件中的路由守卫

beforeRouteEnter:function(to , from , next){
        console.log("组件进入");
    }

    beforeRouteUpdate:function(to , from , next){
        console.log("组件被复用的情况下调用（数据变动的时候）");
    }

    beforeRouteLeave:function(to , from , next){
        console.log("离开组件的时候");
    }

　　5、路由守卫的全部过程分析

　导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

十六、history路由模式和hash路由模式

　　路由重定向：在路由中加参数 redirect: '/login'

　history路由模式请求地址中不会有 '#' 字符

十七、404通配符

通过通配符 * 作为path，将该路由放到最后，如果所有路由都匹配完都没有匹配上，则会匹配404页面

routes:[
        //放在最后面
        {
            path:'*'
            component:notFound  //组件的名称
        }
    ]

十八、命名视图

　　有名字的视图（可以在一个页面显示多个组件）


    

    var left = {template:'左边
'}
    var right = {template:'右边
'}

    routes:[
        {
            path:'/a'
            components:{
                left:'left',
                right:'right'
            }
        }
    ]

前端笔记

vue2.x基础知识学习笔记

相关

前端笔记2 CSS

前端笔记

标签