博客园 首页 私信博主 我的git 我的网站 管理 动画

vue初始

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue初识(前后端分离)</title>
    </head>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style type="text/css">
        
    </style>
    <body>
        <div id="app"><!--//所有代码写在div里-->
            <div v-html="name"></div>  {{name}}
            <hr />
            <div v-show="show">出现</div>  
            <!--if else 判断-->
            <div v-if="isok"><!--为真出现-->欢迎进入我的主页</div>
            <div v-else><!--为否出现-->请先登录</div>
            <hr />
            
            <button v-on:click="res">-</button>{{count}}<button @click="add">+</button> <!--v开头的是指令-->
            <hr />
            <!--循环输出-->
            <ul >
                <li v-for="(item,index) in stus"> <!--in 数组名称-->
                    {{index}}------{{item}}
                </li>
            </ul>
            <hr />
            <span v-bind:title="messa">
                鼠标悬停几秒后显示页面信息
            </span>
            <hr />
            <!--双向绑定-->
            {{message}}
            <br />
            请输入<input type="text" v-model="message" />
            <hr />
            
        </div>
        <script type="text/javascript">
            //vue进入
            var vue=new Vue({//new一个Vue对象   必须找id
                el:"#app", //固定格式
                data:{
                    name:"<h2>hello world</h2>",
                    isok:true,
                    count:0,
                    show:true,
                    stus:["","",""],
                    messa: '页面加载于 ' + new Date().toLocaleString(),
                    message:"",//初始值
                },
                    
                    
            
                
                //f方法,事件
                methods:{
                    add:function(){
                        this.count++;
                    },
                    res:function(){
                        this.count--;
                        
                    }
                }
                    
            });    
        </script>
        
    </body>
</html>

 

posted @ 2019-10-22 19:16  魏婴  阅读(133)  评论(0编辑  收藏  举报