简单创建一个Vue项目

最新推荐文章于 2025-07-11 10:14:09 发布

原创最新推荐文章于 2025-07-11 10:14:09 发布 · 1.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

什么是vue
Vue的核心理念
 为什么要学习Vue流行框架
 框架和库的区别
 MVC和MVVM
Vue.js的代码结构
 三种展示数据的方法
 属性绑定v-bind和事件绑定v-on

什么是vue

要创建一个Vue项目首先要了解什么是Vue。

目前前端有三大主流框架：Vue.js，Angular.js，React.js

Vue是用于构建用户界面的js渐进式框架，采用自底向上逐层应用增量开发的设计

Vue的核心理念

Vue的核心理念是：数据驱动视图，组件式开发

为什么要学习Vue流行框架

1、Vue是一种轻量级框架：只关注图层，是一个构建数据的视图集合
2、简单易学：Vue由国人开发，中文文档，易于理解和学习
3、数据、视图、结构分离：使得数据的更改更加简单
4、不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作
5、虚拟DOM：不在使用原生的DOM操作节点，极大的解放了DOM操作
6、运行速度更快：相比于React而言，view存在很大的优势

框架和库的区别

框架：
框架是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要更新架构整个项目。
库：
库提供了某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

MVC和MVVM

MVC

Mvc是一种设计模式，表示"Model-View-controller"，是后端的分层开发概念。

M是model层：用来处理数据，和数据库打交道

V是view层：用来展示数据，发送请求

C是调度层controller：用来接收数据，响应数据，返回数据

MVVM

MVVM 表示“Model-View-ViewModel”，是前端视图层的概念，主要关注于视图层分离
M是模型层model：用来处理逻辑关系。

V是视图层：用来展示数据。

VM是视图模型层view-model，用来连接view和model，承上启下的作用。

Vue.js的代码结构

1、引入Vue.js文件，可以通过线上链接引入，或者下载后本地引入

线上链接：
2、书写视图层
3、实例化Vue()

<html>
<head>
    <!-- 1. 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 书写视图层 -->
    <div id="app">
    </div>
</body>
<script>
    // 3. 实例化Vue()
    let vm = new Vue({
        el: "#app", // 控制区域
        data: { // 存放数据
            message: 'Hello Vue!' // 存放的数据
        },
        methods: { // 存放的方法
        }
    })
</script>

</html>

在这里插入图片描述

三种展示数据的方法

1、插值表达式{{}}

插值表达式可以展示内容，可以进行简单的运算

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
    	<!--展示数据-->
        {{message}}
        <!--进行简单的计算-->
        <p>页面中进行简单计算：18+2= {{age+2}}</p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '这是使用插值表达式所展示的内容',
            age: 18
        },
        methods: {}
    })
</script>
</html>

2、v-text和v-html

v-text：类似于js中innerText，将覆盖元素中所有现有的内容，不能解析富文本
v-html：类似于js中innerHTML，内容按普通 HTML 插入,可以解析富文本

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-text="message">被v-text覆盖掉的文字</div>
        <div v-text="content">被v-text覆盖掉的文字</div>
        <div v-html="message">被v-html覆盖掉的文字</div>
        <div v-html="content">被v-html覆盖掉的文字</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '要展示的内容',
            content: "<span>这是一段富文本</span>"
        },
        methods: {}
    })
</script>
</html>

在浏览器的展示效果如下
在这里插入图片描述

属性绑定v-bind和事件绑定v-on

v-bind

当元素的属性值要求为变量时，比如class属性、style属性、value属性、href属性等等，只要是属性，我们就可以使用v-bind来绑定。

v-bind:属性简写： :属性

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:value="message">
        // 简写
        <input type="text" :value="message">
        <img v-bind:src="link" alt="" width="300">
        // 简写
        <img :src="link" alt="" width="300">
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '输入框内展示的内容',
            link: 'https://lmg.jj20.com/up/allimg/1113/041620104229/200416104229-8-1200.jpg'
        },
        methods: {}
    })
</script>
</html>

浏览器显示效果
在这里插入图片描述

v-on

事件的绑定： v-on:事件类型简写： @事件类型

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="show">点击显示内容</button>
  			// 简写
        // <button @click="show">点击</button>
        <p v-text="message"></p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: ''
        },
        methods: {
            show() {
              // methods中拿到data中的数据 用this获取
                this.message = '点击按钮后页面中展示的文本内容'
            }
        }
    })
</script>
</html>