一起学Vuejs（一）----- Hello Vuejs！

不积跬步，无以至千里；不积小流，无以成江海。

Vuejs语言基础

第一个Vuejs程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id = "app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
    //let(变量),const(常量)
    //编程范式：声明式编程
    const app = new Vue({
        el:'#app',//用于挂载要管理的元素
        data:{ //定义数据
            message:'Hello vuejs！',
            name:'Jiang'
        }
    })
</script>

</body>
</html>

1. 首先创建了一个Vue对象。

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

　　a. {}中包含了el属性：该属性决定了这个Vue对象挂载到哪个元素上。这里，我们挂载到了id为app的元素上

　　类型：string | HTMLElement

　　作用：决定之后Vue实例会管理哪个DOM。

　　b. {}中包含了data属性：该属性中通常存储一些数据

　　类型：Object | Function（组件中data必须是一个函数）

　　作用：Vue实例对应的数据对象。

　　　　√ 这些数据可以是我们直接定义出来的。

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

Vue列表显示：

展示一个更加复杂的数据：数据列表。

注意使用v-for指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in movie">{{item}}</li>
    </ul>
<!--    {{movie}}-->
</div>

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

</body>
</html>

小案例：计数器

　　点击“+”，计数器加1；

　　点击“-”，计数器减1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<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--
            }
        }

    })
</script>
</body>
</html>

新属性：methods，该属性用于在Vue中定义方法。

　　类型：{[key: string]: Function }

　　作用：定义Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

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

posted on 2020-04-27 19:16 smile学子阅读(310) 评论(0) 收藏举报