当前位置: 首页 > news >正文

vue——VM对象和基础指令

一、VUE

简介:

  • Vue.js是前端的主流框架之一,和Angular.js、React.js并称为前端三大主流框架。
  • 是一款用于构建用户界面的 JavaScript 框架。
  • Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计
  • 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助用户高效地开发用户界面。
  • 是个很多js工具代码的js文件。

Vue.js 的特点:

  • 数据驱动
  • Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
  • Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标

  • 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

前端三大主流框架: 

vue.js 数据驱动和组件化开发,轻量级,分层渐进式框架
React.js 数据驱动和组件化开发,灵活性很高,需要什么都得自己构建逻辑自己写
Angular.js 数据驱动 1.0 ,加上了组件化开发2.0,重量级框架;大型企业OA办公(指令系统

引入方式:

第一类:

        1.本地js文件引入

        2.CDN引入

        3.webpack 打包

        4.编辑器生成(HBuilder)

第二类:(vue脚手架 需要加载器转码再引入到网页中)

        1.自己打包配置加载器(自己构建vue脚手架)

        2.官方脚手架

        3.可视化项目管理方式 vue ui

        4.编辑器直接生成脚手架环境的方式(HBuilder)

 包的版本管理

示例版本:7.18.6   已更新到12.3.8

"~7.18.6"  :直接下载最新版 即12.3.8

"^7.18.6"   :下载7-版本号的最新版   如 7.20.8(7开头的版本中的最新版)

"7.18.6"     :下载固定版本 即7.18.6  不能升级

二、VM对象

let vm = new Vue({
      el: "#app", 
      data: {

      }
})

 意义:

  • vm为new Vue构造函数创建的对象 
  • el:element 选择元素,填选择器
  • data:data对象里面的是数据源
  • data的属性值与vm对象的属性值一样是因为把data的属性也设置到vm上

三、插值表达式

{{js表达式}}

  • 在标签尖括号中使用{{}}插入js表达式(变量,函数调用,三目运算等)
  • 插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名
  • {{js表达式}}外不是js的环境  直接显示内容

<div id="app">
<!-- {{msg1}}这个插值表达式写在h2这个标签中 msg1这个标识符是data中的msg1属性  -->
    <h2>{{msg1}}</h2>
    <h2>{{msg1+"这一句是js表达式(拼接)"}}</h2>
    <h3>{{obj.name}}:{{obj.age}}</h3>
    <h4>现在学的是:{{arr[0]}}</h4>
</div>

  <script>
    let vm = new Vue({
      el: "#app", 
      data: {
        msg1: "hello",
        obj: {
          age: 21,
          name: "haha",
        },
        arr: ["vue", "react"],
      }
    })
  </script>

 显示结果:

四、文本指令

  •  v-html ==>相当于innerHTML
  •  v-text==>相当于innerText
  • v-pre==>静默-跳过编译 :插件表达式直接被识别为文本,而不是js表达式
  • v-cloak==>有属性的标签相当于在构建虚拟节点的时候就会有这个属性:

          当data的数据生成时,该标签会自动去掉属性

          可以利用这个特性在css中把某个元素在加载初期写成隐藏样式

 <div class="app1" v-cloak>
    <div v-text="msg2"></div>
    <div v-html="msg3"></div>
    <div v-pre>{{msg4}}</div>
    <span v-html>{{msg5}}</span>
    <br><br>
    <div v-text="info.name"></div>
    <div v-html="info.snum"></div>
    <br><br>
  </div>

  <script>
    new Vue({
      el: ".app1",
      data: {
        msg2: "<h2>v-text :底层是innerText</h2>",
        msg3: "<h2>v-html :底层是innerHTML</h2>",
        msg4: "跳过编译 (静默) 原样显示内容{{msg4}}",
        msg5:"上一内容是 跳过编译(静默) 所以原样显示内容{{msg4}}",
        info: {
          name: "xixi",
          snum:"H5220301",
        },
      }
    })
  </script>

 显示结果:

 面试题:

vue第一次加载的时候 页面上的数据会闪烁:

   界面加载的时候会把节点直接挂载到文档树中,导致{{js表达式}}这个字符串会显示一下

   vue对象生成data数据时会再次刷新界面 把{{js表达式}}字符串替换成结果字符串

   所以界面第一次加载的时候会闪屏

解决办法:

 1.添加一个属性选择器:v-cloak 在vue框架运行时 会把项目中的v-cloak属性去掉

     css中 :[v-cloak]{display:none}  

     div中添加属性选择器 运行vue前锁住代码   运行时解锁代码

 2.$mount挂载

 3.尽量使用指令(v-html,v-text)渲染页面

五:属性绑定

  • 所有标签的属性都可以绑定
  • 标准写法:   v-bind:src=""     v-bind:value=""
  • 简写形式:   :src=""               :value=""
<div class="app2">
    <img v-bind:src="obj.tx">
    <div v-text="obj.name"></div>
    <h3 v-html="week[0]"></h3>
    <a v-bind:href="baidu[0].source">{{baidu[0].site}}</a>
    <a v-bind:href="baidu[0].source" v-html="baidu[0].site"></a><br>
    <input type="text" v-bind:value="email"><br>
    <input type="text" :value="email">
  </div>
  <script>
    new Vue({
      el: ".app2",
      data: {
        obj: {
          name: "dog",
          age: 1,
          tx: "https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"
        },
        week: ["Monday", "Friday"],
        baidu: [{
          source: "http://www.baidu.com",
          site: "百度"
        }],
        email: "123@qq.com",
      }
    })
  </script>

显示结果:

相关文章:

  • 手把手带你刷好题(牛客刷题②)
  • 【web-攻击用户】(9.7.1)本地隐私攻击:持久性cookie、缓存Web内容、浏览历史记录、Flash本地共享对象……
  • Linux shell 内建命令
  • 计算机网络 --- TCP与UDP协议
  • Redis缓存的连环炮面试题
  • 9月17日 杭州站 | Serverless Developer Meetup 开启报名
  • django+django-haystack+Whoosh(后期切换引擎为Elasticsearch+ik)+Jieba+mysql
  • 【020】基于Springboot+Vue的学生成绩教务管理系统(含教师、学生、管理员身份)含源码、数据库、运行教程
  • 基于KubeEdge的边缘节点分组管理设计与实现
  • Docker(精简版)
  • 猿创征文|Apache ShenYu网关插件介绍
  • 全志V853开发板开发进阶——GPADC
  • 表单(非常非常重要)
  • 【JavaScript】一文了解JS的闭包
  • 2022前端vue面试题
  • [笔记] php常见简单功能及函数
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • Docker: 容器互访的三种方式
  • Java 内存分配及垃圾回收机制初探
  • laravel 用artisan创建自己的模板
  • MySQL主从复制读写分离及奇怪的问题
  • Otto开发初探——微服务依赖管理新利器
  • SegmentFault 2015 Top Rank
  • Tornado学习笔记(1)
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 动态魔术使用DBMS_SQL
  • 聊聊flink的TableFactory
  • 如何进阶一名有竞争力的程序员?
  • 如何选择开源的机器学习框架?
  • 突破自己的技术思维
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • #DBA杂记1
  • #Spring-boot高级
  • #vue3 实现前端下载excel文件模板功能
  • (0)Nginx 功能特性
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (差分)胡桃爱原石
  • (三)模仿学习-Action数据的模仿
  • (一)spring cloud微服务分布式云架构 - Spring Cloud简介
  • (原创) cocos2dx使用Curl连接网络(客户端)
  • (转) 深度模型优化性能 调参
  • .Net core 6.0 升8.0
  • .NET Core 实现 Redis 批量查询指定格式的Key
  • .net 无限分类
  • .NET 中各种混淆(Obfuscation)的含义、原理、实际效果和不同级别的差异(使用 SmartAssembly)
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换
  • @synthesize和@dynamic分别有什么作用?
  • [ vulhub漏洞复现篇 ] Apache Flink目录遍历(CVE-2020-17519)
  • [ 常用工具篇 ] POC-bomber 漏洞检测工具安装及使用详解
  • [ 数据结构 - C++] AVL树原理及实现