Vue入门

本文介绍Vue.js框架的基础知识,包括MVVM模式的概念、如何使用Vue.js进行页面渲染,以及条件和循环的基本用法。适合对前端开发有一定了解的读者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

声明

在您阅读这篇文章之前,笔者假设您熟悉html、css和javascript知识。

认识Vue

MVVM

MVVM是目前流行的前端开发模式。MVVM是Model-View-ViewModel的缩写,第一个字母M表示表示模型,第二个字母V表示视图,最后两个字母VM表示视图模型,这三部分的具体含义如下:

  • 模型负责封装数据
  • 视图表示UI(用户交互界面)
  • 视图模型负责模型和视图之间的转换和适配

MVVM的核心思想模型驱动视图,也就是说数据改变界面即改变,开发者需要界面发生变化只需改变数据即可达到目的,而无需直接进行dom操作。目前流行的基于MVVM模式javascript框架主要有angularjs、react和Vue。

什么是Vue

Vue是一个以MVVM模式为思想基础的数据驱动式Javascript框架,Vue实际上主要提供了MVVM模式中VM部分,即实现通过数据渲染界面和界面对数据的反馈。下面通过例子认识Vue。

初步使用Vue

获得Vue

从https://cdn.jsdelivr.net/npm/vue下载vue,下载文件名改为vue.js

建立项目

项目文件结构如下图:
在这里插入图片描述
页面demo_01.html代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue实例一</title>
    </head>

    <body>

        <!-- 在body标签结束前,引入vue.js  -->
        <script type="text/javascript" src="js/vue.js" ></script>
    </body>

</html>

Vue对象创建以及页面标签与Vue对象的关联

Vue对象负责渲染与之关联的页面标签,因此基于vue的开发,需要在页面写一个标签,一般为div(也可以是除body外的任何其它标签),并给该标签设置一个id,然后编写javascript代码创建Vue对象并通过id选择器与标签关联。

代码示例:

	<body>

        <!-- 该div与Vue对象关联 -->
        <div id="app"></div>

        <!-- 在body标签结束前,引入vue.js  -->
        <script type="text/javascript" src="js/vue.js" ></script>

        <script type="text/javascript">
            
            /*
            	创建Vue对象与id为app的标签关联,并负责渲染生成该标签视图展示;
            	Vue对象的构造参数是一个对象,该参数可描述Vue对象的数据和方法等。
            */
            let vm = new Vue({
                el:'#app'
            });
        
        </script>
    </body>

声明式渲染

  • Vue对象的构造参数中,使用data属性定义数据,在页面上使用模板语法将数据渲染为一个dom的文本节点。

    <div id="app">
    	<!--这里将显示Vue对象中定义的info属性的值。-->
        {{info}}
    </div>
    
    let vm = new Vue({
    	el:'#app',
        data:{
             info:'大家好!', //为Vue对象定义属性info
        }
    });
    
  • Vue对象的构造参数中,在页面上使用v-bind指令将数据渲染为一个dom元素的属性值。

    <div id="app">
       <div v-bind:title="info" >鼠标悬浮停留,会看到一个提示信息</div>
       <!-- v-bind指令可以简写如下 -->
       <div :title="info" >鼠标悬浮停留,会看到一个提示信息</div>
    </div>
    
    let vm = new Vue({
    	el:'#app',
        data:{
             info:'大家好!', //为Vue对象定义属性info
        }
    });
    

条件和循环

  • 使用 v-if 和 v-else 指令可以实现依据条件渲染

    <div id="app">
        <button v-if="visibled" >按钮一</button>            
        <button v-else >按钮二</button>
    </div>
    
    let vm = new Vue({
        el:'#app',
        data:{
             visibled:true
         }
    });
    
  • 使用v-for指令可以实现循环渲染

    <div id="app" style="display:flex;flex-direction:row;flex-wrap:wrap;">
        <div v-for="stu in stuList" 
            style="width:240px;height:100px;border:1px solid #DDDDDD;border-radius:5px; box-shadow: 1px 1px 5px 0px #DDDDDD;
            margin:10px;padding:10px;color:#555555;display:flex;flex-direction:row;flex-wrap:wrap;align-content: flex-start;">
    
            <div style="box-sizing:border-box;height:50px;line-height:50px;width:200px;">学号:{{stu.stuId}}</div>
            <div style="box-sizing:border-box;height:50px;line-height:50px;width:120px;">姓名:{{stu.stuName}}</div>
            <div style="box-sizing:border-box;height:50px;line-height:50px;width:120px;">性别:{{stu.stuSex}}</div>
    
        </div>
    </div>
    
    let vm = new Vue({
       el:'#app',
       data:{
           stuList:[
               {stuId:'S00001',stuName:'小王',stuSex:'男'},
               {stuId:'S00002',stuName:'小李',stuSex:'女'},
               {stuId:'S00003',stuName:'小刘',stuSex:'女'},
               {stuId:'S00004',stuName:'小张',stuSex:'男'},
               {stuId:'S00005',stuName:'小赵',stuSex:'女'}                        
           ]
       }
    });
    
### Vue.js 入门教程 #### 安装与引入 Vue.js 为了开始使用 Vue.js,在开发环境中可以采用如下方式来加载 Vue 的开发版本,该版本包含了有助于调试的命令行警告: ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 对于生产环境,则推荐使用精简过的生产版以减少文件大小和优化性能[^1]。 #### 创建第一个 Vue 应用程序 创建一个简单的 Vue 实例通常涉及以下几个部分:导入 Vue 和其他必要的模块、配置组件以及挂载到 DOM 上。下面是一个基本的例子展示如何设置一个新的 Vue 应用程序实例并将其渲染至页面上的特定 HTML 元素内: ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 这段代码首先通过 `import` 导入了所需的库和自定义组件 (`App`) 及路由配置(`router`);接着利用这些资源初始化了一个新的 Vue 实例,并定了它应该呈现的内容(即 `render` 函数返回的结果)。最后调用了 `$mount()` 方法定要附加此应用程序的具体位置——在这个例子中是 ID 为 `#app` 的元素[^2]。 #### 数据绑定基础 Vue 提供了一种非常直观的方式来管理视图中的动态数据。可以通过在 JavaScript 中定义对象属性作为响应式的源数据,然后轻松地将它们链接到模板内的表达式或令上。这里有一个更具体的案例说明怎样做: ```html <div id="root"> {{ message }} </div> <script type="text/javascript"> const vm = new Vue({ el: '#root', data: { message: 'Hello Vue!' } }); // 或者也可以显式调用 mount 方法 // vm.$mount('#root') </script> ``` 在此示例里,当浏览器解析上述脚本时,会在页面上显示字符串 `"Hello Vue!"` 。这是因为我们已经把变量 `message` 绑定到了 `<div>` 标签内部的位置,每当这个值发生变化的时候,相应的文本也会自动更新[^3]。 #### 总结 以上就是关于 Vue.js 基础入门的一些核心概念和技术要点。希望这能帮助理解如何快速搭建起基于 Vue 技术栈的应用项目框架结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值