[JavaScript知识库] VUE简解

Vue

核心：数据驱动，组件化

优点：借鉴了AngulaJS的模块开发和React的虚拟Dom，虚拟Dom就是把Dom操作放到内存中执行；

常用的属性：

?????? v-if：指令是根据表达式中的值（true或者false）来决定是否插入该元素

?????? v-else-if: 用作 v-if 的 else-if 块。可以链式的多次使用：

?????? v-else: 可以用 v-else 指令给 v-if 添加一个 "else" 块：

<!DOCTYPE html>

<html lang="en">

<head>

? ?<meta charset="UTF-8">

? ?<title>Title</title>

</head>

<body>

<!--view层 模板-->

<div id="app">

? <div v-if="type==='A'">A</div>

? <div v-else-if="type==='B'">B</div>

? <div v-else-if="type==='C'">C</div>

? <div v-else>A/B/C</div>

</div>

?

<!--1.导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

? ?var vm=new Vue({

? ? ? ?el:"#app",

? ? ? ?//Model:数据

? ? ? ?data:{

? ? ? ? ? ?type:'A'

? ? ? }

? });

</script>

</body>

</html>

?

<!--v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

这三种指令跟java中的if...else if....else 使用方法差不多

-->

?

?????? v-for：循环指令

?????? 需要以item in items形式的特殊写法，items是数据数组迭代的别名

?????? v-for可以绑定数据到数组渲染一个列表：

<!--view层 模板-->

<div id="app">

? ?<li v-for="item in items">

? ? ? {{item.message}}

? ?</li>

</div>

<!--1.导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

?var vm=new Vue({

? ?el:"#app",

? ?//Model:数据

? ?data:{

? ? ? ?items:[

? ? ? ? {message:'java'},

? ? ? ? {message:'mysql'},

? ? ? ? {message:'mybatis'},

? ? ? ? {message:'springmvc'}

? ? ? ]

? }

});

</script>

?????? v-on ：绑定事件，简写@ （事件处理器）

????????????? ?????? v-on可以接收一个定义的方法来调用?????

<div id="app">

<!--sayHi是下面定义方法的别名-->

<button v-on:click="sayHi">click Me</button>

</div>

?<form v-on:submit.prevent="onSubmit"></form>

?<a v-on:click.stop.prevent="doThat"></a>

?<form v-on:submit.prevent></form>

?<div v-on:click.capture="doThis"></div>

?<div v-on:click.self="doThat"></div>

?<a v-on:click.once="doThis"></a> -->

?????? v-model：数据双向绑定，会根据控件类型自动选取正确的方法更新元素

<div id="app">

<!-- ? 输入的文本： <input type="text" v-model="message"> {{message}}-->

<!-- ? 性别：-->

<!-- <input type="radio" name="sex" value="男" v-model="pl">男-->

<!-- <input type="radio" name="sex" value="女" v-model="pl">女-->

<!-- 选中的性别：{{pl}}-->

下拉框：

?<select v-model="pl">

? ?<option value="" disabled>--请选择--</option>

? ?<option>A</option>

? ?<option>B</option>

? ?<option>C</option>

?</select>

?<span>value:{{pl}}</span>

</div>

<!--1.导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

?var vm=new Vue({

? ?el:"#app",

? ?//Model:数据

? ?data:{

? ? ?message:'收java',

? ? ?pl:''

? },

?

});

?????? v-bind：给组件绑定参数，简写 ：

??????

<div id="app">

? ?<!--组件：传递给组件中的值：props-->

? ?<pl v-for="item in items" v-bind:title="item"></pl>

</div>

?

<!--1.导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

? ?//component 定义一个Vue组件

? ?Vue.component("pl", {

? ? ? ?props:['title'],

? ? ? ?template: '<li>{{title}}</li>'

? })

?

? ?var vm = new Vue({

? ? ? ?el: "#app",

? ? ? ?//Model:数据

? ? ? ?data: {

? ? ? ? ? ?items:["java","前端","Vue"]

? ? ? },

?

? });·

组件化：

?????? 组合组件???? slot插槽

?????? 组件内部绑定事件需要使用到 this.$emit("事件名，参数")；

?????? 计算属性的特色，缓存计算数据

遵循SOC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信

Vue：Axios异步通信

什么是Axios?

?????? Axios是一个开源的可以用在浏览器和NodeJs的异步通信框架，主要作用是实现ajax异步通信??? ，其功能和特点如下：

?????? ?????? · 从浏览器中创建XMlHttpRequests（异步请求）

?????? ?????? ·从node.js创建http请求

?????? ?????? ·支持Promise Api 【Js中链式编程】

?????? ?????? ·拦截请求和响应

?????? ?????? ·转换请求数据和响应数据

?????? ?????? ·取消请求

?????? ?????? ·自动转换JSON数据

?????? ?????? ·客户端支持防御XSRF（跨站??? 请求伪造）

[JavaScript知识库]VUE简解

Vue