Vue简单入门

最新推荐文章于 2023-10-16 12:32:14 发布

Chelovek

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量128

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42022380/article/details/110612862

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day01</title>
    <script src="../javaScript/vue.js"></script>

</head>
<body>
    <!-- 必须写在绑定的script前面...现有元素，再注册 -->
    <!--
        <div id="app">{{message}}</div>
     -->
    <div id="app">
        <h1>{{message}}</h1>
        <h2>{{message}}</h2>
        <h3>{{message}}</h3>
        <h4>{{message}}</h4>
        <h5>{{tag}}</h5>
    </div>

    <script>
        // let(变量) / const(常量)
        // ES6改的，因为var是没有作用域的，有缺陷
        const firstApp = new Vue({
            // el：
            // 类型：string | Element
            // 限制：只在用 new 创建实例时生效。
            // 详细：用于挂载需要管理的元素，提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
            //      在实例挂载之后，元素可以用 vm.$el 访问。
            el:'#app',
            // data 定义数据
            // 类型：Object | Function
            // 限制：组件的定义只接受 function。
            // 详细：Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。
            //      对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
            data:{
                message:'hello World!',
                tag:'good night'
            }
        })

        /**
         *  vue使用的是申明式编程（更好用，更流行）。
         *      特点是当我的实例（firstApp）帮我管理对象（id="#app"）的div,只需要申明显示什么（{{message}}）
         *      好处：数据和界面分离
         *  传统的js使用的是命令式编程。
         *      特点是第一步怎么做，第二步做，一步一步指定怎么做
         */
    </script>
</body>
</html>

<!-- 
	浏览器执行到14到20行显示出对应的HTML标签
	执行第25行代码创建Vue实例，并且对原HTML进行解析和修改绑定值。
-->

结果图：
在这里插入图片描述

Vue响应式小解

在上一篇中讲到 Vue实现了视图和数据的解耦。这里可以看到，我们数据都是在 <script> 通过 new Vue中的data{} 引入。并通过 {{}}方式绑定。并且，当修改了data中的数据，对应绑定的地方也会跟着修改。

修改数据前：
这里可以看到获取的是原来绑定的数据
修改数据后：
这里可以看到当修改tag，对应的页面绑定出随之响应变化

vue事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../javaScript/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{count}}</h2>
        <!-- v-on是监听事件，click指的是监听什么类型的事件，“”指的是对应定义的事件执行方法-->
        <button v-on:click="addOne"> + </button>
        <button v-on:click="subtractOne"> - </button>
        <!-- @click == v-on:click 前者是简写，也称作语法糖  -->
        <button @click="addOne"> + </button>
        <button @click="subtractOne"> - </button>
    </div>

    <script>
        const firstApp = new Vue({
            el:'#app',
            data:{
                count:0
            },
            // 定义方法集合
            methods:{
                addOne:function (){
                    // 都在firstApp中，所以可以用this指代本对象
                    this.count++;
                    console.log("addOne执行成功")
                },
                subtractOne:function (){
                    this.count--;
                    console.log("subtractOne执行成功")
                }
            }
        })
    </script>
</body>
</html>