Vue环境搭建

初学Vue的写法，发现Vue是真的非常方便，如果说Jquery是简化了dom操作，那Vue就是封装了dom，通过数据绑定进行获取数据，大大简化了开发中js获取前台数据的流程和操作。

下面是我的第一个Vue示例用到的知识。

1、v-model 绑定数据模型

2、v-bind 绑定数据和元素属性

3、v-on:click 绑定点击时间

4、v-if 选择判断

5、v-for 循环

html的标签元素一定要放到一个大的div里面，设置id属性，然后Vue在js中创建对象的时候会使用，并且获取data()数据，并执行method的方法。

下面是我的实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">
    {{username}}
    <br><a v-bind:href="url">百度</a>
    <br><input type="button" value="按钮" v-on:click="show()">

    <div v-if="count==3">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>
    <div v-show="count==3">div4</div>

    <input type="text" v-model="count">
    <br>

    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

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

    //创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username: "",
                url : "https://www.baidu.com",
                count : 3,
                addrs : ["北京","西安","上海"]
            }
        },
        methods: {
            show(){
                alert("我被点击了")
            }
        }
    });
</script>
</body>
</html>

页面展示

 

posted @ 2022-09-28 10:14  权。  阅读(40)  评论(0)  编辑  收藏  举报