暑期Vue学习笔记（一）

最新推荐文章于 2024-08-14 15:45:18 发布

Firmamento

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量115

点赞数 1

分类专栏：学习笔记文章标签： vue javascript html

本文链接：https://blog.csdn.net/ghosp/article/details/119103482

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、Vue的引入方式
二、基本语法
- 1）数据域的基本格式
- 2)Mustache语法
三、小实例（计数器）
总结

前言

Vue框架是当前前端比较热门的框架之一，而且较简单易学，因此我将用一段时间来学习并记录Vue框架的学习情况。
本文将主要介绍一些Vue的简单引入方式以及基本语法，后续也将完善其他相关的知识，并给出一些小实例来说明。

一、Vue的引入方式

Vue的引入方式有很多种，但作为一个新手使用者，我是用的是去Vue.js的官网下载Vue.js的源码
官网地址如下：https://cn.vuejs.org/v2/guide/
在这里插入图片描述我是用的是开发版本，下载后将Vue.js文件拖入项目的目录中，如下所示，如下是IDEA编译器版本：

然后在通过代码引入：

<script src="../js/vue.js"></script>

这样便完成了Vue.js文件的导入，可以开始使用了。

二、基本语法

1）数据域的基本格式

数据的基本格式如下（部分）:

<script>
  const test = new Vue({
      el:'#app',         //要挂载要管理的元素id
      data:{             //data用于存入基本的数据信息，用逗号分隔
        name:'tom',
        grade:88,
        message:'Hello'
      },
      methods: {
		printHello:function(){ //methods用于保存要使用的各种方法
		  console.log('Hello!')
    }
  })
</script>

2)Mustache语法

使用Mustache语法来获取数据域中的内容，基本格式为双大括号{{内容}}
接下来是HTML代码部分：

<div id="app">   <!--id用于Vue的el挂载时使用-->
  {{message}}
  <br>
  嘿！
  {{name +' '+ name}}   <!--字符串可以拼接-->
  <br>
  你的得分为：
  {{grade+1}}   <!--数值可以进行加减乘除操作-->
</div>

运行效果如下：
在这里插入图片描述

上述案例中全部的源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">   <!--id用于Vue的el挂载时使用-->
  {{message}}
  <br>
  嘿！
  {{name +' '+ name}}   <!--字符串可以拼接-->
  <br>
  你的得分为：
  {{grade+1}}   <!--数值可以进行加减乘除操作-->
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',         //用于挂载要管理的元素
      data:{
        name:'tom',
        grade:88,
        message:'Hello!'
      }
  })
</script>
</body>
</html>

三、小实例（计数器）

通过学习了Vue的基本语法，我们可以用一个小实例来总结学习成果：
需求：通过两个按钮来实现数字的加减，从0开始
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>

<div id="app">
  当前计数:{{num}}
  <br>

  <!--  方法一  -->
  <!--  <button v-on:click="num++">+</button>
  <!- <button v-on:click="num&#45;&#45;">-</button>-->
  <!--这种方法不使用methods中的方法-->

  <!-- 方法二-->
  <button @click="add">+</button>              <!-- 两种写法@click /v-on:click=“...” -->
  <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({                  //可以有多个参数（el，data，methods）等等
      el:'#app',
      data:{
        num:0
      },
      methods:{
        add:function (){
          console.log('Success add!');
          this.num++;                      //this可以获取到本定义的变量
        },
        sub:function (){
          console.log('Success sub!');
          this.num--;
        }
      }
    })
</script>
</body>
</html>

说明：上述代码中使用到了Vue的一个常用指令：v-on：click=‘方法名’(可以简写为@click=‘方法名’)，为基本的按钮绑定指令，有点类似于基本前端的onclick，后面将更详细地介绍Vue的基本指令，本文不做过多解释。

总结

本文了主要介绍Vue.js的引入以及Mustache语法的使用
基本格式如下：

<script>
    const test = new Vue({                  
      el:'',       //要挂载元素的id（要加#）
      data:{       //存入相关数据
      
      },
      methods:{    //相关方法
       
      }
    })
</script>

要展示的数据：

{{数据}}

这样便可以完成前端数据的展示。

Firmamento

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
暑期Vue学习笔记（一）

暑期Vue学习笔记（一）文章目录前言一、Vue的引入方式二、基本语法1）数据域的基本格式2)Mustache语法三、小实例（计数器）总结前言Vue框架是当前前端比较热门的框架之一，而且较简单易学，因此我将用一段时间来学习并记录Vue框架的学习情况。本文将主要介绍一些Vue的简单引入方式以及基本语法，后续也将完善其他相关的知识，并给出一些小实例来说明。一、Vue的引入方式Vue的引入方式有很多种，但作为一个新手使用者，我是用的是去Vue.js的官网下载Vue.js的源码官网地址如下：https
复制链接

扫一扫