VUE学习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app-div">
        <h1>{{msg}}</h1>
        <h1>{{ gree('hzz') }}</h1>
        <a v-bind:href="baidu">百度</a>
        <p v-html="baiduTag"></p>
        <p>{{ age }}</p>
        <button @click="add(2)">加</button>
        <button @click="add(-3)">减</button>
        <div id="canvas" @mousemove="updateXY">
            ({{ x }},{{ y }})
        </div>
        <a @click.prevent="alert" href="http://www.baidu.com">a标签</a>
        <input type="text" ref="name" @keyup="setName"/>
        <input type="text" ref="age"  @keyup="setAge"/>
        <span>{{name}}</span>
        <span>{{age}}</span>
    </div>

</body>
    <script src="app.js"></script>
</html>

new Vue({
    el:'#app-div',
    data:{
        msg:'this is a vue test',
        baidu:'http://www.baidu.com/',
        baiduTag:'<a href="http://www.baidu.com/">百度Tag</a>',
        age:29,
        x:0,
        y:0,
        name:''
    },
    methods:{
        gree:function(name){
            return 'hello '+name + this.msg;
        },
        add:function(x){
            this.age+=x;
        },
        updateXY:function(e){
            this.x=e.pageX;
            this.y=e.pageY;
        },
        alert:function(){
            alert('hello world!');
        },
        setName:function () {
            this.name=this.$refs.name.value;
        },
        setAge:function(){
            this.age=this.$refs.age.value;
        }
    }
});

更新：

new Vue({
    el:'#app-div',
    data:{
        msg:'this is a vue test',
        baidu:'http://www.baidu.com/',
        baiduTag:'<a href="http://www.baidu.com/">百度Tag</a>',
        age:29,
        x:0,
        y:0,
        name:'',
        users:[
            {name:'hzz',age:31,job:'programer'},
            {name:'fyc',age:31,job:'saler'},
            {name:'hym',age:28,job:'nurse'}
        ]
    },
    methods:{
        gree:function(name){
            return 'hello '+name + this.msg;
        },
        add:function(x){
            this.age+=x;
        },
        updateXY:function(e){
            this.x=e.pageX;
            this.y=e.pageY;
        },
        alert:function(){
            alert('hello world!');
        }
        // setName:function () {
        //     this.name=this.$refs.name.value;
        // },
        // setAge:function(){
        //     this.age=this.$refs.age.value;
        // }
    },
    computed:{
        addToA:function(){
            return this.age+10;
        },
        addToB:function(){
            return this.age+20;
        },
    }
});

Vue.component('greeting',{
    template:'<p>{{name}}是fsdfsfsdssdsdfd</p>',
    data:function(){
        return {
            name:'hzz'
        }
    }
});

new Vue({
    el:"#cpnt"
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="cpnt">
        <greeting/>
    </div>
    <div id="app-div">
        <h1>{{msg}}</h1>
        <h1>{{ gree('hzz') }}</h1>
        <a v-bind:href="baidu">百度</a>
        <p v-html="baiduTag"></p>
        <p>{{ age }}</p>
        <button @click="add(2)">加</button>
        <button @click="add(-3)">减</button>
        <div id="canvas" @mousemove="updateXY">
            ({{ x }},{{ y }})
        </div>
        <a @click.prevent="alert" href="http://www.baidu.com">a标签</a>
        <input type="text" ref="name" v-model="name"/>
        <input type="text" ref="age"  v-model="age"/>
        <span>{{name}}</span>
        <span>{{age}}</span>
        <button @click="add(1)">add to A</button>
        <button @click="add(2)">add to B</button>
        <p>age+A={{addToA}}</p>
        <p>age+B={{addToB}}</p>

        <ul>
          <template v-for="(user,index) in users">
            <li>{{index}}--->{{ user.age }}</li>
          </template>
        </ul>
    </div>

</body>
    <script src="app.js"></script>
</html>

posted on 2018-05-06 21:06 编世界阅读(103) 评论(0) 编辑收藏举报