vue (一)

vue是什么?

中文官网:https://cn.vuejs.org/

渐进式javaScript

渐进式:vue全家桶其实包含甚多的vue的扩展插件

vue :核心库

vue-cli:vue脚手架

vue-resource:ajax请求(axios)

 vue-router：路由

 vuex：状态管理

 element-ui：基于vue的组件库

     你可以一步一步有阶段性地来使用vue，如果是简单应用，只需要一个核心库就可以，100KB左右。复杂应用可以按需加载各种各样的插件，这就是渐进式。

     React：组件化和虚拟DOM技术

     Angular：模板和数据绑定技术

    vue的特点：

      1.遵循MVVM模式，无需操作DOM来更新视图。（我们只需要关心如何获取数据，如何处理数据，将处理好的数据交给vue，Vue会自动将数据渲染到页面中）

      2.编码简洁 体积小，运行效率高

      3.可以轻松引入一些第三方库和vue插件。

 1.下载安装：

      第一种：传统的引入方式，下载vue.js文件，在页面中引入

      第二种：使用vue-cli脚手架导入使用。（后面再学习）

      前期学习以第一种方式为主。

      cdn：https://www.bootcdn.cn/vue/2.6.14/

 2.将vue.js引入到当前页面

 3.创建vue实例对象。

 4.指定vue实例对象的控制区域

 5.指定vue实例对象的配置信息

el的作用：控制区域是哪个 告诉vue的实例对象，将页面中的哪一块区域作为模板页面进行解析。

     模板页面：HTML+JS组成的

 <div id="app">
     <!-- hello,{{10+20}} -->
     <input type="text" v-model="msg">
     {{msg}}
   </div>
   <div id="dd">
     <input type="text" v-model="msg">
     {{msg}}
   </div>
  <script src="vue.js"></script>
  <script>
   var  vm = new Vue({
      // el的值 可以是css选择器，也可以是元素节点
      // el:document.getElementById("app")
      // 控制区域是哪个
      el:"#app",
      //为模板页面提供数据
      data:{
        msg:"芜湖起飞"
      }
    });
    var vm = new Vue({ 
      el:"#dd",
      data:{
        msg:"小米"
      }
    })
  </script>

js以什么形式（语法）存在呢？

      · 指令：vue自定义的标签属性  例如:v-model

      · 插值表达式：动态显示数据。只能写在文本标签的内部。 例如：{{}}