Vue.js入门（vue.js安装、入门小程序、MVVM）

最新推荐文章于 2023-02-21 22:11:12 发布

技术蜗牛-阿春

最新推荐文章于 2023-02-21 22:11:12 发布

阅读量634

点赞数 2

分类专栏： ➤VUE.js 文章标签： vue.js安装 vue.js入门 MVVM模型 vue.js数据传递

本文链接：https://blog.csdn.net/whc888666/article/details/106489515

版权

➤VUE.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是vue.js？

vue是前端的一套构建用户界面的渐进式框架

什么是渐进式框架？

渐进式框架：就是可以将vue作为应用的一部分嵌入其中

为什么需要学习vue.js？

通过尽可能简单的API实现响应的数据绑定和组合的视图组件

如何安装vue.js？

1、直接CDN引入

2、下载和引入

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

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

3、npm安装

$ npm install vue

如何用vue实现一个小功能？

实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--dom元素APP-->

<div id="APP">

    <h2>{{message}}</h2>

</div>

<!--引入vue.js依赖文件-->

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

<script>

    < !--创建vue对象-->

  let APP = new Vue({

    /*vue和dom元素建立关联（将vue对象挂载到dom元素上）*/

    el: '#APP',

    /*存储数据*/

    data: {

      message: 'HelloVue!'

    }

  });

</script>

</body>

</html>

计数器代码实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h2>当前计数：{{counter}}</h2>

    <button @click="add">+</button>

    <button @click="sub">-</button>

</div>

<!1.--引入vue.js依赖文件-->

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

<script>

let app = new Vue({

  //vue实例和dom元素绑定

  el: '#app',

  data: {

    counter: 0

  },

  methods: {

    add () {

      this.counter++

    },

    sub () {

      this.counter--

    }

  }

});

</script>

</body>

</html>