Vue.JS学习笔记

1、

<ul  id="example-1"><li  v-for="item  in  items">{{ item.message }}</li>
</ul>var  example1  =  new  Vue({el: '#example-1',    //el中放 id 名data:{items:[{message: 'Foo' },{message: 'Bar' }]}
});

2、注册一个全局组件：Vue.component(tagName, options)。如：

<div  id="example"><my-component></my-component>
</div>var  Child = {template:  '<div> A custom component! </div>'
}//注册
Vue.component('my-component',{      //my-component：自定义元素

　　props:['message'],  //props的声明需要放在template前面   props可以使用实例中的变量赋值

　　//<my-component>将只在父模板可用template:  '<button  v-on:click="counter +=1">{{counter}}</button>',        //模板data:function(){    //data必须是函数return {counter:  0}}
});//创建根实例
new Vue({el:  '#example'
})

转载于:https://www.cnblogs.com/bala/p/6902717.html

Vue.JS学习笔记相关推荐

Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...

Vue.JS学习笔记

Vue.JS学习笔记相关推荐

最新文章

热门文章