Vue系列一：基本使用

红太狼 2022-01-30 06:04 240阅读 0赞

一、简介  
1、官网  
 英文官网：[https://vuejs.org/][https_vuejs.org]  
 中文官网:[https://cn.vuejs.org/][https_cn.vuejs.org]  
2、介绍描述  
 渐进式 JavaScript 框架  
 作者: 尤雨溪(一位华裔前 Google 工程师)  
 作用: 动态构建用户界面  
3、Vue 的特点  
 遵循 MVVM 模式  
 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发  
 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目  
4、与其它前端 JS 框架的关联  
 借鉴 angular 的模板和数据绑定技术  
 借鉴 react 的组件化和虚拟 DOM 技术  
5、 Vue 扩展插件  
 vue-cli:vue 脚手架  
 vue-resource(axios):ajax 请求  
 vue-router: 路由  
 vuex: 状态管理  
 vue-lazyload: 图片懒加载  
 vue-scroller: 页面滑动相关  
 mint-ui: 基于 vue 的 UI 组件库(移动端)  
 element-ui: 基于 vue 的 UI 组件库(PC 端)  
二、基本使用

1.  引入Vue.js
2.  创建Vue对象  
    el : 指定根element(选择器)  
    data : 初始化数据(页面可以访问)
3.  双向数据绑定 : v-model
4.  显示数据 : \{ \{xxx\}\}

<body>
    
    <div id="test">
      <input type="text" v-model="msg"><br>
      <input type="text" v-model="msg">
      <p>hello {
       {msg}}</p>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
          msg: 'atguigu'
        }
      })
    </script>
    </body>

在浏览器中安装Vue.js devtools插件。F12查看。  
5. 理解vue的mvvm实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]  
MVVM：  
 model：模型，数据对象（data）  
 view：视图，模板页面  
 viewModel：视图模型（vue的实例）

[https_vuejs.org]: https://vuejs.org/
[https_cn.vuejs.org]: https://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]: /images/20220130/fa5e524397414914a167bcf7ee1c25c9.png