Vue的基础语法（初学Vue）

最新推荐文章于 2024-07-12 19:47:55 发布

码农白衣

最新推荐文章于 2024-07-12 19:47:55 发布

阅读量1k

点赞数 21

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_73916603/article/details/137888175

版权

前端知识同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

目录

一、Vue介绍

2.关键特性和优势

二、Vue初体验

3.初体验-动态数据

4.初体验-列表数据

5.初体验-计数器

6.初体验计数器（高级）

7.原生实现计数器

8.options-data属性

9.options-methods属性

一、Vue介绍

1.概念

Vue.js（通常简称为 Vue）是一款流行的开源 JavaScript 前端框架，用于构建交互式的用户界面和单页面应用程序（SPA）。Vue 的设计灵感主要来自于 Angular 和 React，但它的核心库更小巧，易于上手，并且具有更快的渲染速度。

2.关键特性和优势

简单易用：Vue 的核心库非常轻量级，学习曲线较低，使得新手和有经验的开发者都能快速上手。
响应式数据绑定：Vue 使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新，开发者无需手动操作 DOM。
组件化开发：Vue 鼓励将页面拆分成多个组件，每个组件负责自己的一部分功能，便于复用和维护，同时提高了代码的可读性和可维护性。
虚拟 DOM：Vue 使用虚拟 DOM 技术来优化页面渲染性能，通过比较虚拟 DOM 的差异，只对需要更新的部分进行实际的 DOM 操作，从而提高了页面的渲染效率。
单文件组件：Vue 支持使用单文件组件（.vue 文件）来组织代码，将模板、样式和逻辑封装在同一个文件中，便于管理和维护。
生态系统丰富：Vue 生态系统庞大而丰富，拥有大量的第三方库和插件，可以满足各种需求，例如路由管理、状态管理、UI 组件库等。
灵活性：Vue 采用了渐进式的设计理念，可以逐步引入到现有项目中，也可以作为完整的前端解决方案使用。

二、Vue初体验

1.CDN引入

vue的CDNhttp://unpkg.com/vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈哈</h2>
    <p>我是内容，嚯嚯嚯</p>
    <div id="app"></div>
    <!--CDN引入-->
    <script src="http://unpkg.com/vue"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template: `<h2>Hellp World!</h2><span>呵呵呵</apan>`
        })
        // 挂载
        app.mount("#app")
    </script>
</body>
</html>

2.本地引入

首先将vue代码保存到本地

vue代码地址从这里获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template: `<h2>Hellp Vue!</h2><span>呵呵呵</apan>`
        })
        // 挂载
        app.mount("#app")
    </script>
</body>

</html>

3.初体验-动态数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //插值语法：{{title}}
            template:`<h2>{{message}}</h2>`,
            data:function(){
                return{
                    title:"Hello World",
                    message:"你好啊，Vue3"
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

4.初体验-列表数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //插值语法：{{title}}
            template: `
                <h2>电影列表</h2>
                <ul>
                    <li v-for = "item in movies">{{item}}</li>
                </ul>
            `,
            data: function () {
                return {
                    message: "你好啊，利银行",
                    movies: ["大话西游", "星际穿越", "到梦空间", "少年派", "飞驰人生", "侠岚"]
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

5.初体验-计数器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template: `
                <h1>当前计数：{{counter}}</h1>
                <button @click="increment">+1</button>
                <button @click="decrement">-1</button>
            `,
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

6.初体验计数器（高级）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

7.原生实现计数器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>当前计数：<span class="count"></span></h1>
    <button class="add">+1</button>
    <button class="sub">-1</button>
    <script>
        //1.获取dom
        const h1El = document.querySelector("h1")
        const countEl = document.querySelector(".count")
        const addBtnEl = document.querySelector(".add")
        const subBtnEl = document.querySelector(".sub")

        //2.定义一个变量记录数据
        let count = 100
        countEl.textContent = count
        //3.监听按钮点击
        addBtnEl.onclick = function () {
            count++
            countEl.textContent = count
        }
        subBtnEl.onclick = function () {
            count--
            countEl.textContent = count
        }
    </script>
</body>

</html>

8.options-data属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <button @click = "changeMessage">改变message</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data:function(){
                return{
                    message:"Hello Data"
                }
            },
            // methods : ootion api
            methods:{
                changeMessage:function(){
                    this.message = "Hello xjy"
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

9.options-methods属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return{
                    counter:0
                }
            },
            methods:{
                increment:function(){
                    this.counter++
                },
                decrement:function(){
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

关注

21
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue的基础语法（初学Vue）

Vue.js（通常简称为 Vue）是一款流行的开源 JavaScript 前端框架，用于构建交互式的用户界面和单页面应用程序（SPA）。Vue 的设计灵感主要来自于 Angular 和 React，但它的核心库更小巧，易于上手，并且具有更快的渲染速度。
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。