Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [6] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(So C关注度分离原则),不仅易于上手,还便于与第三方库或既有项目整合。
特点:
-
易用:在有HTML,CSS,JavaScript的基础上,快速上手。
-
灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
-
性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
-
vue是双向绑定。
v-bind
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</div>
<!--1.导入Vue. js-->
<script src="https://cdn . jsdelivr . net/npm/vue@2.5.21/dist/vue .min.js"></script>
<script>
var vm = new Vue({
el: "#app"
//Model:数据
data:{
message: "hello,vue1!"
});
</script>
if:vue-If
<div id="vue">
<h1 v-if="type===A" >YES</h1>
<h1 v-else-if="type===B">B</h1>
<h1 v-else>N0</h1>
</div>
<script src="https ://cdn. jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new vue({
el: ' #vue',
data: {
ok: true
}
});
</script>
for循环:vue-for
<div id="vue">
<li v-forn"item in items">
{{ item.message }}
</1i>
</div>
<script type="text/javascript">
var vm = new vue({
el:'#vue' ,
data: {
//items数组
items:[
{message: "Java'},
{message: " 前端'}
]
}
}
});
</script>
vue绑定事件v-on
<div 1d="app">
<button v-on:click="sayHi" >c1ick Me</button>
</div>
<1--1.导入Vue. js-->
<script src="https ://cdn. jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var Vvm = new Vue({
el: "#app" ,
data:
message: "Java"
},
methods: { //方法必须定义IEVue的Methods对象中,v-on:事件
sayHi: function (event) {
alert(this . message);
}
}
});
</script>
vue双向绑定表单
<div id="app">
下拉框:
<select v-model="selected">
<option value="" disabled>-- 请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<!--<input type="text" v-model="message">{{message}}</input>-->
<span>value:{{se1ected}}</span>
</div>
<1--1. 9入Vue.js-->
<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:message
selected: ''
}
});
: </script>
vue组件讲解
<1--view层 模板-->
<div id=" app">
<wang v-for="jie in items" v-bind:jie="item"> </wang>
</div>
<1--1.9入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
<!--定义一个Vue组件Component-->
<!--
Vue.component():注册组件
my-component-li:自定义组件名字
templates:组建的模板
props:属性传递参数
-->
Vue.component("wang",{
props:['jie'],
template:'<l1>{{jie}}</l1>'
});
var Vm = new Vue({
el: "#app"
data:{
items:["java","linux"]
}
});
</script>
Axios异步通信
网络通信:
- jQuery-ajax
- Axios
Axios 是一个开源的可以用在浏览器和 node.js 中的异步通信框架,是一个基于 promise 的 HTTP 库,其主要作用就是实现AJAX异步通信。
特性:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
Axios测试
data.json
{
"name": “Java" ,
"ur1": "https://blog. kuangstudy.com
"page": 1,
"isNonProfit": true,
"addres": {
"street" :
含光门",
"city":“陕西西安",
"country":“中国"
},
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-clock:解决闪烁问题-->
<style>
[v-clock]{
display: none;
</sty1ey
</head>
<body>
<div id="vue" v-clock>
<div>{finfo. name}}</div>
<div>{info.address.street}}</div>
<a v-bind:href="info.url"></a>
</div>
<!1--5/入Js文件-->
<script src="https://cdn. jsdelivr. net/np /vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg. com/axios/dist/axios.min.js"></script>
<script type= "text/javascript">
var Vw = new Vue((
el: '#vue',
//data: 属性: vm
data(){
return{
// 请求的近问多最合远。必须和json字符中一样
info:{
name: null,
address: {
street:null,
ctity:null,
country:null
},
url:null
}
}
},
mounted(){
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
计算属性
计算属性:计算出来的结果,保存在属性中,内存中运行:虚拟Dom
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到。
所以,对于任何复杂逻辑,你都应当使用计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层模权-->
<div id=" app">
<p>currentTime1 {{currentTime1()}}</p>
<p>currentTime2 ({currentTime2}}</p>
</div>
<1--1.乐入Vue.js-->
<script srcu"https://cdn. jsdelivr .net/ npm/vue@2.5.21/dist/vue. min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,kuangshen"
},
methods: {
currentTime1: function () (
return Date.now(); //返回一个时间戳
}
},
computed: {//计算属性:methods,computed方法不能重名,重名之后,只会调用methods的方法
currentTime2: function () {
this .message;
return Date.now(); //返回一个时间戳
}
}
}),
</script>
</body>
</html>
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这.-点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
侦听属性
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
除了 watch
选项之外,您还可以使用命令式的 vm.$watch API。
上述详细的例子:https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95
插槽slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<1--view层 模板--> .
<div 1d=" app">
<todo>
<todo-title slot="todo-title" :title-"title"></todo-title>
<todo- items slot-"todo-items" V-for="item in todoItems" :item="item" ></todo items>
</todo>
</div>
<1--1. 9入Vue.js-->
<script src="https ://cdn.jsdeivr .net/ npm/vue@2.5.21/d1st/vue . min.js" ></script>
<script>
//slot:插槽
Vue . component("todo",{
template: '<div>\
<slot name="todo-title" ></slot>\
<ul>
<slot name="todo- items" ></slot>\
</ul>\
</div>
});
Vue. component("todo-title",{
props: ['title'],
template: ' <div>{{tit1e}}</div>'
});
Vue.component ("todo- items",{
props: [ 'item'],
template: *<li>{{item}}</1i>'
});
varvvm=new Vue({
el:"#app",
data:{
title:"solt"
todoItems:["java","linux"]
}
});
</script>
</body>
</html>
自定义事件内容分发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<1--view层 模板--> .
<div 1d=" app">
<todo>
<todo-title slot="todo-title" :title-"title"></todo-title>
<todo-items slot="todo- items" V- for="(item, index) in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"><todo-items/>
</todo>
</div>
<1--1. 9入Vue.js-->
<script src="https ://cdn.jsdeivr .net/ npm/vue@2.5.21/d1st/vue . min.js" ></script>
<script>
//slot:插槽
Vue . component("todo",{
template: '<div>\
<slot name="todo-title" ></slot>\
<ul>
<slot name="todo- items" ></slot>\
</ul>\
</div>
});
Vue . component( "todo- items
props: ['item' , 'index'],
//.只能绵定当前组件的方法
template:'<li>{{index}}---{{item}} <button @click=" remove" >删除</button></1i> ',
methods: {
remove: function (index) {
// this.$emit 自定义事件分发
this. $emit( ' remove ' , index);
}
}
});
varvvm=new Vue({
el:"#app",
data:{
title:"solt"
todoItems:["java","linux"]
}
methods:{
removeItems:function (index) {
this.todoItems.splice(index,1); //-次删除“个元者
}
});
</script>
</body>
</html>
v-on绑定事件,简写成@
v-model数据双向绑定
v-bind给组件绑定参数,简写:
如果想要详细的学习Vue及其相关的知识,个人建议还是去官网:
https://cn.vuejs.org/v2/guide/