vue指令

最新推荐文章于 2025-12-12 23:13:46 发布

原创最新推荐文章于 2025-12-12 23:13:46 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#中间件 #前端 #ajax

Vue

vue初探

官网

https://cn.vuejs.org/

介绍

vue是渐进式 JavaScript 框架

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

优点

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

企业要求要会、效率高、做出的活儿好。

缺点

1.Vue 底层基于 Object.defineProperty 实现数据响应式，而这个 api 本身不支持 IE8 及以下浏 览器，所以Vue不支持IE8及其以下浏览器；
2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)； single page application
	以前是每一个显示的页面都应该有一个html才能设置不同的title、description、keywords
3.由于 CSR的先天不足，导致首屏加载时间长，有可能会出现闪屏。
	client side render: 客户端渲染

核心

数据驱动 组件系统

MVVM

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

         input元素值变的同时其它地方跟着变 
         oninput = function(){
             ...code
         }
         我们vue是如何实现这种功能的，底层就是使用的mvvm设计模式实现的。
         m: model 模型（理解我们的data数据）
         v: views 视图（html网页：标签和css）
         vm: viewModel: 视图模型，其实就是vue框架

         数据驱动：数据的变化会影响视图的改变，视图的改变也会影响数据的。

SPA

single page application 单页面应用

用到的技术栈：Vue + 现成的组件库

优点：加载快，用户体验好（像在用app一样）
缺点：不利于SEO,首屏加载时间长
a页面—>index.html/#/a
b页面—>index.html/#/b
vue页面应用 的路径后面根据 锚点的不同来进行设计的。因为锚点是前端用的（比如：点击某个链接跳转到当前页面的某个地方）

MPA

多页面应用:mutilple page application

js + jquery

优点：有利于SEO
缺点：会有白屏，用户体验不好
a页面—>a.html
b页面—>b.html

vue流程

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

安装

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

引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vue.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>

 <div id="aaa">
        <input type="text" placeholder="价格" v-model="price">
        <hr>
        <input type="text" placeholder="数量" v-model="num">
        <hr>
        <p>总价：{{ price * num }}</p>
    </div>

    <!-- 
        第1种方式：cdn安装
     -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <!-- 
        第2种方式：使用npm下载
        npm i vue
     -->
     <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //我们需要实例化一个vue
        new Vue({
            el:'#aaa',
            data:{
                price:30,
                num:2
            }
        })
    </script>

vue实例

el

<script src="vue.js"></script>
<body>
    <!--  vue要控制的容器，一般用id -->
     <div class="box" id="app">
        <!-- vue的mustche语法，可以写js语法，但是只能写一行，所以也就不会出现分号 -->
        {{  2+2  }}
    </div>
 <script>
        //实例化一个vue对象
        new Vue( {
            //虽然有多个类名相同，但也会作用第1个。往往使用id。而id经常起名 app
            //不能挂载（mount）到body和html上。
            //Do not mount Vue to <html> or <body> - mount to normal elements instead.
            el:'#app',//也可以写document.querySelector('#app') vue控制的容器  
        } )
    </script>

data methods mounted

data初始化数据。对象
methods方法写在这里，注意不用箭头函数，因为无this。对象
mounted是一个Vue里有这个方法。函数

<div id="app">
        <!-- 只能写一行js代码表达式 -->
        {{ num }} --- {{ name }}
        {{ fn2() }}
    </div>
    
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            dats:{
                //作用的容器中所需要的数据
                num:10,
                name:'zs'
            },
            methods:{ //所有vue方法写在这里。
                fn2(){
                    // console.log(this,'fn2调用了')
                    return 123
                },
                fn3:()=>{ //在methods中定义的函数，不要用箭头函数
                    console.log(this,'fn3调用了')
                },
                b(){
                    log(1);
                }
            },
              mounted: function() { //自动触发写入的函数
                b();
            }
        })

    </script>

{{}} 模板语法

