Vue 初体验

ILove_bugs

于 2021-11-22 21:25:06 发布

阅读量317

点赞数

分类专栏： Vue 文章标签： javascript 前端 node.js

本文链接：https://blog.csdn.net/ILove_bugs/article/details/121481051

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第1阶段：

html css 。浮动、定位布局、mdeia（百分比）、响应式、flex、rem布局

<tagname key="value"></tagname>
<tagname key="value" />

selector{
    key:value;
}

第2阶段：

得保证嵌套标签要合理，逻辑思维，编程思维。

声明变量、数据类型、运算符（算术、赋值、比较、逻辑、三目）、声明函数( 参数、this )、分支语句（ if,switch ），循环（for/while/do...while/for...in）

面向对象（原型和原型链），类和函数有原型prototype，对象有原型链 __proto__

内置对象：它身上的方法而已。Math、Date、RegExp、String、Array、Location、history、locastorage

高级：事件（事件对象、事件流：冒泡和捕获、委托、）、BOM（弹框、各种宽和高）、DOM（节点操作、节点类型）

第3阶段：

前端工程师的提升阶段。（接口可以不用会写，express和mysql）

git/es6/ajax/http协议/传参的方式/你得会看着接口文档调用接口/promise和async/node的npm

第4阶段：

vue + react。 25天

3个项目，vue：2（后台系统 + 小U商城）。react：1

二、Vue

2.1 vue初探

2.1.1官网

Vue.js

2.1.2 介绍

插件：日历插件、轮播图、选项卡。

框架：bootstrap。能够独立做来一个一个网页（项目就是由每一个网页组成）响应式布局的项目

vue是渐进式 JavaScript 框架

渐进式：主张最少。最大的特点是没有ＤＯＭ操作。主张只操作数据。

2.1.3 优点

1.轻量级的数据框架
2.双向数据绑定
3.提供了指令
4.组件化开发
5.客户端路由
6.状态管理：同cookie、session、本地存储类似

2.1.4 缺点

1.Vue 底层基于 Object.defineProperty 实现数据响应式，而这个 api 本身不支持 IE8 及以下浏 览器，所以Vue不支持IE8及其以下浏览器；
2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)； single page application
    以前是每一个显示的页面都应该有一个html才能设置不同的title、description、keywords
    app
    做项目时，必须使用Vue的脚手架创建项目，但脚手架就是基于webpack的一个脚手架。
3.由于 CSR的先天不足，导致首屏加载时间长，有可能会出现闪屏。
    client side render: 客户端渲染( 后端提供json数据，前端拼接字符串，再渲染 )
    server side render: 服务端渲染( json+html拼接字符串都在后端做，返回给前端 )

2.1.5 核心

数据驱动（ 数据改变驱动我们视图的改变 ） 组件系统

2.1.6 MVVM

M-model模型
V-view视图
VM-viewModel 视图模型
模型（model）通过了视图模型  决定了视图(view)
视图(view)  通过视图模型 修改模型 (model) 
视图模型是模型和视图之间的桥梁。

2.1.7 SPA :vue或react、小程序

single page application
你的项目里面只有一个index.html
但是肯定也要以多页面视图展示。但是我们没有体会到页面刷新。
index.html#cinema
index.html#movies
index.html#movie/classic

实现原理：地址栏#后面变化了，然后发送ajax请求，实现页面的变化  
地址栏发生变化会向服务器发请求，但是#后面变化不会发请求。
体验好。第1次访问可能会出现白屏，但是后面整体体验是很好的

2.1.8 MPA ： js + jq

mutiple page application
movies.html
movie.html
actor.html
seo 好，整体体验不好

2.2 vue初体验

基于js封装出来的一个前端框架。

2.2.1 安装

1.cdn [不推荐]：线上的一个网址
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.npm  [推荐]
3.脚手架[做项目]

2.2.2 引用


    <!-- 
        引入方式：
     -->
     <!-- 
         1. CDN: 就是引入一个线上的地址。
      -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
      <!-- 
          开发阶段： 写的一些代码提示相对更好
       -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
      <!-- 
          生产阶段
       -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->


      <!-- 
         2. 使用npm下载到本地
       -->
       <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
       <script src="vue.js"></script>

       <!-- 
           3. 项目肯定是 脚手架帮我们搭好所有的架子么。
        -->

      <script>
        // 在局部就暴露出一个 Vue 构造函数,那必然是要实例化Vue的
        console.log( Vue );
      </script>

