Vue3的使用

纯荔枝ikun
150 阅读4分钟

Vue的本质,就是一个JavaScript的库

刚开始的使用我们不需要把它想象的非常的复杂

我们就把它理解成一个已经帮助我们封装好的的库

image.png

方式一:CDN方式引入

image.png

image.png

一般情况下都是使用云服务器做我们的服务器 (阿里 or 腾讯)

CDN 就是找到距离用户最近的服务器来进行网络的传递

在CDN 中是一个边缘的节点,会现在子节点

image.png

相互连接的服务器进行一个分发的过程,这个就是一个服务器的节点

image.png

就是通过项目里面会进行一个引用的下载

在官方的网站中也是可以使用的

我们可以在官方网站中找到不通过构建工具 npm 就可以使用的方法

CDN 服务器引用方式

先定义一个对象,在里面有一个参数

template(模板)

后面可以可以跟一个参数,想要渲染的内容

通过Vue.createAPP 这样的一个方法来生成一个新的对象

通过对象的mount方法来进行元素的挂载

底层通过 domcument 库来进行元素的增删

通过指令来进行对程序的操作

我们还可以进行一个简单的操作

Vue.createAPP({
 template:'<h2>你好啊,李银河!!!!'
).mount('app')

通过这样的一种方式来进行下载的操作

Vue2.x

通过new Vue({})的方式进行元素的挂载与渲染

我们以后编写的代码都离不开这样的几个东西的

template (模板)

data(数据)

methods(方法)

<!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>Document</title>
</head>
<body>
  <!-- 确认挂载点 -->
  <div id="app">
    
  </div>
  <!-- 原生的实现非常的简单 -->
  <!-- 通过CDN进行文件的引入 -->
  <script src="https://unpkg.com/vue@3"></script>

  <!-- 通过Vue.createAPP 来进行对象的创建 -->
  <script>
    Vue.createApp({
      template:`
      <div>{{count}}</div>
      <button @click="getButtonOne()">+1</button>
      <button @click="getButtonTwo()">-1</button>
      `,
      data:function()
      {
        return {
          count:100
        }
      },
      methods:{
        getButtonOne()
        {
          this.count ++;
        },
        getButtonTwo()
        {
          this.count --;
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

这里还有props 和 一些函数声明周期,这里都会说到

对于计数器的实现
1 第一种是通过原生的方式来进行实现

2 第二种是通过Vue3.x的方式来进行实现

在这里我们就对比原生 和 Vue的实现的方式是不同的

(1) 声明了数据 data

(2) 声明了方法 methods

(3) 对于模板里面的数据进行了一个绑定

{{插值}}

这里就是对于界面的一种分离

编程的方式是完全的不一样

声明式 和 命令式

命令式编程 和 声明式编程

命令式编程是 how to da

声明式编程是 what to do

我们只要在里面进行改变就可以了

这里具体是怎么做的,是通过框架来完成的

MVVM 模型

MVC 和 MVVM都是一种软件体系结构

MVC 是Model 数据 Vue 框架 - Controller(触发器) 经典的框架

MVVM 是Model - view - viewMode 简称是目前最流行的框架

将这里的东西进行一个分解的操作

domcument.querSelector() 来进行元素的选取

document.addEvenListener 来进行元素的监听操作

View 视图

Model 数据

通常情况下,我们称Vue是一个MVVM的框架

Vue虽然并没有完全遵守MVVM的模型

image.png

view 是一个dom树

这里是一个虚拟的dom树 -> 转变成真实的dom树

view - > DOM树

document.createElement() 创建元素的操作也是有的,将template视图

放在里面

Vue里面分成这样的一个东西

Vue把这里的细节进行了一个绑定

Vue就是将model里面的数据渲染到view上面

这里的@click 绑定到元素上面使用

MVC 和 MVVM 这样的一种架构的区别

template属性

这里引用了这样的内容

需要写在Vue的内容里面

我们想要引用这样的一个数据就需要在Vue声明的里面

解析里面这样的内容

template 表示Vue帮助我们渲染的信息

可以看到它的里面有很多的HTML标签,这些标签会替换掉我们里面挂载的元素,原生使用的是innerHTML

模板中有一些奇怪的语法,比如{{}},比如@click 这些都是模板中特有的语法

template 中的写法

image.png

会将里面的内容进行一个解析的操作

template 不会被浏览器渲染,就是在javascript去使用的

MDN 这里是有一个说明的

浏览器在加载的时候会知道template这样的东西存在

但是浏览器不会被渲染的

<!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>Document</title>
</head>
<body>
  <div id="li">

  </div>
  <!--使用的模板 -->
  <template id="app">
    <div>{{count}}</div>
    <div>{{listen}}</div>
    <div @click="getButtonListen">听到的声音{{music}}</div>
  </template>
  <!-- 通過CDN的方式導入 -->
  <script src="https://unpkg.com/vue@3">

  </script>

  <script>
    Vue.createApp({
      template:'#app',
      data()
      {
        return {
          count:0,
          listen:2,
          music:'你好,李焕英'
        }
      },
      methods:{
        getButtonListen()
        {
          this.music = 'hhh'
        }
      }
    }).mount('#li')
  </script>
</body>
</html>

image.png

将里面的'你好,李焕英' 转换成 hhh

更多的使用的是template的这样一种格式

data属性

data属性是传入一个函数,并且该函数需要返回一个对象

在Vue2.x的时候,也可以传入一个对象(虽然官方推荐的是一个函数)

对象会让两个Vue实例的值相同,同一个分配空间,当一个Vue实例里面的值发生改变的时候,另外的一个Vue的实例也会发生改变 所以Vue3.x的时候禁止使用对象而是一个函数

image.png

会直接在浏览器中会进行报错的操作

image.png

data 中返回的对象会被Vue的响应式系统劫持,之后对于数据的修改或者是获取都会受到限制,限制代码的修改

avatar
文章
阅读
粉丝