vue框架

Posted 土豆切成丝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue框架相关的知识，希望对你有一定的参考价值。

一、vue是什么

官方解释：vue是一套用于构建用户界面的渐进式框架。

vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。

补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增强其能力。

  • vue-router
  • vuex
  • axios
  • nuxt

二、vue的核心

①数据驱动视图（页面）

修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。

②MVVM模式

  • M  数据模型 model
  • V  视图（页面）view
  • VM数据模型和视图的控制器 viewmodel
  • 数据双向绑定

③组件化开发

通常一个应用会以一颗嵌套的组件树的形式来组织

把页面按照页面功能（导航，侧边栏，下拉框）拆分业务，每一个组件时一个独立的功能，提供代码可维护性，和复用性。

 三、vue使用

hello vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>msg</h1> <!-- 插值语法-->
    </div>
    <!-- 引入 -->
    <script src="./vue2.js"></script>
    <script>
        // 实例化vue
        let  vm = new Vue(
            // vue的选项，el选项的作用指定vue实例管理的容器
            el:'#app',
            // vue选项，data作用是声明响应式数据
            data:
                msg:'hello vue'
            
        )
    </script>
</body>
</html>

页面显示：

 四、vue-指令

  1.v-text和v-html

        v-text：更新替换标签内容，文本；v-html更新替换标签内容，html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1 v-text="text"></h1>
        <h1 v-html="html"></h1>
    </div>
    <!-- 引入 -->
    <script src="./vue2.js"></script>
    <script>
        // 实例化vue
        let  vm = new Vue(
            // vue的选项，el选项的作用指定vue实例管理的容器
            el:'#app',
            // vue选项，data作用是声明响应式数据
            data:
                text:'v-text:<span>hello vue</span>',
                html:'v-html:<span>hello vue</span>'
            
        )
    </script>
</body>
</html>

 2.v-if和v-show

      两者都是控制DOM元素的显示于隐藏，但是区别很大。

        面试题：v-if和v-show的区别

        答：v-if是动态的向dom树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显示隐藏编译过程；性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗

3.v-on

作用：v-on在基于vue的程序中绑定事件

语法：<div v-on:事件名称='事件处理函数 | js表达式'><div>   简写 @

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字的显示与隐藏</title>
</head>
<body>
    <div id="app">
        <h1 v-text="text" v-show="ifShow" v-on:click="toggleShow"></h1>
        <h1 v-html="html"v-show="ifShow" v-on:click="ifShow=!ifShow"></h1>
    </div>
    <!-- 引入 -->
    <script src="./vue2.js"></script>
    <script>
        // 实例化vue
        let  vm = new Vue(
            // vue的选项，el选项的作用指定vue实例管理的容器
            el:'#app',
            // vue选项，data作用是声明响应式数据
            data:
                text:'v-text:<span>hello vue</span>',
                html:'v-html:<span>hello vue</span>',
                ifShow:true
            ,
            // vue选项，methods定义函数
            // 在此处定义的函数，可以通过vm调用，vue实例进行调用
            methods:
                toggleShow()
                    this.ifShow=!this.ifShow;
                
            
        )
    </script>
</body>
</html>

4.v-bind

作用：动态的去绑定属性的值，说白了通过数据去改变属性的值

语法：：<div v-bind:标签属性名称="数据名称|js表达式"></div> 简写 :

5.v-for

作用：通过数据动态遍历标签

语法：

  • 遍历4次 <div v-for="i in 4">i是从1开始序号</div>

  • 数组类型 list = [,,...]

    • <div v-for="item in list">item就是每次遍历的选项数据</div>

    • <div v-for="(item,i) in list">item就是每次遍历的选项数据，i就是索引</div>

  • 对象类型 obj = a:1,b:2

    • <div v-for="(v,k,i) in obj">v属性值，k属性名，i索引</div>

规范：

  • 在v-for指令使用的时候，需要带上一个属性 key 且指定唯一的标识

  • 目的：给遍历的每一个元素加上唯一标识，提高操作的性能。

  • 语法：v-for="" :key="唯一标识" 建议使用ID，不得已情况下才会使用索引。

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- v-for="i in 4" -->
      <!-- 注意：v-for指令vue官方不建议使用v-if指令 -->
      <div v-for="i in 4" :key="i">第i个div</div>
      <hr>
      <!-- v-for="item in list" -->
      <div v-for="item in list" :key="item.id">名字：item.name</div>
      <hr>
      <!--  v-for="(item,i) in list" -->
      <div v-for="(item,i) in list" :key="i">名字：item.name 索引i</div>
      <!--  v-for="(v,k,i) in obj" -->
      <div v-for="(v,k,i) in obj" :key="k">值：v 键：k 索引：i</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue(
        el: '#app',
        data: 
          // 数组
          list: [id:1,name:'tom',age:10,id:2,name:'tony',age:12],
          // 对象
          obj: 
            name: 'tom',
            age: 10
          
        ,
        methods: 
      )
    </script>
  </body>
