您的位置: 首页  >  IT文章  >  503 Vue.js安装，vue初体验

503 Vue.js安装，vue初体验

分类: IT文章 • 2022-05-11 22:23:56

Vue.js安装

使用一个框架，我们第一步要做什么呢？安装下载它
安装Vue的方式有很多：
方式一：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

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

~

方式二：下载和引入

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

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

~

方式三：NPM安装
后续通过webpack和CLI的使用，我们使用该方式。

vue初体验

01-Hello Vue

503 Vue.js安装，vue初体验

我们来做我们的第一个Vue程序，体验一下Vue的响应式

代码做了什么事情？

我们来阅读JavaScript代码，会发现创建了一个Vue对象。

（1）创建Vue对象的时候，传入了一些options：{}

（2）{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

（3）{}中包含了data属性：该属性中通常会存储一些数据

这些数据可以是我们直接定义出来的，比如像上面这样。

也可能是来自网络，从服务器加载的。

（4）浏览器执行代码的流程：

执行到10~13行代码显然出对应的HTML。

执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。

并且，目前我们的代码是可以做到响应式的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div >
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
    </div>

    <div>{{message}}</div>

    <script src="../js/vue.js"></script>
    <script>
        // let(变量)、const(常量)
        // 编程范式: 声明式编程 【范式：方式】
        const app = new Vue({
            el: '#app', // 用于挂载要管理的元素
            data: { // 定义数据
                message: '你好啊,李银河!',
                name: 'coderwhy'
            }
        })

    // 元素js的做法(编程范式: 命令式编程，第一、二、三步怎么做)
    // 1.创建div元素,设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在前面的div元素中显示
    // 4.修改message的数据: 今天天气不错!
    // 5.将修改后的数据再次替换到div元素
    </script>

</body>

</html>

02-vue列表展示

现在，我们来展示一个更加复杂的数据：数据列表。
比如我们现在从服务器请求过来一个列表
希望展示到HTML中。
HTML代码中，使用v-for指令
该指令我们后面会详细讲解，这里先学会使用。
是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且，更重要的是，它还是响应式的。
也就是说，当我们数组中的数据发生改变时，界面会自动改变。
依然让我们打开开发者模式的console，来试一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div >
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
            }
        })
    </script>

</body>

</html>

计数器

现在，我们来实现一个小的计数器
点击 + 计数器+1
点击 - 计数器 -1
这里，我们又要使用新的指令和属性了
新的属性：methods，该属性用于在Vue对象中定义方法。
新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
你可能会疑惑？
这些@click是什么东西？
Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么？
这些疑惑在后续学习中都会一一解开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div >
        <h2>当前计数: {{counter}}</h2>
        <!--<button v-on:click="counter++">+</button>-->
        <!--<button v-on:click="counter--;">-</button>-->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
        <!--下面是语法糖写法-->
        <!--<button @click="sub">-</button>-->
    </div>

    <script src="../js/vue.js"></script>
    <script>
        // 语法糖: 简写
        // proxy
        const obj = {
            counter: 0,
            message: 'abc'
        }

        new Vue()

        const app = new Vue({
            el: '#app',
            data: obj,
            methods: {
                add: function () {
                    console.log('add被执行');
                    this.counter++
                },
                sub: function () {
                    console.log('sub被执行');
                    this.counter--
                }
            },
            beforeCreate: function () {

            },
            created: function () {
                console.log('created');
            },
            mounted: function () {
                console.log('mounted');
            }
        })

    // 1.拿button元素
    // 2.添加监听事件
    </script>

</body>

</html>

相关推荐