欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-04 10:44:44
...

零基础学习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

相关标签： vue 零基础学习vue vue入门 vue引入

上一篇： Yii 快速，安全，专业的PHP框架_php基础

下一篇： css3过渡属性有几个

推荐阅读