</html>

6.v-model

作用:数据的双向绑定

面试题：双向数据绑定的原理

答：vue.js是采用数据劫持解和发布者-订阅者模式的方式，

通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

  1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

  2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

  3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

  4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

表单元素如何进行v-model进行绑定

输入框、下拉框、复选、单选、文本域

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
</head>

<body>
    <div id="app">
        <!-- input -->
        <input type="text" v-model="msg">
        msg

        <hr>

        <!-- select -->
        <select name="" id="" v-model="selectMsg">
            <option value="qd">前端</option>
            <option value="hd">后端</option>
            <option value="ui">UI</option>
        </select>
        selectMsg

        <hr>
        <!-- 复选框 -->
        <input type="checkbox" name="GAME" value="wz"  v-model="checkMsg">王者
        <input type="checkbox" name="GAME" value="lol" v-model="checkMsg">LOL
        <input type="checkbox" name="GAME" value="cs"  v-model="checkMsg">CS
        checkMsg

        <hr>
        <!-- 单选框 -->
        <input type="radio" name="sex" value="0" v-model="radioMsg">男
        <input type="radio" name="sex" value="1"  v-model="radioMsg">女
        radioMsg

        <hr>
        <!-- 文本域 -->
        <textarea v-model="text"></textarea>
        <div v-html="text"></div>
    </div>
    <script src="./vue2.js"></script>
    <script>
        
        const vm = new Vue(
            el: '#app',
            data: 
                msg : "laila",
                selectMsg : "ui",
                checkMsg : [],
                radioMsg : '',
                text : ''
            ,
            methods: 
        )
    </script>
</body>

</html>

五、vue-常用属性

1.过滤器  filter

作用：在插值表达式中使用，可以对输出的内容进行格式的转换。数据字段|过滤器名称

