Vue案例入门 列表展示 计数器

1 案例一

<div id="app">{{ message }}div>

<script src="../js/vue.js">script>
<script>
    // 编程范式：声明式编程
    const app = new Vue({
        el: '#app', // 用于关在要管理的元素
        data: {     // 定义数据
            message: "你好，有勇气的牛排"
        }
    })

    // 元素js的做法（编程范式：命令式编程）
    // 1. 创建div元素，设置id属性
    // 2. 定义一个变量叫message
    // 3 将message变量放在前面的div元素中显示
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2 列表展示

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

<script src="../js/vue.js">script>
<script>

    const app = new Vue({
        el: '#app', // 用于关在要管理的元素
        data: {     // 定义数据
            message: "你好，有勇气的牛排",
            movies: ['灰太狼', '有勇气的牛排', '九万里']
        }
    })

    // 响应式：在浏览器console中调式
    // app.movies.push('666')

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3 计数器

• methods：该属性用于在Vue对象中定义方法

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

<div id="app">
    <h2>当前计数：{{ counter }}h2>



    <button v-on:click="add">+button>
    <button v-on: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

项目地址
https://github.com/courageSteak/vue-framework

https://www.couragesteak.com/article/153