Vue.js v2.5.17学习教程_01：从入门到精通

最新推荐文章于 2023-02-09 12:02:16 发布

weixin_34301132

最新推荐文章于 2023-02-09 12:02:16 发布

阅读量231

点赞数

文章标签： javascript json java ViewUI

原文链接：https://yq.aliyun.com/articles/637784

版权

Vue.js

Vue.js 2.0
每天进步一点点，你终将会变成你想要成为的那个人

VueDemo_01：初识vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue01</title>
    <script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子"
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>
</body>
</html>

new Vue:创建一个Vue实例（对象），可以起名字也可以不起
el:element 的缩写这里面放‘选择器 ’
data:data 也是固定的名字这里面放置数据
v-model="message":指令 v-model 用于数据绑定
{{ message }}:取出数据

VueDemo_02：data

data:数据类型可以有很多种...

<script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子",
                    arr:["Spring","Hibernate","SpringBoot","Mybatis"],
                    jsonObj:{a:"Spring",b:"Hibernate",c:"SpringBoot",d:"Mybatis"}
                }
            })
        }
    </script>

v-for指令：循环取值
v-for="(value,index) in arr">{{value}} {{index}}：
v-for="(json,index,key) in jsonObj">{{json}} {{index}}{{key}}:
value:data中的数据名称
index:索引
key:json的key

<body>
    <div id="app">
        <!-- v-for -->
        <ul >
            <li v-for="(value,index) in arr">{{value}} {{index}}</li>
        </ul>
        <ol>
            <li v-for="(json,index,key) in jsonObj">{{json}} {{index}}{{key}}</li>
        </ol>
    </div>
</body>

说明一下：vue 2.x开始删除了 v-for 指令当中的 $index如果需要使用需要在 v-for 指令当中添加需要的参数（就是要按照上面的格式书写）

VueDemo_03：Vue中的事件

v-on:click:点击事件

<body>
    <!--  v-on:click-->
    <div id="app">
        <input type="button" value="按钮" v-on:click="show()">
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>
</body>

methods:这个参数也是固定的事件方法在这里面定义

<script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子",
                    arr:["Spring","Hibernate","SpringBoot","Mybatis"],
                    jsonObj:{a:"Spring",b:"Hibernate",c:"SpringBoot",d:"Mybatis"}
                },
                methods:{
                    show:function () {
                        alert("弹出框");
                    }
                }
            })
        }
    </script>

VueDemo_04：一个添加的点击事件

<script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            //创建一个实例
            new Vue({
                //element 这里面放‘选择器 ’
                el:'#app',
                //data 也是固定的名字 这里面放置数据
                data:{
                    message:"我的第一个vue例子",
                    arr:["Spring","Hibernate","SpringBoot","Mybatis"],
                    jsonObj:{a:"Spring",b:"Hibernate",c:"SpringBoot",d:"Mybatis"}
                },
                methods:{
                    add:function () {
                        this.arr.push("SpringMVC");
                    }
                }
            })
        }
    </script>

因为数据是双向绑定的，所以在点击按钮之后页面上展示的数组的数据也会随之增加

<!--  v-on:click-->
    <div id="app">
        <input type="button" value="按钮" v-on:click="add()">
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>

weixin_34301132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js v2.5.17学习教程_01：从入门到精通

Vue.jsVue.js 2.0每天进步一点点，你终将会变成你想要成为的那个人VueDemo_01：初识vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