Vue

最新推荐文章于 2024-09-25 09:53:04 发布

weixin_34075268

最新推荐文章于 2024-09-25 09:53:04 发布

阅读量99

点赞数

文章标签：前端 javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/myheimastudy/p/9908455.html

版权

********# Vue
标签:前端

### 1.什么是Vue.js

1.Vue.js 是目前最火的一个前端框架(Reacc除了开发网站,还可以开发手机App,Vue也是可以开发手机APP,基于Weex,需要借助与Weex)

2.Vue与Angular核心概念的区别

    Vue核心概念:组件化 双向数据流 (基于ES5的defineProperty来实现的)IE9才支持        
       
        1.组件化:细分代码 
            template style script
        
        2.双向数据流
            1向:js内存属性发生改变,影响页面变化
            2向:页面的改变影响js内存中属性的改变
    
    Angular概念:模块化 双向数据绑定, 和双向数据流一样的概念

3.Vue是前端的**主流框架之一**和Angular.js react.js一起

2.前端的发展历程

+ js原生 => jquery之类的库 => 前端模版引擎 => Angular.js/vue.js
    - 原生开发模式:效率比较低,有兼容性,比较繁琐
   
    - JQuery库:主要是解决了兼容性问题,缺点是频繁的操作dom元素,需要进行拼接去渲染
    
    - 模版引擎:主要解决了频繁操作DOM树, 比较消耗引擎
    
    - Vue/Angular:主要解决了不必要的DOM操作:提高渲染效率:双向数据绑定的

概念**通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不用在关心DOM是如何渲染了

3.框架和库的区别

+ 框架:一套完整的解决方案:对项目侵入性比较大,项目如果需要更换框架.则需要重新构架整个项目 优点:功能完善,
+ 库:(插件)提供某一个小功能,对项目的侵入性比较小,如果某个库有功能上的限制,很容易切换其他库实现需求

4.Node(后端)中的MVC与前端中的MVVM之间的区别

+ MVC是后端的分层开发概念
+ MVVM是前端的视图开发概念

5.Vue基本代码和MVVM之间的基本关系

+ 初次使用

1.导入Vue包
    + 当导入Vue包,在浏览器中,就多了一个Vue构造函数
2.创建一个Vue的实例

<!--将来 new 的实例对象,会控制这个元素中的所有内容 -->  
    <!-- V-->
<div>  
  <p>{{msg}}</p>
</div>
<script>
    //这里就是VM
    const vm =new Vue({ 
      el: '#app 选择器',//表示当前我们 new的这个Vue实例,要控制上面的哪个区域
         // 这里的data就是M
          data:{
              msg:"欢迎学习Vue 数据"
               }
           })
</script>

6.常用指令

     1.学习v-cloak指令
   概述:可以解决闪烁问题,可以在{{msg}}前后放任何东西,不能解析html
*/

<style>
    [v-cloak]{ display:none; }
</style>
    <div>
        <p v-cloak> {{msg}} </p>
    </div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:"123" //123
        }
    })
</script>

### 2.v-text指令
概述:功能与vcloak相同,不同点默认v-text是没有闪烁问题,会覆盖原本的内容,但是插值表达式v-cloak 只会替换自己的这个占位符,不会把整个元素情况

<div>
        <p v-text="msg"></p>
    </div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:"123" //123
        }
    })
</script>

3.v-html指令
    概述:功能与v-text相同,可以解析标签

4.v-bind指令
    功能概述:v-bind指令是vue中提供的用于绑定属性的指令 冒号 : 是v-bind的简写后面写需要绑定的属性

5.v-on指令
    功能概述:是用于绑定时事件的,methods属性中定义了当前vue的可用方法简写方式@

            var vm = new Vue({
                 el:'#app',
                 data:{
                msg:"123" //123,
                methods:{
                    
                }
        }
    })

 6.事件修饰符
    1.@click.stop阻止冒泡事件
    2.@click.prevent 阻止默认行为
    3.@click.capture 捕获执行机制
    4.@click.self 只有点击元素本身才触发,  只会阻止当前元素的冒泡行为
    5.@click.once  事件只 触发一次,  可以 串联写比如 @click.stop.once

7.双向数据绑定
    1.v-model
        v-model="msg"
        功能概述:只能运用在表单元素中,可以双向绑定

