Vue3学习之路--初识Vue(一)

「已注销」

已于 2022-09-20 00:14:56 修改

阅读量460

点赞数 29

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

于 2022-09-19 22:43:31 首次发布

本文链接：https://blog.csdn.net/m0_62602850/article/details/126943704

版权

前端专栏收录该内容

18 篇文章 18 订阅

订阅专栏

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引入:

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

案例
<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标签引入刚才的文件

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

你好,Vue3 案例实现:

<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数据

案例二:展示列表的数据

案例三:计算机功能实现

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

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

案例三:计算机功能实现

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