2.3 vue实例

2.2.1 如何用？ el

 <!-- 1.书写Vue实例要控制的视图容器，按照规范我们往往取一个id名叫app -->
    <div id="a">
        {{ 1 }}
    </div>

    <!-- 2.引入Vue.js  -->
    <script src="vue.js"></script>

    <script>
        // 3. 实例化Vue

            //Vue = function ( options ){}
        let vm = new Vue( {
            el:'#a',// element: 这个vue对象要控制哪个视图容器
        } ) //会返回一个对象   

        // console.log( typeof vm,vm );  object 

    </script>

不按照规范：会报错

<body >
    
    <!-- 1.书写Vue实例要控制的视图容器，按照规范我们往往取一个id名叫app -->
    <div class="b">
        {{ 1 + 2 }}
    </div>
    <div class="b">
        {{ 1 + 2 }}
    </div>

   
</body>
 <!-- 2.引入Vue.js  -->
 <script src="vue.js"></script>

 <script>
     // 3. 实例化Vue

         //Vue = function ( options ){}
     new Vue( {
         el:'.b',// element: 这个vue对象要控制哪个视图容器
                  //只有第1个容器生效   querySelector
         /*
            1) Do not mount Vue to <html> or <body> - mount to normal elements instead.
         */
     } ) 


 </script>

2.2.3 data methods {{}} 模板语法


<body>
    <div id="app">
        <!-- 这个app容器中可以使用data中的数据， -->
        {{ username }}
        <hr>
        {{ num }}
        <hr>
        {{ person }}
        <hr>
        {{ isChecked }}
        <hr>
        {{ persons }}
        <hr>
        {{ person.username }}
        <hr>

        <!-- 
            {{}} mustache语法  
            花括号中只可以写一行js表达式 。
            在花括号中不会出现if和for的
        -->
        <h2>  mustache语法   </h2>
        {{ 5 + 5 }}
        <hr>
        {{ tel }}
        <hr>
        {{ 'a' + 'b' + username }}
        <hr>
        {{ person.age >= 18 ? '成年': '呵呵 ' }}

        <hr>
        <!-- 函数调用也属于表达式 -->
        <!-- 说明可以在花中可以调用js内部的方法，那么也就意味着可以调用自己定义的方法 -->
        {{ tel.substring( 0,3 ) + '****' + tel.substring( 7 ) }}
        <hr>
        {{ getNum() }}
        <hr>
        {{ getChecked() }}
        <hr>
        {{ fn1() }}
    </div> 
    
    <hr>
    <!-- 放在外面和vue实例无任何关系 -->
    <!-- {{ num }} -->
</body>
<script src="vue.js"></script>
<script>

    function fn(){
        return '1234'
    }

    // 5 + 5

    // var a = 10
    // console.log( a );
    //t.substring( 0,3 ) + '****' + t.substring( 7 )

    // 'a' + 'b'

    new Vue({
        el: '#app',
        data:{ //vue实例所控制的容器中所需要的数据
            num:123,
            username:'张三',
            isChecked:true,
            person:{
                username:'李四',
                age:15
            },
            persons:[
                { username:'a' },
                { username:'b' }
            ],
            tel:'15811112222',//  15811112222 => 158****2222
        },
        methods:{
            //这里定义函数类型=》 方法
            getNum:function(){
                return 20
            },
            //推荐使用es6的简写写法的函数，回调使用箭头函数
            getChecked(){
                return true
            },
            // 为什么在methods中不定义箭头函数 ;因为在methods中定义箭头函数this不指向vue实例
            // fn1:()=>{
            //     console.log( this,'fn1----' );
            // }
            fn1(){
                // console.log( this,'fn1----' );

                //let _this = this
                // function fn2(){
                //     // console.log( this,'fn2' ); //window 
                //     //console.log( _this,'fn2' ); //vm 
                // }  
                
                let fn2 = ()=>{
                    console.log( this,'fn2' );
                }

                fn2() // window.fn2()

            }
        }
    })