8.v-for指令的四种使用方式

        1.迭代数组
        <ul id="app">
            <li v-for="(item,i) in list">
             索引:{{i}}----- 值:{{item}}--------要遍历的数组名称:{{list}}
            </li>
        </ul>
        <ul id="app">
            <li v-for="item in list">
              值:{{item}}--------要遍历的数组名称:{{list}}
            </li>
        </ul>
       
         2.迭代对象
            <ul id="v-for-object" class="demo">
                 <li v-for="value in object">
                 {{ value }}
                 </li>
            </ul>
            <div v-for="(value, key) in object">
                {{ key }}: {{ value }}
            </div>
            <div v-for="(value, key, index) in object">
             {{ index }}. {{ key }}: {{ value }}
            </div>

     9.v-if和v-show
    v-if的特点每次都会重新删除或者重新创建元素 性能消耗比较严重 不频繁切换的推荐次指令
    v-show每次不会重新创建,只是将元素隐藏 有较高的初始渲染消耗 频繁切换的推荐使用此指令

### 7.Vue中的样式

1.使用数组的方式创建类名
    功能概述:可以使用三元表达式

<div id="app" :class="['red','blue','isOK?'active':'']"></div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"去年买了个b"
                istOk:'true'
            }
        })
 </script>
    2.数组中嵌套对象 比三元表达式简单  
    <div id="app" :class="['red','blue',{'active':isOk}]"></div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"去年买了个b"
                isOk:'true'
            }
        })
 </script>
    3.直接使用对象创建类名
     <div id="app">
        <div :class="{'logo':true,'nav':true}">{{msg}}</div>
    </div>
    4.使用内联样式
        1.第一种写法
        <div id="app">
            <div :style="{color:'red','font-size':'14px'}">{{mgs}}</div>
        </div>
        2.第二种写法
          <div id="app">
            <div :style="data1">{{msg}}</div>
          </div>
            <script>
                var vm=new Vue({
                    el:"#app",
                    data:{
                        mgs:"去年买了个b",+
                        data1:{
                            'font-size':'20px',
                            'background':"red"
                        }
                    }
                })
            </script>
        3.第三种写法
        <div :style="[data1,data2]">{{mgs}}</div>

自定义指令

1. 自定义全局按键修饰符
语法:Vue.config.keyCode.f2=113
2. 自定义全局
语法:Vue.directive(参数,{ })
    参数1:指令的名称,定义的时候不用加v-前缀 调用的时候需要加
    参数2:对象
   示例
    ```
        :Vue.directive(参数,{ 
               bind:(el){ el参数:把原生el的时间方法绑定到.vue自定义事件上        绑定函数}   //当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
               inserted(){插入函数}  // 插入dom中的时候执行一次这个inserted这个函数
               updated(){} //当数据更新的时候会执行updated,可能会触发多次
        })
    ```

8.动画

前提:
    1.动画元素必须被transition标签包裹住
    2.动画元素,必须插入,更新,删除的时候才会有
阶段:
    1.进入
    2.插入
css:
    1.按照它提供好的过度名称来实现动画
    2.注意利用第三方css著名的动画库  animate
        注意点:我们的过渡类名,写在transition的属性里面,并且animate必须 animate开头
js:
    1.按照它提供的过渡的名称来实现动画
    2.按照它提供好的动画钩子函数来实现动画
        进入阶段:
            beforEnter 进入开始,动画第一帧
            enter  进入
            afterEnter 在进入之后
        离开阶段:
            beforLeave 离开开始,动画第一帧代码
            leave 整个离开的过程, 离开中...
            afterLeave 整个动画离开完毕
    2.利用第三方 动画库 Velocity.js来实现
        注意:
            Velocity只能帮我们简化enter,leave的代码
        注意点:
            如果利用他们提供的过渡名来实现动画,动画的前缀,如果我们给transition设置了name,就回代替v-

9.计算属性和Watch

1. watch一般情况下用来监控data值的变化,同时它也可以监听Vue实例中的属性
2. computed
    它里面写的就是方法:用于计算
3. 注意点:
    1. 不管是计算属性还是watch都是与data,methods,el同级的
    2. Vue实例中,除了el之外,基本上都是对象
    3. 计算属性必须要有返回值
    4. 计算属性中的函数,调用的地方
        1. 初次渲染的时候,会执行
        2. 函数内部依赖的Model值    