模板既可以调用methods中的方法，那么也可以调用js的内置方法。
不解析变量中标签。

<div id="app">
        <!-- 既可以调用methods中的方法，那么也可以调用js的内置方法 -->
       {{  'abc'.toUpperCase()  }}
       <hr>
       {{fn()}}
        <!-- 如果你的变量中有标签形式的字符串，不解析标签 -->
        {{ htmlStr }}
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                tel:'15311112222',
                age:10,
                htmlStr:'<em>从数据中拿到数据</em>'
            },
            methods:{ 
                fn(){
                  '15811112222'.substring(0,3) + '****' + '15811112222'.substring(7)
                }
            }
        })
    </script>

指令

指令都是绑定在标签上，以属性的形式进行绑定
在使用指令的时候，里面也可以书写js表达式，但是注意符合js语法

元素绑定数据

v-text会把标签中的内容给替换掉
{{}}和v-text解析一致
v-html解析标签

<div id="app">
         <div>{{name}}  --- 普通的html内容</div>
         <!-- v-text会把标签中的给替换掉 -->
         <div v-text=" name "></div>
         <div v-text=" name "> 我是div中的内容 </div>

         <!-- 在使用指令的时候，里面也可以书写js表达式，但是注意符合js语法 -->
         <div v-text=" name + 'hello' ">  </div>
         <!-- 变量中是什么，v-text解析后就显示什么 ，{{}}和v-text解析一致 -->
         <div v-text=" htmlStr ">  </div>

         <!-- v-html,解析标签，其它特点和v-text一模一样 -->
         <div v-html="htmlStr"></div>
         <!-- 
             {{}} : 不会替换标签中的原内容 -- 网速慢的话体验不好
             v-text：会替换标签中的原内容-- 网速慢的话不会展示乱七八糟的东西
             v-html：解析标签
          -->
    </div>
     <script src="vue.js"></script> 
    <script>
        new Vue({
            el: '#app',
            data: {
                name:'zs',
                htmlStr:'<em>从数据中拿到数据</em>'
            },
            methods: {
            }
        })
    </script>

表单元素绑定数据

v-model会获取value值并绑定变量或数组。

<div id="app">
        <input type="text" v-model="username">
        {{ username }}
    </div>
    <script src="vue.js"></script>

    <script>
       let vm = new Vue({
            el: '#app',
            data: {
                username:'zs'
            },
            methods: {
            }
        })
       vm.username = 'ls'
    </script>

属性绑定

v-bind:/ :

 <div id="app">
        <!-- v-bind: -->
        <img v-bind:src="imgSrc" width="200">
        <hr>
        <!-- v-bind简写: -->
        <img :src="imgSrc" width="200">
		<div a="1" b="2" :aaa="cid">绑定自定义属性</div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
               imgSrc:'https://img1.baidu.com/it/u=3303981320,1355171730&fm=26&fmt=auto',
          webSiteInfo:{
logo:'https://img10.360buyimg.com/img/jfs/t1/160510/16/25709/36032/616cea7eEd14780cc/43b0d9ed8c9e9ab0.png',
           name:'京东',
           url:'https://www.jd.com'
                },
           cid:'xxxx-xxxx-xxxx'
            },
            methods: {
            }
        })
    </script>

事件绑定

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

<div id="app">
<!--  v-on:click="函数名"/ @click="函数名"，本质上是事件触发然后执行函数中的代码块 -->
        <button v-on:click="clickMe1">点击我</button>
        <button v-on:click="clickMe1()">点击我</button>
        <button @click="clickMe1">点击我</button>

        <button @click="changeUserName">点击我换成关羽</button>

