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>