前言
本文为Vue框架基础知识、语法与使用介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
一、MVVM模式的实现者
Model:模型层，这里标识JavaScript对象
View:视图层，在这里表示DOM（HTML操作的元素）
ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
注意：
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--视图层DOM--> <div id="app"> <!--拿到数据data--> { {message} } </div> <!-- ViewModel在浏览器端显示 ViewModel连接视图和数据的中间件 ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新 ViewModel 能够监听到视图的变化，并能够通知数据发生改变 Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script> <script> var vm = new Vue({ /*元素，这就绑定了div里面的元素*/ el:"#app", /*data交给前端*/ <!--Model模型层，控制视图层--> data:{ message:"hello vue" } }); </script> </body> </html>
二、Vue的7个属性
el： data：将视图层的数据抽象出来存放在data中 template：用来设置模板 methods：放置页面中的业务逻辑，js方法一般放置在methods中 render：创建真正的Virtual Dom computed：用来计算 watch： watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值
三、Vue基本语法
<span>标签属性 v-bind:title="message"：鼠标悬停显示文字 判断-循环 v-if、v-else、v-else-if 如： <h1 v-if="ok"> Yes </h1> v-for 如： <li v-for="item in items"> { {item.message} } </li>
四、Vue绑定事件
- v-on属性可以监听事件
- 如：v-on:事件=“xxxx”
<script> var vm = new Vue({ el:"#app", data:{ message:"吴吉凯" }, methods:{ //方法必须定义在Vue的Methods对象中 sayHi:function (event) { alert(this.message) } } }); </script> <div id="app"> <button v-on:click="sayHi"></button> </div>
五、Vue双向绑定
- 可以用 v-model 指令在表单 < input>、< textarea> 及 < select>
元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
<div id="app"> 输入的文本为：<input type="text" v-model="message"> //把数据取出来 { {message} } </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script> <script> var vm = new Vue({ /*元素，这就绑定了div里面的元素*/ el:"#app", /*data交给前端*/ <!--Model模型层，控制视图层--> data:{ message:"123" } }); </script>
<!-- 单选框--> 性别： <input type="radio" name="sex" value="男" v-model="checked">男 <input type="radio" name="sex" value="女" v-model="checked">女 <p> 选中了谁{ {checked} } </p> <!-- 下拉框--> <select name="" id="" v-model="selected"> <option value="" disabled>---请选择---</option> <option>A</option> <option>B</option> <option>C</option> </select> <span> Value:{ {selected} } </span>
六、Vue组件(可复用的模板)
//定义一个vue组件 Vue.component("qingjia",{ props:['qin'], template:'<li>{ {qin} }</li>' }); var vm = new Vue({ el:"#app", data:{ items:["java","Linux","前端"] } }); <!-- 用v-for遍历 使用v-bind绑定组件qin和遍历的名称item --> <qingjia v-for="item in items" v-bind:qin="item"></qingjia>
七、Axios异步通信
- 用在浏览器端和NodeJS的异步通信，主要实现AJAX异步通信
// 使用：npm install axios 导入axios的包 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
八、Vue的生命周期
- 创建–>初始化数据–>编译模板–>挂载DOM–>渲染–>更新–>渲染、卸载
<div id="app"> <div> { {info.name} } { {info.address.city} } <a v-bind:herf="info.url"></a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var vm = new Vue({ el:"#app", //钩子函数 //这个data是个方法 data(){ return{ //请求的返回参数必须和json字符串一样 info:{ name:null, address:{ street:null, city:null }, url:null } } }, mounted(){ //通信交给下面这个地方可以改成ajax axios.get('data.json').then(response=>(this.info=response.data)) } }); </script>
九、计算属性
计算出来的结果保存在属性中，内存中运行：虚拟DOM
计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性
其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！
<div id="app"> <p>{ {currentTime1()} }</p> <p>{ {currentTime2} }</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script> <script> var vm = new Vue({ el:”#app”, data:{ message:”hello” }, methods: { currentTime1:function () { return Date.now();//返回当前时间戳 } }, computed:{//计算属性 currentTime2:function () { return Date.now();//返回当前时间戳 } } }); </script>
注意：
methods 和 computed 里的东西不能重名
说明：
methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
十、插槽solt
- 在 Vue 中我们使用 元素，作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中
<div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script> <script> // 定义一个待办事项的组件 //插槽 Vue.component(‘todo’, { template: ‘<div>\ <slot name="todo-title"></slot>\ <ul>\ <solt name="todo-items"></solt>\ </ul>\ </div>‘ }); Vue.component(“todo-title”,{ props: [‘title’], template: ‘<div>{ {title} }</div>‘ }); Vue.component(“todo-items”,{ props: [‘item’], template: ‘<li>{ {item} }</li>‘ }); var vm = new Vue({ el:”#app”, data:{ title:’kaungshen’, todoItems:[‘狂神说’,’java’] } }); </script>
后记
本文下接：【Vue】Java后端程序员也必须掌握的前端框架（下）
Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
