Vue入门

最新推荐文章于 2022-09-30 11:05:47 发布

原创最新推荐文章于 2022-09-30 11:05:47 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript #vue #前端

vue 同时被 3 个专栏收录

8 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

本文介绍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:'女'}                        
       ]
   }
});