Vue的基本使用

Vue作为前端主流的框架之一,其基本的使用步骤如下

1、引入
初级阶段可以通过官网下载开发版本 [https://vuejs.org/js/vue.js],在相应的JS代码段引入
2、示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="hello">
    	//响应式原理的体现 输出 "hello shixue"
        hello {{name}}
        //输出一个无须列表 包含data中的moives所有数据
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
        //实现了一个基本的计数功能
        当前计数:{{counter}}
        <button @click=increament>+</button>
        <button @click=decreament>-</button>
        
    </div>
    **<script src="vue.js"></script>**
    <script>
        var app = new Vue({
            el: "#hello",
            data: {
                name: 'shixue',
                movies: ['明天会好的','你的姐姐','你的婚礼'],
                counter: 0
            },
            methods: {
                increament() {
                    this.counter++ //实例化对象的this指的是这个创建的这个实例化对象app 这里app已经被挂载到div上了,按钮可以生效。
                },
                decreament() {
                    this.counter--
                }
            }
        })
    </script>
</body>
</html>

3、Vue实例化对象的组成
1>el: 表示要挂载到哪一个HTML元素上,
2>data: 用于显示在浏览器页面的基本数据,相当于实例化对象的属性
3>methods: 相当于实例化对象的方法

上一篇:css实现图片的瀑布流且右上角有计数


下一篇:python中使用time.pref_counter()精确计时