vue.js学习笔记一

Posted 2021-07-25 -恰饭第一名-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js学习笔记一相关的知识，希望对你有一定的参考价值。

一、认识vue

vue是一个渐进式的框架,渐进式意味着你可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验
或者如果你希望将更多的业务逻辑使用Vue实现，那么将要学习Vue的核心库以及其生态系统
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求

Vue有很多特点和Web开发中常见的高级功能

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

二、Vue.js安装

方式一：直接CDN引入

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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

在这里插入图片描述

方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

三、Vue的初体验

1、Hello Vue.js

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

{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
（1）这些数据可以是我们直接定义出来的，比如像下面这样
（2）也可能是来自网络，从服务器加载的

    <div id="app">{ { message } }</div>
    <script src="../js/vue.js">
    </script>
    <script>
        //编程范式：声明式编程
        let name = "why";
        name = "kobe";
        let app = new Vue({
            el: "#app", //用于挂载要管理的元素
            data: {
                message: "你好哇，李银河！"
            }
        })

        //元素js的做法（编程范式：命令式编程）
        //1、创建div元素，设置id属性
        //2、定义一个变量叫message
        //3、将message变量放在前面的div元素中显示出来
        //4、修改message的数据：今天天气不错！
        //5、将修改后的数据再次替换到div元素
    </script>

2、Vue列表展示

（1）v-for
（2）后面给数组追加元素的时候，新的元素也可以在页面中渲染出来

  <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
                movies: ['漫威', '钢铁侠', '海王', '盗梦空间']
            }
        })
    </script>

3、Vue计数器小案例

methods，该属性用于在Vue对象中定义方法
@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）

  <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>
    <script src="../js/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--
                    }
                }
            })
            // 1.拿button元素
            // 2.添加监听事件
    </script>