牛客刷题——前端面试【七】谈一谈 Vue的指令、了解MVVM思想

简介: 通过以下了解 Vue的指令、了解MVVM思想。

目录

一、介绍


二、简单的指令学习


1.Vue的书写基本语法


2.v-clock解决


3.v-text填充不会出现出现闪动


4.v-html有风险,原则是永远不要用在客户提供的内容上


5.v-per 跳过编译直接显示


6.v-once 只能编译一次,提高性能


7.v-model 双向数据绑定


8.v-on 绑定事件,缩写用法(@)


9.v-bind绑定动态属性 缩写(:)


三、MVVM思想


前言


可以进一步的了解和学习,主要还需要下载文件,来进行代码的编译


安装文件地址:

安装 、Vue.js (vuejs.org)


一、介绍


Vue是渐进式框架

Vue 被设计为可以自底向上逐层应用

Vue 的核心库只关注视图层

当与"现代化的工具链" ,以及各种支持"类库" 结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。


二、简单的指令学习


1.Vue的书写基本语法

<div id="text">
        <div>{{msg}}</div>  <!--插值表达式,数据入的接收-->
    </div>
    <script src="./vue.js"></script><!--引入文件,通过在官网下载-->
    <script>
        let vm = new Vue({
            el:"#text",<!--告诉Vue填充到哪里-->
            data:{
                msg:'Hello Vue'<!--填充的数据-->
            }
        })
    </script>


2.v-clock解决

<style>
        [v-cloak]{
            display: none;  /*解决闪动问题*/
        }
    </style>
<div v-cloak>{{msg}}</div>



3.v-text填充不会出现出现闪动

<div v-text="msg"></div><!--填充,不会出现闪动-->



4.v-html有风险,原则是永远不要用在客户提供的内容上

<div v-html="msg1"></div> <!--有风险,第三方软件不推荐使用-->


5.v-per 跳过编译直接显示

<div v-pre>{{msg}}</div><!--跳过编译,直接显示-->



6.v-once 只能编译一次,提高性能

<div v-once>{{info}}</div><!--只会编译一次,不会二次编译,可以提高性能-->
2~6完整代码
    <style>
        [v-cloak]{
            display: none;  /*解决闪动问题*/
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div><!--填充,不会出现闪动-->
        <div v-html="msg1"></div> <!--有风险,第三方软件不推荐使用-->
        <div v-pre>{{msg}}</div><!--跳过编译,直接显示-->
        <div v-once>{{info}}</div><!--只会编译一次,不会二次编译,可以提高性能-->
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:'Hello Vue',
                msg1:'<h1>HTML</h1>',
                info:'good'
            }
        })
    </script>



7.v-model 双向数据绑定

<div id="text">
        <div>{{msg}}</div>
        <div><input type="text" v-model="msg"></div><!--双向数据绑定-->
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#text",
            data:{
                msg:'Hello Vue'
            }
        })
    </script>


8.v-on 绑定事件,缩写用法(@)

 

<div id="btn">
        <div>{{num}}</div>
        <div><button v-on:click="num++">点击</button></div>
        <div><button @click="num++">点击</button></div><!--缩写-->
        <div><input type="button" v-on:click="num++" value="点击"></div>
        <div><input type="button" @click="num++" value="点击"></div><!--缩写-->
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#btn", 
            data:{
                num:0
            }
        })
    </script>

9.v-bind绑定动态属性 缩写(:)

<div id="app">
        <span v-bind:title="content">小不人她,知制落极。</span><br>
        <span :title="content">小不人她,知制落极。</span> <!--缩写-->
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    content:`加载于${new Date().toLocaleString()}`
                } 
            }
        })
    </script>


三、MVVM思想


M(model)数据

V(view)DOM

VM(View-Model) 控制逻辑

核心思想:

把不同的业务代码放到不同的模块中,再通过特定的逻辑组织到一块。双向绑定的方式,从试图到模型用事件监听,从模型到试图用的是数据绑定。

image.png



相关文章
|
4天前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
22 8
|
4天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
9 1
|
4天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
10 0
|
4天前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
12 6
|
12天前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
12天前
|
移动开发 前端开发 JavaScript
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
|
14天前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
110 0
|
12天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
14天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
45 1
|
14天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0