1.引入js文件
2.定义Model
3.创建vue对象
选项参数:
el:提供页面上已存在的dom元素作为vue实例挂载目标
data:Vue实例的数据对象
methods:Vue实例的方法集合,直接调用或将方法绑定到Dom元素上。
computedd:Vue实例的计算属性结合
watch:监听/观察Vue实例变化的一个表达式,或计算属性函数
components:包含实例可用组件的哈希表
filters:包含Vue实例可用过滤器的哈希表
template:定义字符串模板作为Vue实例的标识使用
页面布局:
<div id="app">
<fieldset style="width:200px;margin: 0 auto;">
<legend style="text-align: center;">Welcome to you</legend>
<!-- v-model 获取页面的数据 -->
<p><label>姓:</label><input type="text" id="firstName" v-model="firstName"/></p>
<p><label>名:</label><input type="text" id="lastName" v-model="lastName"/></p>
</fieldset>
<div style="width:200px;margin: 0 auto; text-align: center;">欢迎您:{{firstName+lastName}}</div>
</div>
实现效果:
生命周期
创建 渲染(挂载) 更新 销毁