vue.js

//实例化vue对象

new Vue({
    el:"#vue-app",
    data:{
        name:"西斯特务",
        job:"web开发",
        website:"www.baidu.com"
        websiteTag:"<a href="www.vaidu.com">web开发</a>"
    },
    methods:{
        greet:function(time){
            return 'Good ‘ + time + this.name +’ !';
        }
    }
})

el:element 需要获取/控制的元素,一定是html中的根容器元素 data:用于数据的存储,在html中,用{{ name }}获取data的属性 methods:方法,在html中用{{ greet('afternoon') }}调用

data-bind:给属性绑定对应的值

website:html网页想要在a标签的herf中绑定website需要在herf前加入v-bind如web开发 websiteTag:想在html中调用websiteTag首先要定义一个模块标签(p标签)如:

,用v-html来调用vue的data中的websiteTag自定义a标签

Vue事件

new Vue({
    el:"vue-app",
    data:{
        age:30,
        x:0,
        y:0
        },
    methods:{
        add:function(inc){
            this.age += inc;
        }
        subtract:function(dec){
            this.age -= dec;
        }
        updateXY:function(event){
            //打印在console中找出自己所需要的元素
            //console.log(event);
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
})

除了v-on来绑定以外也可以用@来绑定。 点击事件可以用v-on来绑定click/dblclick事件来对页面上vue的属性值age进行更改 鼠标移动事件同样在元素中用v-on来绑定mousemove事件,如:

{{x}},{{y}}
并且可以在click后面加一个.once,表示这个事件只会触发一次

双向绑定/input/select/textarea/

用v-model来进行数据的双向绑定,在

vue
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。