Vue.js | Vue.js开发 初体验

🖥️ Vue.js专栏：Vue.js 初级知识 Vue.js开发 初体验
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、Vue在前端重要性

认识Vue

二、引入Vue的方式

如何使用Vue?

方式一:CDN引入

方式二:下载和引入

三、Vue案例初体验

四、命令和声明式编程

声明式 和 命令式

MVVM模型

五、Vue的options

data属性(掌握)

methods属性

问题一:不能使用箭头函数?

问题二:this到底指向什么?

---

一、Vue在前端重要性

认识Vue

Vue是一套用于 构建用户界面的渐进式 JavaScript框架

全称是Vue.js或Vuejs

它基于标准HTML CSS和JavaScript构建,并提供了一套声明式 组件化的编程模型;

高效开发用户界面

什么是渐进式框架?

我们可以在项目中一点点来引入和使用Vue 而不一定需要全部使用Vue来开发整个项目

二、引入Vue的方式

如何使用Vue?

Vue的本质就是一个Js库

安装和使用Vue这个Js库有哪些方式呢?

一:在页面中通过CDN的方式来引入;

二:下载Vue的Js文件,并且自己手动引入;

三:通过npm包管理工具安装使用它

四:直接通过Vue CLI创建项目 并且使用它

方式一:CDN引入

Vue的CDN引入:

JavaScript <script src="https://unpkg.com/vue@next"></script>

JavaScript 案例 <h2>哈哈哈</h2> <p>我是内容,哈哈哈哈</p> <div id="app"></div> <!-- CDN地址 --> <script src="https://unpkg.com/vue@next"></script> <script>     // 使用Vue     const app = Vue.createApp({         template: `<h2>Hello World</h2><span>哈哈哈哈哈</span>`     })     // mount挂载s     app.mount('#app') </script>

方式二:下载和引入

下载Vue的源码 直接打开CDN的链接:

打开链接 复制其中的代码

创建一个新文件 如vue.js 将代码复制进去;

通过script标签 引入刚才的文件

JavaScript <script src="./lib/vue.js"></script>

你好,Vue3 案例实现:

JavaScript <div id="app"></div> <!-- 本地引入 --> <script src="./lib/vue.js"></script> <script>     // 1 创建app     const app = Vue.createApp({         template: `<h1>你好 Vue3</h1>`     })     // 2 挂载app     app.mount('#app') </script>

三、Vue案例初体验

Vue初体验

案例一: 体验动态展示Hello World数据

案例二:展示列表的数据

案例三:计算机功能实现

JavaScript <div id="app">     <h2>{{title}}</h2>     <h2>电影列表</h2>     <ul>         <li v-for="item in movies">{{item}}</li>      </ul>  </div>

JavaScript <script src="./lib/vue.js"></script> const app = Vue.createApp({     data() {         return {             title:"Hello Vue",             movies:["大话西游","盗梦空间","星际穿越"]         }     } }) app.mount("#app")

案例三:计算机功能实现

JavaScript <div id="app"></div> <script src="./lib/vue.js"></script> <script>     const app = Vue.createApp({         template: `             <h2>当前计数:{{counter}}</h2>             <button @click="increment">+1</button>             <button @click="decrement">-1</button>         `,         data: function () {             return {                 counter: 0             }         },         methods: {             increment: function () {                 console.log("+1被点击了")                 this.counter++             },             decrement: function () {                 console.log("-1被点击了")                 this.counter--             }         }     })     app.mount('#app') </script>

四、命令和声明式编程

声明式 和 命令式

原生开发和Vue开发的模式和特点 发现是完全不同的,涉及到了两种不同的编程方式:

命令式编程和声明式编程

命令式编程关注的是 "how to do" 自己完成整个how的过程

声明式编程关注的是 "what to do" 由框架完成how的过程

在原生的实现过程中 我们是如何操作的?

我们每完成一个操作,都需要通过JavaScirpt编写一条代码,来给浏览器一个指令

这样的编写代码的过程 叫 命令式编程

早期的原生JS和JQ开发过程中 我们都是通过这种命令式的方式在编写代码.

在Vue的实现过程中,我们如何操作呢?

会在createApp传入的对象中声明需要的内容,模版template 数据data 方法methods

这样的编写代码的过程 叫做 声明式编程

目前 Vue React Angular 小程序的编程模式 称之为 声明式编程

MVVM模型

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

MVC是在前期被使用非常多的框架的架构模式 如 IOS 前端

MCCM是目前最流行的架构模式

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

Vue官方也说明,虽然并没有完全遵守MVVM的模型,但是整个设计是受它的启发

五、Vue的options

data属性(掌握)

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

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

在Vue3的时候,必须传入一个函数,否则就会直接在浏览器中报错

data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或访问 都会在劫持中处理

我们在template或者app中 通过 {{counter}}访问 counter 可以从对象中获取到数据

我们修改counter值时 app中的{{counter}}也会发生改变

methods属性

methods属性是一个对象 通常我们会在这个对象中定义很多的方法,

这些方法可以绑定到 模版中

我们可以使用this关键字来直接访问到data中返回的对象属性

不使用箭头函数的情况下,this到底指向的是什么?

问题一:不能使用箭头函数?

我们在methods中要使用data返回对象中的数据:

那么这个this是必须有的值,并且应该可以通过this获取到data返回对象中的数据

那么我们这个this能不能是window呢

不可以是window 因为window中我们无法获取到data返回对象中的数据

但是如果我们使用 箭头函数 那么这根this就会是window了

为什么是window呢?

这里涉及到箭头函数使用this的查找规则,它会在 自己的上层作用域中查找this

最终刚好找到的是script作用域中的this 所以就是window

问题二:this到底指向什么?

事实上Vue的源码当中就是对methods中的所有函数进行了遍历,并且通过bind绑定了this