下载IDE集成开发环境
推荐下载:HBuilder X
从Hello World开始感受
点击下载:vue.js
下载后,在项目中,新建js文件夹,复制到js文件夹处
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个VUE示例Hello World</title>
</head>
<body>
<div id="app">
<input type="text" name="Myname" id="Myname" value="" placeholder="少侠尊姓大名" v-model="name"/>
<h1>久仰久仰,{{name}}少侠</h1>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
name:''
}
})
</script>
</body>
</html>
运行结果:
详细讲解:关于Vue实例少侠必须知道的知识
创建一个Vue实例,和所有面向对象的语言一样,通过构造函数Vue来实例化,来创建app对象:
var app = new Vue({
//配置参数
})
在配置参数中,必选项是:el
el作用是:指定一个页面中已存在的Dom元素绑定Vue实例,可以是像上面例子中的CSS选择器,也可以是HTMLElement选择器,如:
<div id="app">
<input type="text" name="Myname" id="Myname" value="" placeholder="少侠尊姓大名" v-model="name"/>
<h1>久仰久仰,{{name}}少侠!</h1>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el:document.getElementById("app"), //或者用CSS选择器 '#app'
data:{
name:''
}
})
</script>
如果想取到el指定的元素值,可以用: app.$el
注意:在input标签中,有一个数据监控表达式 :v-model="name" 它所赋予的值对应data数据中的name字段,这样Vue的双向数据绑定才会成功!
所有在视图中用到的数据,都要在data内预先初始化,将业务数据集中起来,不至于后期分散到业务逻辑中,浪费维护时间。
在业务逻辑中对于data的访问与修改
el除了指向一个元素外,还可以指向一个变量,默认建立了双向绑定:
<script>
var temData = {
name:"王大锤"
}
var app = new Vue({
el:document.getElementById("app"),
data:temData
})
//访问data数据,输出:"王大锤"
console.log(app.name);
//修改属性值,原数据值也随着变化,输出:"郝小胖"
app.name = "郝小胖";
console.log(temData.name);
//修改原数据,Vue属性也会修改,输出:"东方不败没JJ"
temData.name = "东方不败没JJ";
console.log(app.name);
</script>
请自己动手,敲一遍这个小例子,体会一下data中的双向绑定。
Vue实例的生命周期回调方法
- created:实例初始化完成后回调,此时仅仅完成了数据data的初始化,但并未绑定view,$el取值不可用!
- mounted:el指定到实例上后回调,业务逻辑在这里开始处理。
- beforeDestroy:实例销毁之前回调,主要用于解绑、释放、销毁数据
var app = new Vue({
el:document.getElementById("app"),
data:temData,
created:function(){
console.log(this.name); //访问data数据,输出:"王大锤"
},
mounted:function(){
console.log(this.$el); //访问el对象,输出:<div id="app"></div>
}
})
恭喜,您已经入门Vue,掌握了一些基础知识,下面让我们来学会灵活运用吧!您可以: