vue-基础属性 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--添加类名:对象语法-->
        <div id="my_vue">{{message}}</div>
        <div id="app" v-bind:class="{'a':aa,'b':bb}">
            <!--添加类名:数组语法-->
            <p v-bind:class="[x,y]"></p>
            <!--添加html-->
            <p v-html="xm"></p>
            <!--添加css样式-->
            <p v-bind:style="{color:my_color,fontSize:my_font}">你是傻逼</p>
            <!--直接绑定到一个样式对象-->
            <p v-bind:style="my_style">啊，你再说一次</p>
            <!--数组语法可以将多个样式对象应用到一个元素上-->
            <p v-bind:style="[my_style,my_style2]">你还是傻逼</p>
            <!--不会渲染-->
            <h1 v-if="ok">{{name}}</h1>
            <!--会渲染-->
            <h2 v-show="show">{{name}}</h2>
            <!--遍历json-->
            <p v-for="item in da">
                {{item}}
            </p>
            <!--带有索引-->
            <p v-for="(items,index) in arr">
                {{items}}---{{index}}
            </p>
            <!--绑定事件--> 
            <p v-on:click="click">单击我</p>
            <button v-on:click="counter += 1">增加 1</button>
             <p>这个按钮被点击了 {{ counter }} 次。</p>
              <!--内联 JavaScript 语句-->
             <p v-on:click="say('我是第一次')">我是第一次，被点</p>
             <p v-on:click="say('我是第二次')">我是第二次，被点</p>
             <!--计算属性：computed方法-->
             <p>{{bgg}} {{my_computed}}</p>
             <!--计算属性：methods方法-->
             <p>{{bgg}}:{{my_computeds()}}</p>

        </div>
        <script src="js/vue.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            var x=document.getElementById('my_vue')
            var my_vue=new Vue({
                
                data:{
                    message:'jay'
                }
            })
            my_vue.$mount(x);
            var app_div = document.getElementById('app');
            var vue = new Vue({
                data: {
                    x:'a',
                    y:'b',
                    bgg: '123',
                    aa: true,
                    bb: true,
                    name: 'jay',
                    ok: true,
                    show: false,
                    da: {
                        'name': 'bgg',
                        'age': 12,
                        'sex': '女'
                    },
                    arr: [11, 12, 13, 14, 15, 16, 71],
                    xm:'<div>我是插入的div</div>',
                    my_color:'red',
                    my_font:20+'px',
                    my_style:{
                        color:'yellow',
                        fontSize:25+'px'
                    },
                    my_style2:{
                        background:'red'
                    },
                    counter:0
                },
                methods: {
                    click: function() {
                        alert('霸气的55开')
                    },
                    say:function(x){
                        alert(x);
                    }                    
                    
                },
                //返回的数据放在my_computed，存在依赖关系
                computed:{
                    my_computed:function(){
                        return parseInt(this.$data.bgg)+1000
                    }
                },
                methods:{
                    my_computeds:(function(){
                        return parseInt(this.$data.bgg)+100                
                    })
                }
                
            })
            vue.$mount(app_div);
        </script>
    </body>

</html>

 

posted @ 2017-08-15 09:58  LWJ_jay  阅读(357)  评论(0)    收藏  举报