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

有勇气的牛排 1069 前端 2021-11-06 15:58:44

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>

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>

3 计数器

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

<div id="app">
    <h2>当前计数：{{ counter }}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->

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

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

<h2><a id="1__0"></a>1 案例一</h2> <pre><div class="hljs"><code class="lang-html"><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> </code></div></pre> <h2><a id="2__22"></a>2 列表展示</h2> <pre><div class="hljs"><code class="lang-html"><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> </code></div></pre> <h2><a id="3__48"></a>3 计数器</h2> <ul> <li> methods：该属性用于在Vue对象中定义方法 </li> <li> @click：用于监听某个元素的点击事件，并且需要指定当前发生点击时，执行的方法(方法通常是methods中定义的方法) </li> </ul> <pre><div class="hljs"><code class="lang-html"><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> </code></div></pre> 项目地址 https://github.com/courageSteak/vue-framework

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

1 案例一

2 列表展示

3 计数器

留言

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