</script>

2.4 指令

2.4.1 非表单元素绑定数据

v-text | v-html

指的是 div、p、ul、li，


<body>
    <div id="app">
      
        <!-- 
                <h2>非表单元素绑定数据 | v-text/v-html</h2>
                <h2>普通元素：div、p、ul、span</h2>
                <h2>指令：以元素自定义属性的方式存在的，以v-开头</h2>
                区别：
                v-text                      ==>                {{}}
                会把标签中的内容全部替换掉                     解析表达式
         -->
         <h3> 我的姓名叫: {{ username }} </h3>
         <h3 v-text=" '我的姓名叫:' + username"></h3>
         <h3 v-text=" '我的姓名叫:' + username">aaa</h3>  
         <div>
             {{ str }}
         </div>
         <div v-text="str"></div>

         <h2>v-html指令</h2>
         <div v-html="str"></div> 
        
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            username:'张三',
            str:'<h2>hello</h2>'
        }
    })
</script>

2.4.2 表单元素绑定数据

v-model。mvvm

M-model模型
V-view视图
VM-viewModel 视图模型
模型（model）通过了视图模型  决定了视图(view)
视图(view)  通过视图模型 修改模型 (model) 
视图模型是模型和视图之间的桥梁。

<body>
    <div id="app">

        {{ username }}
        <hr>
        <input v-model="username">
       <button @click="fn">点击我</button>
    </div>
</body>
<script src="vue.js"></script>
<script>

    /*
        input.oninput = function(){
            this.value 
        }
    */ 

    /*
        vun：
            核心的mvvm原理。
            数据驱动。数据变了影响视图的变化 
            m: model( 模型，data数据即可 )
            v: view ( 视图 )
            vm: 视图模型 （ vue.js ）
            vm.data.username
            vm.username
    */ 
    let vm = new Vue({
        el: '#app',
        data:{//data的数据在我们new Vue的时候，vue帮我们放到vm实例对象上
            username:'zs',
            age:20
        },
        
        methods:{//methods中的函数在我们new Vue的时候，vue帮我们放到vm实例对象上
            fn(){
                console.log(this,'fn')
                console.log(this === vm,'fn')
            }
        }
    })

    console.log( vm ,'vue的实例'); //data的数据在我们new Vue的时候，vue帮我们放到vm实例对象上
    // console.log( vm.username )
</script>

2.4.3 属性绑定-媒体元素

v-bind / :

<body>
    <div id="app">
        <!-- 
            v-bind:属性名="值"
            简写方式 :
         -->
        <div class="aa">绑定自带属性和自定义属性</div>
        <div v-bind:class=" clsName ">绑定自带属性和自定义属性</div>
        <div :class=" clsName ">:简写形式：绑定自带属性和自定义属性</div>
        <div :class=" clsName + 'cc' "  :c="'c1'">:简写形式：绑定自带属性和自定义属性</div>
        
        <hr>
        <h2>绑定属性场景</h2>

        <a :href="webSiteInfo.href" target="_blank" :title="webSiteInfo.name">
            <img :src="webSiteInfo.logo" alt="">
        </a>

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            clsName:'bb',
            webSiteInfo:{
                name:'京东',
                href:'https://www.jd.com',   //360buy.com
                logo:'https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png'
            }
        }
    })
</script>

2.4.4 事件绑定

v-on/@，以行间形式绑定事件


<body>
    <div id="app">
        <!-- 
            v-on:事件名="事件函数" ，函数写在methods中
            @事件名="事件函数" ，函数写在methods中
            不传递参数可以不加小括号
         -->
        <button v-on:click="clickMe1">点击我1</button>
        <button @click="clickMe1">点击我1</button>
         <hr>
         {{ username }}
         <hr>
        <button @click="changeName('鲁班')">改成-鲁班</button>
        <button @click="changeName('程咬金')">改成-程咬金</button>

    </div>