<!--如果传参则 v-on:click="函数名( 参数1,参数2,... )"/ @click="函数名( 参数1,参数2,... )"-->
        <button @click="changeUserName1('张飞',20)">点击我换成张飞</button>
        用户名为：{{username}}

    </div>
    <script src="vue.js"></script>
    <script>
        //以前用原生js及jquery绑定基本上都是script标签内选择元素然后进行绑定
        // 绑定、事件对象、冒泡、默认行为、捕获.... 表单的事件、键盘事件
        new Vue({
            el: '#app',
            data: {
                username:'黄忠'
            },
            methods: {
                clickMe1(){
                    console.log( '点击了我1' )
                },
                changeUserName(){
                    // console.log( this,'vue实例对象' )
                    this.username = '关羽'
                },
                changeUserName1(uname,age){
                    //console.log('改变username的值',uname,age)
                    this.username = uname
                }
            }
        })
    </script>

条件渲染

 <div id="app">
            <!-- 
                选择性的显示与隐藏，有点类似我们的选项卡效果
                v-if:条件成立，标签会在页面上创建并渲染显示,如果不成立，则页面上不会有此标签的
                v-show:条件成立，标签会在页面上创建并渲染显示，如果不成立，会创建：display:none

                什么时候用v-if或v-show？
             -->
            <h2>v-if演示</h2>
            <div v-if="age>=18">成年</div>
            <div>-----------------------------</div>
            <div v-if="age<18">呵呵</div>
            
            <!-- 
                v-if如果和v-else一起使用，那么中间不要其它标签
             -->
             <div v-if="age>=18">成年</div>
            <div v-else>呵呵</div>  


            <!-- 
                v-if  v-else-if  v-else.
             -->

             <div v-if="score<100 && score>=90">你要上天啊</div>
             <div v-else-if="score<90 && score>=80">你要逆天啊</div>
             <div v-else>你要造火箭吗？</div>


             <h2>v-show演示</h2>
            <div v-show="age>=18">成年</div>
            <div>-----------------------------</div>
            <div v-show="age<18">呵呵</div> 
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                age:20,
                score:70
            },
            methods: {
            }
        })
    </script>

v-if VS v-show

<div id="app">
            <!-- 
                频繁切换用v-show：它不会频繁创建和删除标签（ 会影响性能 ），用的是样式实现的。
                打开页面就决定是否显示，则可以用v-if： 购物车可以用
             -->
          <button @click="openOrOff">打开or关闭1</button>

          <!--  如果事件中只有一句话，可以直接写行间中 -->
          <button @click="flag = !flag">打开or关闭2</button>
          <!--  <div v-if="flag">开关灯</div> -->
          <div v-show="flag">开关灯</div>  
    </div>
    <script src="vue.js"></script>
    <script>

        // let flag = false
        // flag = !flag

        new Vue({
            el: '#app',
            data: {
               flag:true
            },
            methods: {
                openOrOff(){
                    this.flag = !this.flag
                }
            }
        })
    </script>

循环

 <div id="app">
        <!-- 
                掌握遍历数组即可。
                v-for="值 in 数组"
                v-for="(值,下标) in 数组"
                value/item   index/i
             -->
        <h2>遍历数组</h2>
        <!-- 1. v-for="值 in 数组" -->
        <div v-for="value in persons"> 姓名为： {{value}} </div>
    
        <!-- 2. v-for="(值,下标) in 数组" -->
        <div v-for="(item,index) in persons"> 姓名为： {{item}}----下标为：{{index}} </div>

        <h2>遍历对象</h2>
        <div v-for="value in userInfo">{{ value }}</div>
        <div v-for="(value,key) in userInfo">{{ value }}---{{key}}</div>
        <!-- 遍历数组套对象 -->
         <ul id="list">
             <li v-for="item in products">
                 <img :src="item.imgSrc" alt="">
                 <p>标题：{{item.title}}</p>
                 <p>价格：{{item.price}}</p>
             </li>
         </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                persons: [
                    '张飞',
                    '赵云',
                    '刘备'
                ],
                userInfo: {
                    username: '关羽',
                    skill: '温酒斩华雄',
                },
                products: [
                    {
                        id: 'a0001',
                        title: '8+256G学生小米华为通',
                        price: 599,
                        imgSrc: 'https://'
                    },
                    {
                        id: 'a1100',
                        title: '通8GB+128GB',
                        price: 1099,
                        imgSrc: 'https://
                    }
                ]
            },
            methods: {
            }
        })
    </script>

