一篇文章带你了解网页框架——Vue简单入门

这篇文章将会介绍我们前端入门级别的框架——Vue的简单使用

如果你以后想从事后端程序员，又想要稍微了解前端框架知识，那么这篇文章或许可以给你带来帮助

温馨提醒：在学习该文章前，请先学习HTML，CSS，JavaScript，Ajax等前端知识

Vue基础

首先，我们从官方文档中可以得到下述描述：

• Vue是一套用于构建用户界面的渐进式框架。
• Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
• 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

其中我们需要格外注意的是：

• Vue只负责前端页面的设计，并不能完全实现前端的所有功能

Vue主要特点：

• 采用JavaScript框架

• 简化Dom操作

• 响应式数据驱动

VsCode插件推荐

在正式开始介绍Vue之前，我想向大家安利一个VsCode插件——Live Server

Live Server 插件可以同步代码和网页的更新：

• 当你保存代码时，你的页面将会同步进行刷新，省略了手动点击页面的步骤，在开发中提供便利

Vue代码框架

首先我们需要学会Vue的基本使用

1. 导入相关包

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

1. 基本框架使用

html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础title>
head>
 
<body>
    
    
  <div id="app">
      
    {
  { message }}
  div>
    
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    
    
  <script>
      
    var app = new Vue({
        
      el:"#app",
        
      data:{
          
        message:" 你好 小黑! "
      }
    })
  script>
body>
 
html>

EL挂载点介绍

学习过Vue的基本使用后，我们先对EL挂载点做出最基本的介绍：

• EL挂载点负责设置页面中属性与Vue属性的连接
• EL挂载点设置后，页面属性可以调用Vue中的数据（data）和方法（method）

EL挂载点注意点：

• Vue的作用范围在EL挂载点的本体元素以及后代元素中
• Vue的EL挂载点可以依赖于各种选择器，例如类选择器等，但推荐使用ID选择器
• Vue的EL挂载点不可以作用在HTML和BODY两个页面最大元素上

我们给出简单示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>el:挂载点</title>
</head>
 
<body id="body">
    <!--这里的{
  { message }}不会有所显示，因为未与Vue连接--> 
  {
  { message }}
  <h2 id="app" class="app">
      <!-- 这里的{
  { message }}会显示，因为属于Vue连接本体--> 
    {
  { message }}
      <!-- 这里的{
  { message }}会显示，因为属于Vue连接后代元素-->
    <span> {
  { message }} </span>
  </h2>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      // 以下均可使用，
      // el:"#app",
      // el:".app",
      // el:"div",
        
      // body无法连接
      el:"#body",
      data:{
        message:"秋落"
      }
    })
  </script>
</body>
 
</html>

Data数据对象介绍

学习过Vue的基本使用后，我们对Data做出最基本的介绍：

• Data用于存储页面元素中使用的各类属性
• 属性可以包括各种类型，例如文本，数组等复杂类型
• 渲染复杂类型数据时，遵循JavaScript的语法基本都可以使用

我们给出简单示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data:数据对象</title>
</head>
 
<body>
    <div id="app">
        <!--使用{
  {}}调用data数据-->
        {
  { message }}
        <!--对象采用.来调用内部元素-->
        <h2> {
  { school.name }} {
  { school.mobile }}</h2>
        <ul>
            <!--数组采用[index]来选择内部元素-->
            <li>{
  { campus[0] }}</li>
            <li>{
  { campus[3] }}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好!",
                school:{
                    name:"河南师范大学",
                    mobile:"0373-3325000"
                },
                campus:["东校区","西校区","新乡校区","平原湖校区"]
            }
        })
    </script>
</body>
 
</html>

Vue本地应用

在介绍了Vue的基本使用后，我们针对Vue内部的各种属性方法来做出一一介绍

每条属性或方法我们都会给出解释和相关案例

v-text

文本解释：

v-text：设置标签的文本值

代码解释：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令</title>
</head>
 
<body>
    <div id="app">
        <!--我们采用v-text来设置标签内文本，注意会覆盖掉内部文本，“深圳”将不再显示-->
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'!'">深圳</h2>
        <!--另一种文本书写方式{
  {}}-->
        <h2>{
  { message +'!'}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"河南师范大学",
                info:"软件学院"
            }
        })
    </script>
</body>
 
</html>

v-html

文本解释：

v-html：以html的格式来设置标签的文本值

代码解释：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令</title>
</head>
 
<body>
    <!--v-html:设置元素的innerHTML-->
    
    <!--采用v-html后显示的是河南师范大学的加粗版，但采用v-text后显示的是<strong>河南师范大学</strong>-->
    <div id="app" v-html="context">
    	
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"河南师范大学"
            }
        })
    </script>
</body>
 
</html>

v-on

文本解释：

v-on：为元素绑定事件，可以采用@代替

代码解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!--v-on：后面跟事件名 用于绑定事件 可以用@代替 后面用methods中的方法即可-->
        <input type="button" value="点击" v-on:click="doIt">
        <input type="button" value="点击" @click="doIt">
    </div>
    
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(){
                    alert("河南师范大学");
                }
            }
        })
    </script>
</body>
</html>

v-show

文本解释：

v-show：根据表达值的真假，切换元素的显示和隐藏（隐藏后源代码仍存在）

代码解释：

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width