4.面试题
    1. computed
        1. 有缓存
        2. 被迫执行
    2. methods
        1. 没有缓存
        2. 主动触发

10. 组件

1. 什么是组件?
    1. 把一段代码提取出来,形成一个组件,达到复用的目的
    2. 特点复用 包括 视图 逻辑
2. vue中的五种书写模式
    1. 先定义,在注册[组件只有注册了,才能在html中使用]
    2. 定位&注册注册一部到位,最后在使用
    3. 对第一种写法template的简化 内置template组件来实现
    4. 对第一种template中的简化 通过script标签来实现
    5. 单文件组件
        1. 命名 xxx.vue
        2. 一个xxx.vue中分三部分组成
        3. template模版
        4. script逻辑
        5. style样式
3. 注意点
    1. 组件的定义写在js中
    2. 组件中必须有一个根元素div来包裹内容,无论子元素有没有div
    3. 组件中的data是一个函数不是一个对象,每一次都必须是一个新对象, 所以每次都要return一个新对象
4. 组件切换
    <component :is="component"></component>
    1.compoent 是一个占位符
    2.:is属性是用来指定组件名称的  
    3.组件名称默认是字符串,  可以在data内声明一个变量
    4.当点击切换的时候给变量赋值 实现切换功能
5. 子组件
    1.子组件默认访问不到父组件的内容,可以通过父组件向子组件传值 , 可以让子组件通过绑定的方式将父元素的以绑定的形式绑定到子组件身上  :自定义一个名称="父元素组件名"
    2.取值应该用props:[] 数组 重新定义一下 msg

11. 过滤器

1. 作用:对呈现在页面上的数据,先进行过滤,在显示
2. 分类
    1. 私有过滤器
        1. 只能在组件内使用
        2. 跟data,compued一样 ,也是一个函数,filers
        3. 注意点
            1. 过滤器函数,必须要有一个参数,这个参数就是要过滤原始数据
            2. 过滤器函数, 必须要有返回值
            3. 过滤器中的第一个参数,就是我们管道符 | 前面的原始数据
            4. 调用过滤器函数的时候,我们过滤器的传参,是从第二个开始的
    2. 全局过滤器
        1. 所有的组件都可以使用,只是在定义的时候,和私有过滤器不太一样,里面逻辑是一样的
        2. 语法 vue.filers('过滤器名称',处理函数)
        3. 注意点:
            1.建议  写在组件之前

12. vuex

1.Vuex是什么?
    Vuex就是一个全局的数据存储仓库
2.特点
    一刷新就Vuex状态仓库就全部清空了. 需要配合localStrage 使用
    setate: 创建仓库
    Getter:获取数据
    Mutation:变更数据状态   //一般修改数据要通过commit来进行修改,无法直接对仓库内的文件进行修改
3.Vuex&localStorage的使用步骤
    1.导入Vuex&Vue
        1.1 导入Vue与Vuex
            import 'Vue' from 'Vue'
            import 'Vuex' from 'Vuex'
                Vue.use(Vuex)
    2.创建一个空白创库
        const store = new Vuex.Store({
            state:{
                goodsShopping:0
            },
    3. 变更状态
            mutation:{
                <!--回调函数--> 参数1:状态树,参数2:载入
                goodsNumber:(state,goods){
                    console.log(111) // 测试是否连通如果连通就可以写localstor代码
                }
            },
    4.获取状态
            getters:{
                getGoodsNumber:state=>{
                    return  state.goodsShopping
                }
            }
        })

13. 父组件向子组件传值 & 子组件向父组件传值

1.父组件传子组件

1.在组件调用的元素上绑定自定义属性将父组件的值传入
 
2.子组件用props去接受父组件用于接收父组件传入的值

3.不能直接修改传入的值,有可能父组件传入的是引用类型,子组件一修改父组件跟着一起修改,所以要单独定义去存储进行修改

2. 子组件传父组件通过事件调用向父组件传值

1.在子组件上设置传入的属性名  this.$emit('属性名1')
2.在组件上自定义属性, 属性名和子组件的属性名一致,
3.父组件通过属性值去接收

转载于:https://www.cnblogs.com/myheimastudy/p/9908455.html