1.创建完vue项目之后有以下文件夹生成
- bulid文件夹保存webpack的基本配置
- config文件夹保存项目基本配置
- node_modiles是npm加载的项目依赖的模块
- src目录是要开发的目录 { assets放置图片,common:放置字体文件,components:放置组件,App.vue:项目入口文件}
- static文件夹用来存放静态资源文件目录
- index.html首页入口文件
- package.json项目配置文件
2.实例化Vue对象,数据和方法
2.1实例化对象
//每一个new出来的vue都是一个实例化的对象
var vm = new Vue({
//这里是代码区
})
//vue构造器实例化时需要传入一个选项对象,选项对象包括挂载元素(el),数据(data),方法(methods),模板(tamplate),生命钩子函数等选择
2.2vue的数据和方法
new Vue ({
el:"#app", //el:element 需要获取的元素,一定是html的根元素
data:{ //data用来存储数据
name:"ZMR",
age:22
}
})
<!--在html中我可以调用此方法-->
<div id="#app">
<h1>{{name}}</h1> <!--ZMR-->
<p>{{age}}</p> <!--22-->
</div>
2.3上面是挂载了元素(el),数据(data),还可以增加一个属性方法methods.
new Vue ({
el:"#app",
data:{
name:"ZMR",
age:22
},
methods:{
say:function(){
return:"欢迎您:" + this.name
}
}
})
<!--在html中我可以调用此方法-->
<div id="#app">
<h1>{{name}}</h1> <!--ZMR-->
<p>{{age}}</p> <!--22-->
<p>{{say()}}</p> <!--欢迎您:ZMR-->
</div>
3.让数据挂载到dom中,实现双向数据绑定,开启(MVVM)模式
什么是双向数据绑定:就是当我们改变一个数据的值的时候,这个数据返回所改变的值会根据这个值的改变导致另一个值也随之发生改变,这就是双向数据绑定(v-model)
<div>
{{property}}
<input type="text" v-model="property"/>
</div>
<script>
var exampleDate = {
property:'Hello ZMR'
}
new Vue ({
el:"#app",
data:exampleDate
})
</script>
运行时,当input框里面的值发生改变之后,页面上的{{property}}值也会同样更新。