Vue-01

WEB前端 waitig 526℃ 百度已收录 0评论

1.Vue的架构模式

MVVM(Model-View-ViewModel)

2.如何使用vue.js

<1>引入vue.js文件
<2>创建Vue的实例
<3>将创建的参数对象挂载到Vue实例上

一个组件里面写:HTML css 以及js
注意

var option = {
    el:'#app',
    data:{
        数据
    },
    methods:{
        方法
    }
}

3.Demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        .div1{
            height: 100px;
            width: 100px;
            background: #f00;
        }
        .div2{
            height: 100px;
            width: 100px;
            background: #ff0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- react中使用{}插值,Vue中使用{{}}插值 -->
        <h1>{{message}}</h1>
        <!-- 指令系统 声明式的指令 所有的指令都是v-开头 -->
        <div class="div1" v-if = 'isShow'></div>
        <!-- 使用v-bind:绑定属性内容 -->
        <div v-bind:class = 'div2class'></div>
        <!-- 使用v-on:绑定事件 -->
        <button id="btn" v-on:click = 'show'>点击</button>
        <img v-bind:src = "imgSrc" alt="">
        <ul>
            <li v-for = "(item,index) in imgArray" v-on:click = "imgHandler(item)">{{index+1}}</li>
        </ul>
        <!-- @click相当于v-on:click -->
        <button @click = "nextImg">next</button>
        <button @click = "prevImg">prev</button>
    </div>
    <!-- 使用Vue第一步,引入vue.js文件 -->
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        //定义实例参数
        var option = {
            el:"#app",
            data:{
                message:'欢迎大家来学习vue.js',
                isShow:true,
                div2class:'div2',
                imgSrc:"images/1.jpg",
                imgArray:['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'],
                currentIndex:0
            },
            methods:{
                show(){
                    this.isShow = !this.isShow
                },
                imgHandler(item){
                    this.imgSrc = item
                },
                nextImg(){
                    this.currentIndex++;
                    this.imgSrc = this.imgArray[this.currentIndex]
                    if(this.currentIndex == this.imgArray.length-1){
                        this.currentIndex = -1;
                    }
                },
            }
        }
        //创建一个Vue实例
        //配置参数传进去
        var app = new Vue(option);
        console.log(app);
    </script>
</body>
</html>

本文由【waitig】发表在等英博客
本文固定链接:Vue-01
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)