双重循环

 <div id="app">
            <div class="box" v-for="item in movies">
                电影名称：{{item.name}}
                <hr>
                主演：
                <em v-for="(people,index) in item.starts">
                    {{people}}   
                    <span v-if="index != item.starts.length-1">/</span> 
                </em> 
            </div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                movies:[
                    { 
                        id:'a0001',
                        name:'沙丘 Dune ',
                        starts:[ "丽贝卡·弗格森" , "奥斯卡·伊萨克" , "戴夫·巴蒂斯塔"  ]
                    },
                    {
                        id:'bsdf1',
                        name:'天书奇谭',
                        starts:["丁建华" , "毕克" , "苏秀" , "程晓桦" , "施融"]
                    }
                ]
            },
            methods: {
            }
        })
    </script>

对比机制

v-key

为什么vue渲染速度快，就是因为一套对比机制，而这个对比机制就少不了v-key的作用。

动态类名

class

<body>
    <div id="app">
            <!-- 1. 变量名 -->
            <div :class="classNam1">变量名</div>

            <!-- 2. 三目运算的表示法 -->
            <div :class=" flag1 ? 'bg2':'bg1' " >三目运算的表示法</div>

            <!-- 3. 建议套个数组，这样可以操作多个表达式 -->
            <div :class="[ flag1 ? 'bg2':'bg1',flag1 ? 'co2':'co1' ]" >三目运算的表示法</div>

            <!-- 4.对象的写法 -->
            <div :class="{bg1:true,co1:true}">对象的写法</div>

            <!-- 5. 最后的补充 ，:class和class同时存在-->
            <div class="bg1" :class="flag1 ? 'co2':'co1' ">:class和class同时存在</div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                classNam1:'bg1',
                flag1:true
            },
            methods: {
            }
        })
    </script>
</body>

</html>

style

 <div id="app">
        <div :style="{background:'blue',fontSize:'70px'}">aaaa</div>
        <div :style="{background:'blue','font-size':'70px'}">aaaa</div>
        <div :style=" style1 ">aaaa</div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                style1:{background:'blue','font-size':'70px'}
            },
            methods: {
            }
        })
    </script>

一次性绑定

v-once

 <input type="text" name="" id="" v-model="username">
        <div>{{username}}</div>
        <div v-once>{{username}}</div>

优化

一般情况下不要将v-for和v-if一起使用, 因为v-for的优先级高于v-if：指的是不要放在一个标签上
如使用v-if则写在模板标签，使用模板标签包裹v-for标签 template(模板标签,不会被浏览器所解析)
v-cloak 指令：配合css样式优化我们的闪屏。

购物车案例

案例：

<style>
 [v-cloak]{
            display: none;
        }
</style>
<div id="app" v-cloak>
<template v-if="shoppingProducts.length > 0" >
    <tr v-for="(item,index) in shoppingProducts">
        <td><input type="checkbox" v-model="item.isChecked"></td>
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
        <td>
            <img width="70" :src="item.img"
                 alt="">
        </td>
        <td>{{item.price1}}</td>
        <td>
            <button @click="minus( index )">-</button>
            {{item.shoppingnum}}
            <button @click="item.shoppingnum++">+</button>
        </td>
        <td>{{item.price1 * item.shoppingnum}}</td>
        <td><button>删除</button></td>
    </tr>
    </template>
    <tr v-else>
        <td colspan="8">空空如也</td>
    </tr>
</div>

面试题

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

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

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。

错误

模板语法 {{ }}，只写一行代码

不要挂载到body和html上

data和methods要写对。

methods的方法不要写箭头函数。