.下载和引入 vue.js 文件。
编写入门程序。
视图：负责页面渲染，主要由 HTML+CSS 构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑
举个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- 视图 --> <body> <div id="div"> {{msg}} </div> </body> <script src="js/vue.js"></script> <!-- 脚本 --> <script> new Vue({ el:("#div"), data:{ msg:"hello vue" } }) </script> </html>Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的
vue中的获取元素:this.$refs["xxx"]
选项列表
el 选项：用于接收获取到页面中的元素。data 选项：用于保存当前 Vue 对象中的数据。methods 选项：用于定义方法。数据绑定
在视图部分获取脚本部分的数据。
{{变量名}}
带有v-前缀的特殊属性,不同指令具有不同的意义
使用指令时,通常编写在标签的属性上,值可以使用js表达式
常用指令
指令作用v-html把文本解析为HTML代码,可以解析标签v-bind为html标签绑定属性v-if条件性的渲染某元素，判定为true时渲染,否则不渲染v-else同上v-else-if同上v-show根据条件展示某元素，区别在于切换的是display属性的值v-for列表渲染,遍历容器的元素或者对象的属性v-on为html绑定事件v-model在表单元素上创建双向绑定v-model表单绑定
v-model：在表单元素上创建双向数据绑定。双向数据绑定
更新 data 数据，页面中的数据也会更新。更新页面数据，data 数据也会更新MVVM模型(Model View ViewModel)：是 MVC 模式的改进版
在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。基本指令例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div"> <!-- 1.文本插值 --> <div> <!-- 1.1 {{}} --> <span>{{name1}}</span> <hr> <!-- 1.2 v-html --> <span v-html="name2"></span> <hr> <!-- 绑定属性 --> <a v-bind:href="url1" v-html="url1"></a><br> <a :href="url2" v-html="url2"></a><br> <hr> <!-- 条件渲染 --> <ul> <li v-if="nums > 1">li1</li> <li v-else-if="nums > 2">li2</li> <li v-else-if="nums > 4">li4</li> <li v-else="nums > 3">li3</li> </ul> <hr> <!-- 列表渲染 --> <ul> <li v-for="hobby in bobbies"> {{hobby}} </li> </ul> <hr> <!-- 事件的绑定 --> <!-- 方式一 --> <button v-on:click="change()">点我更改文本内容</button> <!-- 方式二 --> <button @click="exchange()">点我更改文本内容</button> <!-- 不知道原理,不使用 --> <!-- <button :click="exchange()">点我更改文本内容</button> --> <hr> <!-- 表单绑定:在表单元素上创建双向数据绑定<br> 双向数据绑定:更新 data 数据，页面中的数据也会更新。 更新页面数据，data 数据也会更新。 --> <form> 年龄:<input type="text" name="=username" v-model="age"> </form> </div> </div> </body> <script src="../js/vue.js"></script> <script> new Vue({ el:"#div", data:{ name1:"美食家老八", name2:"东北腰子姐", url1:"https://www.baidu.com", url2:"https://www.bilibili.com", nums:3, bobbies:[ "吃饭", "睡觉", "打豆豆" ], age:"三十有二" }, methods:{ //定义方法方式一 change(){ this.name1="嘿嘿,来了" }, //定义方法方式二 exchange:function(){ this.name2="来了老弟!!!" } } }) </script> </html>拷贝data时需注意data函数中return语句返回的对象 方法直接拷贝methods 注意prop属性值的来源 表格中 1. 指定表格对象data，他指定一个数组 2. 它里面的prop属性指定每一个行的属性名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-row { /* 行距为20px */ margin-bottom: 20px; } .bg-purple-dark { background: red; } .bg-purple { background: blue; } .bg-purple-light { background: green; } .grid-content { /* 边框圆润度 */ border-radius: 4px; /* 行高为36px */ min-height: 36px; } </style> </head> <body> <div id="div"> <el-button type="primary" plain>主要按钮</el-button><br> <el-link type="danger">危险链接</el-link><br> <div class="demo-input-suffix"> 属性方式： <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input> <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"> </el-input> </div> <div class="demo-input-suffix"> <div class="block"> <span class="demonstration">默认不区分颜色</span> <el-rate v-model="value1"></el-rate> </div> <div class="block"> <span class="demonstration">区分颜色</span> <el-rate v-model="value2" :colors="colors"> </el-rate> </div> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> </body> <script> new Vue({ el:"#div" }) </script> </html>Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 })
生命周期：核心八个阶段 beforeCreate：创建前 created：创建后 beforeMount：载入前 mounted：载入后 beforeUpdate：更新前 updated：更新后 beforeDestroy：销毁前 destroyed：销毁后
get(请求的资源路径与请求的参数) 发起GET方式请求 post(请求的资源路径,请求的参数) 发起POST方式请求 then(response) 请求成功后的回调函数，通过response获取响应的数据 catch(error) 请求失败后的回调函数，通过error获取错误信息
举个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步操作</title> <script src="js/vue.js"></script> <script src="js/axios-0.18.0.js"></script> </head> <body> <div id="div"> {{name}} <button @click="send()">发起请求</button> </div> </body> <script> new Vue({ el:"#div", data:{ name:"张三" }, methods:{ send(){ // GET方式请求 // axios.get("testServlet?name=" + this.name) // .then(resp => { // alert(resp.data); // }) // .catch(error => { // alert(error); // }) // POST方式请求,假装有这个servlet处理后,返回响应数据 axios.post("testServlet","name="+this.name) //请求成功后的回调函数，通过response获取响应的数据 .then(resp => { alert(resp.data); }) //请求失败后的回调函数，通过error获取错误信息 .catch(error => { alert(error); }) } } }); </script> </html>