Vue基础阶段

一 、历史介绍

angular.js 09年，年份较早

react 2013年, ⽤户体验好

vue 2014年, ⽤户体验好 作者:尤⾬溪 江苏⽆锡⼈

这三种js也是市面中常见的三大框架

二、核心原理

Vue采用了MVVM模式设置视图, 所谓MVVM模式即: 模型影响视图 视图影响模型

VUE-KFC(vue全家桶) ==  vue基础+vue-router(vue路由)+vuex被称为vue全家桶

三、使用

        1): 引包 通过script引用vue.js

        2): 新建一个vue对象:

        3): 插值表达式

                { 变量 }}  类似模版中的变量表达

                注意:对象不要连续3个{}  

                {{{name:'jack'}}}错误 

                {{ {name:'jack'} }}正确

                字符串 {{ 'xxx' }}

                三元表达式 {{ true?'是正确':'错误' }}

                ps:  要⽤插值表达式 必须要data中声明该属性(即变量) 

        4):Vue中的指令

                1.什么是指令

                        在vue中提供了⼀些对于页面 + 数据的更为方便的输出的操作方法, 这些操作就叫做指令.

                        以v-xxx表示 例: <div v-xxx ></div> 指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定

                 2.vue中常⽤的v-指令演示

                        v-text:  文字输入

                        v-html: 文字输入,可以解析HTML元素           

                        v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建

                        v-else-if  

                        v-else

                        v-show 隐藏元素

                        v-if和v-show的区别?

                                v-if为DOM渲染属性,  通过添加删除DOM节点实现

                                v-show属于css渲染,  通过css的display:none实现

                        v-bind:给元素的属性赋值 ,可以给已经存在的属性赋值,也可以给⾃定义属性赋值

                                语法:

                                        在元素上 v-bind:属性名="常量||变量名"

                                简写风格:

                                        v-bind:href = 'res.url'     可以简写为 :href = 'res.url'

                                直接绑定时:src="变量"    绑定图片地址 

                                通过条件绑定时 :class = "{active:isActive}" 增加样式

                                注意: 内容active:isActive冒号前为字符串, 冒号后为变量

                                样式改变:

                                :style='{color:isColor,fontSize:fontSize+"px"}

                                注意: 冒号前为字符串, 冒号后为变量, 不同的样式属性用逗号分隔

                

                        v-on: 绑定事件

                                事件名="表达式||函数名"

                                简写方式: @事件名="表达式"

                               1. 绑定监听:

                                          v-on:xxx="fun"

                                          @xxx="fun"

                                          @xxx="fun(参数)"

                                2.事件对象获取 

                                      vue中的事件对象获取, 当方法中没有参数时, 在方法中的第一个参数就是事件对象  当方法中有参数时,需要手动, 在调用事件时,加入$event,代表事件对象

                                        所有事件默认事件对象都为: event

                                        外部传入时,可以通过$event的方式,把 事件对象传入

                                3.事件修饰符:

                                        DOM事件修饰符:

                                                .stop       阻止冒泡行为  原生JS用法 event.stopPropagation()

                                                .prevent  阻止默认行为  原生JS用法 event.preventDefault()

                                                .once             一次性事件

                                                .capture         变为事件捕获

                                                .self               阻止捕获

                                                .passive       监听滚动, scroll事件,需要配置脚手架与监听

                                        按键修饰符:

                                .                keycode : 操作的是某个keycode值的健

                                                .enter : 操作的是enter键

                                                .tab

                                                .delete

                                                .esc

                                                .space

                                                .up

                                                .down

                                                .left

                                                .right

                                                .ctrl

                                                .alt

                                                .shift

                                                .meta

                                        鼠标按钮修饰符

                                                .left

                                                .right

                                               .middle

                                        ps: 修饰符可以去自由组合,但要注意顺序

                                        例:@click.ctrl  ctrl+单击才生效

                        v-model 双向绑定数据

                                v-model中的修饰符

                                        .lazy          延时

                                        .number   自动转数字

                                        .trim       去掉左右空格

                        ps: 用于form表单中,获取用户输入内容的操作, 当v-model的值与单选 多选 下拉值相同时,会自动加入默认选中属性.

四、Vue中的计算属性  computed:{ }

        使用场景,如果有属性需要经过处理才输出时, 需要用到计算属性,当参与运算的变量发生改变时,计算属性会重新运算

        computed:{

                计算属性:functiion(){

                }

        }

        computed特点:

                1.computed默认只有getter方法

                2.计算属性最大的优点：产生缓存 如果数据没有发生变化 直接从缓存中取

                提升了代码运行效率

        seter方法设置:

               监听的属性由方法变为对象格式

                        属性:{

                               set:function(newV){ 使用较少

                                       设置值时触发

                                },

                               get:function(){

                                       获取值时触发

                               }                

                        }

五、Vue中的监听器 watch

        作用: 用于监听 vue中的属性改变

        正常监听:基本数据类型

                属性:function(新值,老值){  }

                深度监听:复合数据类型

                        属性:{

                                deep: true  开启深度监听

                                handler:function(){   回调方法

                         }

        计算属性与监听属性的区别为:

                1.计算属性的应用场景是计算的内容需要依赖多个属性的情况,侦听器的应用场景是计算的内容依赖一个属性的情况

                2.计算属性为设置一个新的属性, 监听为监听一个已经存在的属性

                3.计算属性有缓存, 监听没有缓存

                4.计算属性的结果是通过return返回的，而侦听属性不需要return

                5.侦听属性的参数可以获取新值与老值, 而的计算属性没有参数

六、Vue中的过滤器 filters

        1.属性部过滤器

                在vue对象中加入

                        filters:{

                                过滤器名 : function(a,b){ return 结果 }

                         }

        2.全局过滤器

                 Vue.filter(‘过滤器名’, (val) => {

                })