Practice_Vue练习笔记_vue ispractice-CSDN博客

本文链接：https://blog.csdn.net/qq_38801960/article/details/106623824

Practice_Vue练习笔记

一、2020-6-8 变量值显示、列表、按钮、生命周期钩子函数

学习视频：Vue学习视频

一、2020-6-8 变量值显示、列表、按钮、生命周期钩子函数

1.快捷键

（1）！ + Tab

自动初始化html文件

2.vue.js的引用

（1）线上引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（2）本地引用

将vue.js文件下载到本地后，放到项目文件夹的根目录下

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

src放vue.js的路径

3.代码语法学习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <!-- <button v-on:click="counter+=2">+</button>
        <button v-on:click="counter-=2">-</button> -->
        <button @click="add()">+</button>
        <button v-on:click="sub()">-</button>
        <!-- 语法糖：简写 -->
        <!-- @click：该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（通常为methods中的定义方法） -->
        <div>{{message}}</div>
        <div>{{name}}</div>

        <ul>
            <li v-for="i in movies">{{i}}</li> //记忆点
        </ul>
    </div>

    <script>
        // let(变量)/const（常量）
        // 编程范式:声明式编程 好处数据界面完全分离
        const app = new Vue({
            el: '#app',// 用于挂载要管理的元素
            data: { //定义数据
                message: '你好啊，丁颖',
                name: 'dy',
                movies: ['a', 'b', 'c', 'd'],
                counter: 0,
            },

            methods: {
                add: function () {
                    console.log('add被执行');
                    this.counter = this.counter + 2;//没有this则在add函数里找这个变量 this指Vue这个对象

                },
                sub: function () {
                    this.counter--;
                }
            },

            created: function(){
                console.log('a is: ' + this.a)
            }
        });

    </script>
</body>

</html>