Vue是国内大神开发的前端框架,为了解决减少开发中DOM操作,提交渲染效率,所以通过api操作,不需要操作DOM,so提高了我们开发的效率,更多时间关注业务逻辑...
后端主要是由MVC,而前端是MVVM ,M:保存页面的单独数据 V:每个页面的HTML VM:调度数据,也就是M和V的桥梁
安装
https://cn.vuejs.org/v2/guide/installation.html
方式一:CDN引入,直接请求别人服务器的js文件
方式二:直接下载js包安装,
方式三:npm安装
第一个程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <div></div> <body> <!-- 当有id进行管理 --> <div id="app">{{message}}</div> <!-- 没有通过实例id进行管理 --> <!-- <div>{{message}}</div> --> <!-- 引入vuejs文件 --> <script src="../vue.js"></script> <script> const app = new Vue({ // el这个实例负责管理，用于挂载元素 el:'#app', //data这个实例用于定义数据 data:{ message:'helloworld' }, methods:{ changedata:function(){ this.message += '数据变了' } } }) //这里调用app实例的changedata成功修改数据 app.changedata() </script> </body> </html>
options
上面我看到el,data,methods这都是创建Vue实例的时候,传入了一个对象的options
el:类型string | HTMLElement 主要是接管div到属性：只能接管一个div，所有需要vue处理，必须写在一个div里面
data:类型object | funciton 存放数据
methods:类型 {[key:string]:function} 它定义属于vue的一些方法,可以在其他地方调用,也可以在指令中使用