VUE.js基础

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>

实现效果：

 生命周期

        创建             渲染（挂载）             更新              销毁