定义：

  • 全局定义（在任何vue实例管理的视图中都可使用）

    • 语法 Vue.filter('过滤器名称',处理格式函数(val) //val就行需要转换的值 //对val进行处理 //处理好的数据return出去即可 )

  • 局部定义（仅仅在当前定义过滤器的vue实例中使用）

    • 语法 new Vue(filters:'过滤器名称':处理格式函数(val) //val就行需要转换的值 //对val进行处理 //处理好的数据return出去即可 )

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    </head>
    <body>
        <div id="app1">
              msg | test
            <!-- list |  listFilter-->
        </div>
        <div id="app2">
            <hr>
             news |  test
             news | forMsg 
        </div>
        <script src="./vue2.js"></script>
        <script>
            // 全局定义过滤器，每个vm都可以使用该过滤器
            // Vue.filter("过滤器的名字","回调函数")
            Vue.filter('test',(val)=>

                console.log(val)
                return val+123;
            )
            const vm1 = new Vue(
                el: '#app1',
                data: 
                    msg : 'hello',
                ,
                methods: 
            )

            const vm2 = new Vue(
                el: '#app2',
                data: 
                    news : "中国新闻",
                ,
                methods: ,
                filters : 
                    //定义局部过滤器
                    // key 名字  val 函数
                    forMsg : (val)=>
                        return val + "局部过滤器"
                    
                
            )
        </script>
    </body>
</html>

2.计算属性 computed

作用：

  • 根据data当中的数据，经过一定的逻辑处理，得到一项新数据（计算属性）。

  • 当data中的数据发生变化的时候，计算属性也会更新。

  • 计算属性也是响应式数据，改变的时候也会驱动视图的更新。

  • 当多次获取计算属性的时候，处理逻辑不会重新执行，因为有缓存。

定义：

  • 语法：new Vue(computed: 书写计算属性 )

  • 书写计算属性：

    • myMsg () // 处理逻辑 return ‘处理后的数据’

  • 使用：和data中的数据一致

3.属性检测 watch

作用：可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstName">
             +
            <input type="text" v-model="lastName">
            =
            <input type="text" v-model="fullName">

            <hr>
            <input type="text" v-model="obj.name">
             obj.name 

            <input type="text" v-model="obj.brand.name">
             obj.brand.name 
        </div>
        <script src="./vue2.js"></script>
        <script>
            const vm = new Vue(
                el: '#app',
                data: 
                    firstName : "爱新觉罗",
                    lastName : "政",
                    fullName : "",
                    obj : 
                        name : "zs",
                        brand : 
                            name : "李四"
                        
                    
                ,
                methods: ,
                watch : 
                    // 函数的写法
                    // firstName : function(newVal,oldVal)
                    //     this.fullName = newVal + this.lastName;
                    // ,
                    // lastName : function(newVal,oldVal)
                    //     this.fullName = this.firstName + newVal;
                    // 
                    // 对象的写法
                    firstName : 
                        handler : function(newVal,oldVal)
                            setTimeout(()=>
                                this.fullName = newVal + this.lastName;
                            ,3000)
                        ,
                        immediate: true//一打开页面就开启监听
                    ,
                    lastName : 
                        handler : function(newVal,oldVal)
                            this.fullName =  this.firstName + newVal;
                        ,
                        immediate: true//一打开页面就开启监听
                    ,
                    obj : 
                        handler : function(newVal,oldVal)
                           console.log(newVal,oldVal)
                        ,
                        immediate: true,//一打开页面就开启监听
                        deep : true//深度监听
                    
                
            )
        </script>
    </body>
</html>

面试题：computed和watch的区别

答：computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

计算属性（computed）属性检测（wathch）
首次运行首次不运行
调用时需要在模板中渲染，修改计算所依赖原数据调用时只需修改元数据
默认深度依赖默认浅度观测
适合做筛选，不可异步适合做执行异步或者开销较大的操作

这个记录下希望看的的小伙伴能学到更多，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！

什么是vue框架？

什么是vue

是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue 的核心库只关注视图层

vue的兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

vue学习资源

vue.js中文官网：http://cn.vuejs.org/

vue.js源码：https://github.com/vuejs/vue

vue.js官方工具：https://github.com/vuejs

vue.js官方论坛：forum.vuejs.org

对比其他框架-React

React 和 Vue 有许多相似之处，它们都有使用 Virtual DOM；提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

都有支持native的方案，React的RN，vue的Wee下

都支持SSR服务端渲染

都支持props进行父子组件间的通信

性能方面：React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

不同之处就是：

数据绑定方面，vue实现了数据的双向数据绑定，react数据流动是单向的
virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理（如果要操作直接this.xxx）
组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

对比其他框架-angular

在性能方面，这两个框架都非常的快，我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话，你可以参考这个第三方跑分。单就这个跑分来看，Vue 似乎比 Angular 要更快一些。

在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此，一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。

灵活性：Vue 相比于 Angular 更加灵活，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。

vue.js的核心特点—响应的数据绑定

传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑

响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中

<template>
<div id="app">
message
</div>
</template>

<script>
export default
name: 'app',
data ()
return
message: 'Welcome to Your Vue.js App'



</script>

<style>
</style>

vue.js的核心特点—可组合的视图组件

一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成

vue中实现组件引入示例

第一步：import导入需要引入的组件文件；

第二步：注册组件；

第三步：在需要引入组件的文件中加上组件标签（这个标签的标签名就是注册的组件名字，多个单词的和这里有xx-xx的形式）

需要注意的是：组件可以嵌套引入，也就是说组件可以引入其他组件

首先创建一个组件，用于被引入的组件，组件名字叫Hello.vue
————————————————
版权声明：本文为CSDN博主「胡椒粉0121」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 参考技术A Vue (读音 /vjuː/，类似于 view) 是一个用于创建用户界面的开源Model–view–viewmodel前端JavaScript框架，也是一个创建单页应用的Web应用框架。它由尤雨溪创建，由他和其他活跃的核心团队成员维护。是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 参考技术B

    Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。

    在GitHub上，该项目平均每天能收获95颗星，[为Github有史以来星标数第3多的项目。

    Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。

    Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

    在为AngularJS工作之后，Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue最早发布于2014年2月。

    作者在Hacker News、Echo JS与Reddit的/r/javascript版块发布了最早的版本。一天之内，Vue就登上了这三个网站的首页。Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中，Vue所获得的星标数已超过React，并高于Backbone.js、Angular 2、jQuery等项目。

 参考技术C Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。
Vue是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，易上手，便于和第三方库或既有项目整合。
现代化的工具链和各种类库结合使用，Vue也更适合做复杂的单页面应用SPA（SinglePage Web Application） 参考技术D Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。
Vue是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，易上手，便于和第三方库或既有项目整合。
现代化的工具链和各种类库结合使用，Vue也更适合做复杂的单页面应用SPA（SinglePage Web Application）

以上是关于vue框架的主要内容，如果未能解决你的问题，请参考以下文章

Ember.js和Vue.js对比，哪个框架更优秀？

开源推荐 4渐进式 JavaScript 框架 Vue.js，精华都在这了

web前端技术内容详解之Vue.js框架

前端Vue.js框架是啥？

为什么43%前端开发者想学Vue.js？原因在这里

美团点评开源用 Vue.js 开发小程序的前端框架 mpvue