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>
<!--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'
},
methods:{//方法必须定义在Vue 的method对象中,v-on:事件
sayHi:function (event){
alert(this.message)
}
}
});
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<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>
<!-- click 事件只能点击一次-->
<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（跨站 请求伪造）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
