Vue简单入门

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>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页