Vue入门体验

不情不愿

已于 2022-04-14 11:35:30 修改

阅读量468

点赞数 3

分类专栏： Vue学习文章标签： javascript vue.js 前端

于 2022-04-13 11:27:58 首次发布

本文链接：https://blog.csdn.net/A____t/article/details/124140950

版权

Vue学习专栏收录该内容

36 篇文章 12 订阅

订阅专栏

Vue官方网站：Vue.js (vuejs.org)

渐进式的JavaScript框架意味着可以将Vue嵌入到你应用中的一部分，带来丰富交互体验。

Vue的特点及高级功能：

解耦视图和数据
可复用组件
前端路由技术
状态管理
虚拟DOM

Vue.js的安装：

方式一：CDN引入方式

//开发环境版本，包含了有帮助的命令行警告，一般用于开发
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
//生产环境版本，优化了尺寸和速度，一般用于发布
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/vue.js"></script>

方式二：下载引入

开发环境： https://cn.vuejs.org/js/vue.js

生产环境：https://cn.vuejs.org/js/vue.min.js

方式三：NPM安装

通过webpack和CLI使用该方式：npm install vue

Vue的简单使用：

进入官方网站，选择开发版本，右键选择“将链接另存为”，可以下载vue.js文件。

在VSCode中创建html文档，输入！回车自动生成html5模板，然后引入下载的vue.js

<!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>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <ul>
      <li v-for = "item in movies">{{item}}</li>
    </ul>
    <h2>当前计数：{{counter}}</h2>
    <button @click ="add">+</button>
    <button @click ="sub">-</button>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    //let(变量)/const(常量):变量可以重新赋值，常量后续不进行改变
    //编程范式：声明式编程
   const app = new Vue({
     el:'#app',//用于挂载要管理的元素
     data:{ //定义数据
      message:'你好，Vue！',
      movies:['钢铁侠','绿巨人','美国队长','雷神','复仇者联盟'],
      counter:0
     },
     methods:{
       add(){
         this.counter++;
         console.log("add()被执行！");
       },
       sub(){
        this.counter--;
         console.log("sub()被执行！");
       }
     }
    })
  </script>
</body>
</html>