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

一、Vue在前端重要性认识VueVue是一套用于构建用户界面的渐进式 JavaScript框架全称是Vue.js或Vuejs它基于标准HTML CSS和JavaScript构建,并提供了一套声明式组件化的编程模型;高效开发用户界面什么是渐进式框架?我们可以在项目中一点点来引入和使用Vue 而不一定需要全部使用Vue来开发整个项目

coderHing[专注前端]

2681人浏览 · 2022-10-20 10:01:40

coderHing[专注前端] · 2022-10-20 10:01:40 发布

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

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

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

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

一、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>

<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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^