vue入门1----Vue基本使用

一、Vue插件介绍

1.定义：

    vue是渐进式开发框架，即如果有现成的服务端应用，可以将vue作为该应用的一部分嵌入其中，可先用核心的库，若有特殊需求，再加入特定的插件，这样会有更加丰富的交互体验。

2.vue的特点：

• MVVM模式；
• 编码简洁，体积小，效率高；
• 只关注视图层（UI），轻松引入vue插件和其他第三方开发项目；
• 作用：可动态构建用户界面，（构建指将后台数据动态展示在前端界面）
• 声明式编程

3.vue与其他插件的区别：

• 借鉴angular的模板和数据绑定技术
• 借鉴react的组件化和虚拟DOM技术

*详细的暂不写，学完react、node、angular之后进行总结

4.vue扩展插件：

• vue-cli : （vue脚手架 )
• vue-resource/axios : （ajax请求)
• vue-router : （vue 路由)
• vuex : （状态管理）
• vue-lazyload : （图片懒加载)
• vue-scroller : （页面滑动相关）
• element-ui : （基于vue的UI组件库 pc端)
• mint-ui : （基于vue的UI组件库 移动端 ）

5.vue开发常用工具：

• 调试工具：vue-devtools 下载地址：https://github.com/vuejs/vue-devtools
  安装方法参考：https://blog.csdn.net/zgrkaka/article/details/54614212

二、Vue基本使用

2.1.1 输入框变化时，下方文本同步更改

<!--   1.引入vue.js
       2.创建vue对象，el:指定根element（选择器），data:初始化数据（页面可访问）
       3. 双向数据绑定：v-modal
       4. 显示数据 {{XXX}}
       5. mvvm实现原理
            model: 模型 ，数据对象data view<==== Data bindings<===model
            view: 视图，模板页面  view===> dom Listeners===>model
            viewModel: 视图模型，是vue的实例
-->
<div id="app">  <!--View ,包含DOM-->
  <input type="text" v-model="username">
  <p>Hello,{{ message }}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
// 创建的vue实例对象 是ViewModal
// View Modal中有 dom Listeners,Data bindings
var vm = new vue({   // 配置对象
el: '#app', // element:选择器
data: {  // 数据（model）
username: 'username'
}
})
</script>

mvvm模式图

参考：vue.js官网:https://cn.vuejs.org/