Vue的基础语法（初学Vue）

码农白衣2024-04-18 6:05

目录

一、Vue介绍

1.概念

2.关键特性和优势

二、Vue初体验

1.CDN引入

2.本地引入

3.初体验-动态数据

4.初体验-列表数据

5.初体验-计数器

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

7.原生实现计数器

8.options-data属性

9.options-methods属性

一、Vue介绍

1.概念

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

2.关键特性和优势

  1. 简单易用：Vue 的核心库非常轻量级，学习曲线较低，使得新手和有经验的开发者都能快速上手。

  2. 响应式数据绑定：Vue 使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新，开发者无需手动操作 DOM。

  3. 组件化开发：Vue 鼓励将页面拆分成多个组件，每个组件负责自己的一部分功能，便于复用和维护，同时提高了代码的可读性和可维护性。

  4. 虚拟 DOM：Vue 使用虚拟 DOM 技术来优化页面渲染性能，通过比较虚拟 DOM 的差异，只对需要更新的部分进行实际的 DOM 操作，从而提高了页面的渲染效率。

  5. 单文件组件：Vue 支持使用单文件组件（.vue 文件）来组织代码，将模板、样式和逻辑封装在同一个文件中，便于管理和维护。

  6. 生态系统丰富：Vue 生态系统庞大而丰富，拥有大量的第三方库和插件，可以满足各种需求，例如路由管理、状态管理、UI 组件库等。

  7. 灵活性：Vue 采用了渐进式的设计理念，可以逐步引入到现有项目中，也可以作为完整的前端解决方案使用。

二、Vue初体验

1.CDN引入

vue的CDNhttp://unpkg.com/vue

html 复制代码 
<!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代码地址从这里获取

html 复制代码 
<!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.初体验-动态数据

html 复制代码 
<!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.初体验-列表数据

html 复制代码 
<!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.初体验-计数器

html 复制代码 
<!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.初体验计数器（高级）

html 复制代码 
<!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.原生实现计数器

html 复制代码 
<!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属性

html 复制代码 
<!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属性

html 复制代码 
<!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>
相关推荐
拾光拾趣录10 分钟前
🔥FormData+Ajax组合拳，居然现在还用这种原始方式？💥
前端·面试
不会笑的卡哇伊19 分钟前
新手必看！帮你踩坑h5的微信生态~
前端·javascript
bysking20 分钟前
【28 - 记住上一个页面tab】实现一个记住用户上次点击的tab，上次搜索过的数据 bysking
前端·javascript
Dream耀22 分钟前
跨域问题解析：从同源策略到JSONP与CORS
前端·javascript
前端布鲁伊23 分钟前
【前端高频面试题】面试官： localhost 和 127.0.0.1有什么区别
前端
HANK23 分钟前
Electron + Vue3 桌面应用开发实战指南
前端·vue.js
胤祥矢量商铺37 分钟前
菜鸟笔记007 [...c(e), ...d(i)]数组的新用法
c语言·开发语言·javascript·笔记·illustrator插件
極光未晚39 分钟前
Vue 前端高效分包指南：从 “卡成 PPT” 到 “丝滑如德芙” 的蜕变
前端·vue.js·性能优化
郝亚军42 分钟前
炫酷圆形按钮调色器
前端·javascript·css
Spider_Man44 分钟前
别再用Express了！用Node.js原生HTTP模块装逼的正确姿势
前端·http·node.js
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03UV安装并设置国内源04ChatGPT 5发布日期揭秘：2025年8月上线，多模态推理能力全面升级05OpenAI重返开源！GPT-OSS本地部署完全指南06KGG转MP3工具|非KGM文件|解密音频07如何在 Cursor 中继续使用 Claude08Cursor 终端“卡死/无响应”问题的解法09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10Claude Code 效率实战指南：从入门到精通的实用技巧（附安装教程）