vue——VM对象和基础指令

哈哈ha~

已于 2022-12-11 23:47:02 修改

阅读量2.2k

点赞数 2

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

于 2022-08-29 19:19:29 首次发布

本文链接：https://blog.csdn.net/qq_56668869/article/details/126590028

版权

vue.js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、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.官方脚手架

npm i @vue/cli -g

vue create app

cd app

npm run serve

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>

显示结果：