vue学习

Posted 2021-02-12 tjp40922

一.Vue.js 是什么

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

二.Vue入手以及基本语法

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();  //注意Vue第一个字母大写
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
     el:"#app",        //指定容易,要控制哪一个标签作为容器         
     data: {          //数据,传到页面的数据,和页面的数据双向绑定
         数据变量:"变量值",
         数据变量:"变量值",
         数据变量:"变量值",
     },
   });
   
   el:设置vue可以操作的html内容范围，值就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

三.Vue.js的M-V-VM思想

1. MVVM就是Model-View-ViewModel的缩写,他是基于前端框架的开发思想

2. Model指代的是vm对象的data里面的数据,这里的数据要显示到页面中

3. view指代就是Vue中数据要显示到HTMl页面中,在Vue中也成为视图模板

4. ViewModel指代的是我们编写的vm对象了,他是Vue.js的核心,负责连接View和MOdel保证视图和数据的一致性 ,
所以在前面代码中,data的数据被显示中的p标签就是vm对象自动完成的