</body>
<script src="vue.js"></script>
<script>

    // changeName('鲁班')

    new Vue({
        el: '#app',
        data: {
            username:'赵云'
        },
        methods:{
            clickMe1(){
                console.log( 'clickme1',this );
            },
            changeName( username ){
                // console.log( username,'aaa' );
                this.username = username //改变了data模型中的username变量
            }
        }
    })
</script>

2.4.5 条件渲染


<body>
    <div id="app">

        <!-- 
            v-show="条件": 原理（ display:block/none ）  通过样式实现的，
            如果条件为真则标签显示，假则不显示
         -->

         <h2 v-show=" age >= 18 ">成年</h2>
         <h2 v-show=" age < 18 ">呵呵</h2>

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            age:15
        }
    })
</script>

v-if VS v-show


 <div id="app">

        <!-- 
            v-if="条件": 原理  
            如果条件为真则标签渲染到html中，假则不渲染在html中

            v-if/v-else

            v-if/v-else-if/v-else  : 在使用v-if、v-else-if 标签要紧挨着
         -->

         <h2 v-if=" age >= 18 ">成年</h2>
         <h2 v-if=" age < 18 ">呵呵</h2>


         <!-- 
             优良中

             90-100 优
             80-90 良
             70-80 中
             
          -->

          <div>
            <span v-if="score >=90 && score <=100">优</span>
            <span>----------------</span>
            <span v-if="score >=80 && score <90">良</span>
            <span v-if="score >=70 && score <80">中</span>
        </div>

        
        <div>
            <span v-if="score >=90 && score <=100">优</span>
            <span v-else-if="score >=80 && score <90">良</span>
            <span v-else-if="score >=70 && score <80">中</span>
            <span v-else>差</span>
        </div>

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            age:20,
            score:65
        }
    })
</script>

v-show之选项卡

v-if之购物车

<!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>v-if与v-show的应用场景</title>
</head>
<style>
    .box{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 2px  solid salmon;
    }
    button.active{
        background-color: red;
        color: white;
    }
</style>
<body>
    <div id="app">
        <h2>show: 应用在选项卡切换</h2>
        <button @click="changeIndex(0)" :class=" index == 0?'active':'' ">猪八戒技能切换</button>
        <button @click="changeIndex(3)" :class=" index == 3?'active':'' ">孙悟空技能切换</button>
        <button @click="changeIndex(2)" :class=" index == 2?'active':'' ">孙尚香技能切换</button>
        <button @click="changeIndex('abc')" :class=" index == 'abc'?'active':'' ">鲁班技能切换</button>
        <div v-show="index == 0" class="box">猪八戒信息-一些技能</div>
        <div v-show="index == 3" class="box">孙悟空信息-一些技能</div>
        <div  v-show="index == 2"  class="box">孙尚香信息-一些技能</div>
        <div  v-show="index == 'abc'"  class="box">鲁班信息-一些技能</div>



        <h2>打开这个页面，某些标签元素根据数据就决定了显示与否，后期不会频繁切换，用v-if、 购物车</h2>

        <div v-if="shops.length !== 0">
            要遍历shops的
        </div>

        <div v-if="shops.length == 0">
            空空如也~，一个小购物车空的图片
        </div>

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            index:0,//控制选项卡切换的索引变量
            shops:[
                '小米10',
                '华为mate40'
            ]
        },
        methods:{
            changeIndex(index){
                this.index = index
            }
        }
    })
</script>

</html>

2.4.6 循环与对比机制

v-for指令

循环

双重循环

<style>
    .box {
        border: 1px solid red;
        margin: 10px;
    }
</style>

