零基础学习vue：第1课 vue的安装与使用

最新推荐文章于 2024-04-29 04:19:57 发布

舜岳

最新推荐文章于 2024-04-29 04:19:57 发布

阅读量373

点赞数

分类专栏： vue 文章标签： vue 零基础学习vue vue入门 vue引入

本文链接：https://blog.csdn.net/qq_41614928/article/details/88845420

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习vue：第1课 vue的安装与使用

1. vue的引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue的引入方法</title>
  <!-- 在html内此处引入vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

2.vue的安装：
在用 Vue 构建大型应用时才推荐使用 NPM 安装,平常使用我们可以直接引入vue的script文件即可

$ npm install vue

vue的基本操作：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 给标签定义vue </title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!-- 获取的元素 -->
  <div id="app">
  </div>
  
  <script>
    new Vue({
      el:"#app",  //获取元素 也可以通过className来获取
      data:{},    //data内存放vue的变量
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  </script>
  
</body>
</html>

vue的数据显示：

使用双大括号“ {{}} ”的形式可以输出 Vue内data定义的变量

<body>
  <!-- 获取的元素 -->
  <div id="app">
    姓名：{{xm}} 性别：{{age}} 年龄: {{age}} 
  </div>

  <script>
    new Vue({
      el:"#app",  //获取元素
      data:{      //data内存放vue的变量
        xm:"小明",
        sex:"男",
        age:"18"
      },    
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  </script>

</body>

上面运行结果入下图显示：

姓名：小明性别：18 年龄: 18

{{ }}内也能运行一些js代码:
如：{{}}内放自执行函数

  <!-- 获取的元素 -->
  <div id="app">
    {{ (function(){return "姓名：小明"})() }}
  </div>

运行结果如下：

姓名：小明

如一些js方法:

<div id="app">
    {{ [1,2,3,4].toString() }}
  </div>

运行结果如下：

1,2,3,4

舜岳

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
零基础学习vue：第1课 vue的安装与使用

零基础学习vue 第1课 vue的安装与使用
复制链接

扫一扫

专栏目录

零基础学习vue： 第1课 vue的安装与使用

零基础学习vue： 第1课 vue的安装与使用

1. vue的引入：

vue的基本操作：

vue的数据显示：

零基础学习vue：第1课 vue的安装与使用

零基础学习vue：第1课 vue的安装与使用