2019/7/19

99 阅读1分钟
1.用Vue的方式向屏幕输出hello world 

<head>
 <script src="./vue.js">
</script> 
</head>
 <body>
 <div id="root">{{msg}}</div>
	<script>
	new Veu({
		el:"#root",
		data:{
			msg:"hello world" 

                    }
	        })
	</script>
</body>

2.挂载点,模板,实例之间的关系

 挂载点;el:"#root",

 模板:挂载点内部的内容 在Vue中用template

 new Veu({
		el:"#root",
		template:'<h1>hello{{msq}}</h1>'
		data:{
			msg:"hello world"
		}
	})

3.实例中的数据,事件和方法

 

<body>
	<div id="root">
	//{{number}}----查值表达式
	//<h1 v-html="number"></h1>--会被转义
	//<h1 v-text="number"></h1>--直接文本输出

	//<div v-on:click="handleClick">{{msg}}<div>--点击事件,点击调用函数,v-on等于@,所以<div @:click=>也行
	</div>
	
	<script>
	new Veu({
		el:"#root",
		data:{
			msg:"hello world",
			number:123
		}
		methods:{
			handleClick:function(){
		点击后弹出警告框	//alert(123)
		点击后改变了内容//this.msg="hello"
					}
		}
	})
	</script>
</body>

 4.属性绑定和双向数据绑定 

<body>
	<div id="root">
		<div
	</div>
	<script>
	new Veu({
		el:"#root",
		data:{
			msg:"hello world"
		}
	})
	</script>