<body>
    <div id="app">

        <!-- 
            v-for="(value,index) in 数组"   | value,index可以随意起，符合变量规范即可。 item
            v-for="value in 数组"
         -->

        <div class="box" v-for="item in persons">
            <!-- item: 当前的遍历项 {{item}} -->
            遍历项-- --- 姓名是：{{item.username}}
        </div>

        <div class="box" v-for="(item,index) in persons">
            <!-- item: 当前的遍历项 {{item}} -- index:下标 -->
            遍历项-- --- 姓名是：{{item.username}} ---{{ index }}
        </div>

        <h2>遍历对象</h2>
        <div>
            <span v-for="( value,key ) in person"> {{value}}___{{key}}
                <hr>
            </span>

        </div>

        <h2>二维数组的遍历</h2>
        <div v-for="(item1) in movies">
            电影名称：{{item1.name}}
            <hr>
            <hr>
            <hr>
            演员： <span v-for="item2 in item1.starts"> {{item2}}  /</span>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 遍历数组是重点
            persons: [
                { id: 'a0001', username: 'zs' },
                { id: 'a0003', username: 'ls' },
                { id: 'a0005', username: 'ww' },
            ],
            // 对象了解即可
            person: {
                id: 'a0007',
                username: '张三',
                age: 30
            },
            // 二维数组的遍历:掌握
            movies: [
                {
                    id: 'a0001',
                    name: '沙丘 Dune ',
                    starts: ["蒂莫西·柴勒梅德", "丽贝卡·弗格森", "奥斯卡·伊萨克", "戴夫·巴蒂斯塔"]
                },
                {
                    id: 'bsdf1',
                    name: '天书奇谭',
                    starts: ["丁建华", "毕克", "苏秀", "程晓桦", "施融"]
                }
            ]
        }
    })
</script>

对比机制|v-key

2.4.7 动态类名

class/style

style

2.4.8一次性绑定: 了解

v-once

三、面试题

1.对于Vue是一套渐进式框架的理解。

主张最少，需要什么就添加什么。比如UI框架。

2.请列出至少4个vue基本指令，并简要说明其作用。

v-on/v-text/v-html/v-for/v-if/v-bind/v-model

3.v-show与v-if 有什么区别?

4.说说你对SPA的理解，它的优缺点分别是什么？

SPA：单页面应用。
优点:
	用户体验好、快，内容的改变不需要重新加载整个 页面，避免了不必要的跳转和重复渲染;
	基于上面一点， SPA 相对对服务器压力小;前后端职责分离，架构清晰， 前端进行交互逻辑，后端负责数据处理;
缺点:
	初次加载耗时多:为实现单页 Web 应用功能及显 示效果，需要在加载页面的时候将 JavaScript、CSS 统一 加载，	部分页面按需加载;
	前进后退路由管理:由于单页 应用在一个页面中显示所有的内容，所以不能使用浏览器 的前进后退功能，所有的页面切换需要自己建立堆栈管理;
	SEO 难度较大:由于所有的内容都在一个页面中动态 替换显示，所以在 SEO 上其有着天然的弱势。

5.单页面（SPA）和多页面（MPA）的区别？—不用背

	单页面（SPA）	多页面（MPA）
刷新方式	页面局部刷新或更改	整页刷新
url 模式	a.com/#/pageone a.com/#/pagetwo	a.com/pageone.html a.com/pagetwo.html
用户体验	页面片段间的切换快，用户体验良好	页面切换加载缓慢，流畅度不够，用户体验比较差
转场动画	容易实现	无法实现
数据传递	容易	依赖 url传参、或者cookie 、localStorage等
搜索引擎优化(SEO)	需要单独方案、实现较为困难、不利于SEO检索，可利用服务器端渲染(SSR)优化	实现方法简易
适用范围	高要求的体验度、追求界面流畅的应用	适用于追求高度支持搜索引擎的应用
开发成本	较高，常需借助专业的框架	较低，但页面重复代码多
维护成本	相对容易	相对复杂

6.什么是MVVM模式？

M-model模型
V-view视图
VM-viewModel 视图模型
模型（model）通过了视图模型  决定了视图(view)
视图(view)  通过视图模型 修改模型 (model) 
视图模型是模型和视图之间的桥梁。

7.vue中 key 值的作用?

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认 用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移 动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个 元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

复习

onfocus onblur onchange oninput

ILove_bugs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 初体验

第1阶段：html css 。浮动、定位布局、mdeia（百分比）、响应式、flex、rem布局<tagname key="value"></tagname><tagname key="value" />selector{ key:value;}第2阶段：得保证嵌套标签要合理，逻辑思维，编程思维。声明变量、数据类型、运算符（算术、赋值、比较、逻辑、三目）、声明函数( 参数、this )、分支语句（ if,switch ），..
复制链接

扫一扫