Vue 计数器案例 {@click}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 直接标签操作 -->
        <h2>当前计数为:{{number}}</h2>
        <button @click="number++">+</button>
        <button @click="number--">-</button>

        <br>

        <!-- 使用函数来操作 -->
        <h2>当前计数为:{{number2}}</h2>
        <button @click="increase">+</button>
        <button @click="subtraction">-</button>
        <p>当前已经点击了:{{count}}次</p>
        
    </div>

    

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                number: 0,
                number2: 0,
                count: 0,
            },
            methods: {
                increase: function(){
                    this.count++
                    this.number2++
                },
                subtraction: function(){
                    this.count++
                    this.number2--
                }
            }
        })
    </script>
</body>
</html>

Vue列表展示 {v-for}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in color">{{item}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                color: ['red','green','black','yellow']
            }
        })
    </script>
</body>
</html>

Hello Vue

  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层, 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        {{name}}
        {{name}}{{name}} 
        <!-- 可以写多个 -->
        <h2>{{title}}</h2>

        <p><span>{{name}}</span>{{message}}</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        //编程范式:声明式编程

        //let (在es6 变量) const(es6 常量)
        let name = 'way'

        //var是js早期的设计缺陷,是没有变量的作用域这个概念的
        //var app = new Vue({
            
        //})

        const app = new Vue({
            el: '#app',//用于挂在要管理的元素
            data: { //定义数据
                title: '用Vue有什么好处呢?',
                name: '张三',
                message: '其中一个好处就是可以做到数据和界面完全分离'
            }
        })

        
    </script>
</body>
</html>