Vue学习（一）

最新推荐文章于 2021-10-16 09:13:22 发布

叫我小鹏同学

最新推荐文章于 2021-10-16 09:13:22 发布

阅读量208

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/daxiandan/article/details/113792823

版权

Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

- Vue学习（一）

Vue学习（一）

参考教程：2019年最全最新Vue、Vuejs教程，从入门到精通

01-Vue初体验

new 一个Vue实例的时候，里面的参数：
- el：Vue要管理的Vue实例。用于挂载要管理的元素。vue要管理的组件id前面需要#。
- data：是一个对象（大括号包着），里面是要定义的数据。
- data可以使用代理

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
</head>
<body>
    <!--    变量绑定-->
    <!--    课程里面说这叫 “响应式”-->
    <div id="app">
        <h1>{{message}}</h1>
        <h2>
            I am {{name}}!
        </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    	// proxy
    	const obj = {
    	 	message : "hello, little chen",
            name : "little chen"
    	}
        /**
         *  es6中不再使用var定义变量 而使用let(变量), const(常量)
         *  课程里面说这叫 “声明式编程范式”
         */
        const app = new Vue({
            el : '#app', // Vue要管理的Vue实例。用于挂载要管理的元素
            /*
            data : { // 定义数据
                message : "hello, little chen",
                name : "little chen"
            }
            */
            data : obj

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

02-Vue列表显示

id是在div定义的，而不是在<ul></ul>定义的
遍历显示
```
<li v-for="item in xxx">{{item}}</li>
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue列表展示</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in festival">{{item}}</li>
        </ul>
    </div>
    <!-- 先引入vue -->
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el : "#app",
            data : {
                festival : [
                    "元旦",
                    "除夕",
                    "春节",
                    "情人节"
                ]
            }
        })
    </script>
</body>
</html>

03-Vue计数器(事件监听)

在要监听的组件定义 v-on:click="xxx"属性
- 其中，v-on的冒号后面表示要监听的事件类型，比如click点击事件
- xxx是new Vue实例时，定义在methods里面的方法

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-Vue计数器(事件监听)</title>
</head>
<body>
    <div id="app">
        <h2>当前计数 ： {{counter}}</h2>
        <button v-on:click="addCounter">+</button>
        <button v-on:click="decCounter">-</button>c
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el : "#app",
            data : {
                counter: 0
            },
            methods: {
                addCounter:function () {
                    console.log("点击了增加按钮！")
                    this.counter++;c
                },
                decCounter:function () {
                    console.log("点击了减少按钮！")
                    this.counter--;
                }
            }
        })
    </script>
</body>
</html>