Vue.js安装和三个操作小案列_vuejs案例下载-CSDN博客

本文链接：https://blog.csdn.net/LvBing23/article/details/106800801

Vue.js安装

1 安装Vue

1.方式一：直接CDN引入

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

2.下载和引入

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

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

3. NPM安装

通过webpack和CLI使用的时候，我们使用该方式

Vue案例

Hello Vuejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
   
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{message}}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        // let(ES6中用来定义变量)   const（ES6中定义常亮的） 
        // 在ES6中不用var var有三个缺陷
        // 1 var定义的变量没有块作用域
        // 2 var定义的全局变量会自动添加全局window对象的属性
        // 3 var定义的变量会提前装载。
        //   编程范式，声明式编程
        const app = new Vue({
            el : '#app',  //用于要挂载要管理的元素
            data : {    //定义数据
            name:'Hello',
                message : 'Vuejs'
            }
        })
    </script>
</body>
</html>

1 el属性

该属性决定了这个Vue对象挂载到哪一个元素上，上面，我们挂载到了id为app的元素上

2 data属性

该属性通常会存储一些数据

1 这些数据可以是我们自己定义出来的

2 这些数据也可以是从服务器加载的

列表数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['星际争霸', '星际穿越', '魔兽争霸'],
            }
        })
    </script>
</body>

</html>

计数器

methods : 该属性用于在vue对象中定义新的方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>当前数字{{counter}}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter : 0
            },
            methods: {
                add: function () {
                    console.log('add被执行');
                    this.counter++
                },
                sub:function(){
                    console.log('sub被执行');
                    this.counter--
                }
            }
        })
    </script>
</body>

</html>