Vue框架入门笔记（1） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="MyJs.js"></script>

		<style>
		</style>
    </head>	
    <body>
		<div id="Myapp">
			<ol>
				<game-item v-for="item in games" v-bind:game="item"></game-item>
			</ol>
			
		</div>
		<script>
			Vue.component("game-item", {
				props:["game"],		//自定义属性
				template:"<li>{{game.title}}</li>",
			});
			var vm=new Vue({
				el:"#Myapp",
				data:{
					games:[
						{title:"勇者斗恶龙"},
						{title:"口袋妖怪"},
						{title:"守望先锋"},
					]
				}
			})
		</script>
    </body>
</html>

<div id="app6">
            <p>{{message}}</p>
            <input v-model="message" type="text" />
            <tododiv></tododiv>
            <todo-div></todo-div>
</div>

Vue.component("tododiv",{template:'<div>这是个待办项</div>'});    //vue的全局组件应该在vue初始化之前被设置

var app6=new Vue({
             el:"#app6",
             data:{
                 message:"Hello Vue!",
             }, 
             components:{    //注意这里多了个s
                 'todo-div':{
                     template:"<div>这是个局部待办项</div>"    //这是一个局部vue组建
                 }
             } 
         })

{{message}}(Mustache 语法)不能作用在 HTML 特性（属性）上，遇到这种情况应该使用 v-bind 指令

posted @ 2018-04-26 15:41  HarrietWong  阅读(110)  评论(0)  编辑  收藏  举报