vue简介:
- 动态构建用户界面的渐进式JavaScript框架。
vue的特点:
- 遵循MVVVM模式
- 编辑简洁,体积小,运行效率高,适合移动/PC端开发
- 它只关注UI,可以引入其它第三方开发项目
与其它JS框架的关联:
- 借鉴Angular的模板和数据绑定技术
- 借鉴Reatc的组件化和虚拟DOM 技术
vue周边库:
- vue-cli:vue脚手架
- vue-resource
- axios
- xue-router:路由
- vuex:状态管理
- element-ui:基于vue的UI组件库
MVVM模型:
- M:模型(Model),data中的数据
- V:视图(View),模板代码
- VM:视图模型(ViewMode),Vue实例
<body>
<div id="app">
<!-- {{}}为输出某个变量的值 -->
<p>{{msg}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
new Vue ({
el:"#app",//找到某个盒子,并把他交给vue管理。值一般用id选择器
data: {//vue里放数据的地方,可以输出这个变量的值
msg:'生气'
}
})
</script>
</body>
v-on的使用:
- 使用v-on:xxx或@xxx绑定事件,其中xxx是事件名
- 事件的回调需要配置在methods对象中,最终会在vm上
- methods中配置的函数,==不要用箭头函数!==否则this就不是vm了
- methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象
- @click="demo和@click="demo($event)"效果一致,但后者可以传参
<body>
<div id="app">
<!-- 点击显示 -->
<button v-on:click="fn1">点我啊</button>
<!-- 双击显示 -->
<button v-on:dblclick="fn2">芜湖</button>
<!-- 移动显示 -->
<button v-on:mouseenter="fn3">靓仔</button>
<h1>以下是简写</h1>
<button @click="fn1">点我啊</button>
<button @dblclick="fn2">芜湖</button>
<button @mouseenter="fn3">靓仔</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
methods: {
fn1(){
alert('你干嘛...哎呦')
},
fn2(){
alert('起飞')
},
fn3(){
alert('吊毛')
}
}
})
</script>
</body>
v-show:
- 本质上就是标签display设置为none,控制隐藏,只是基于css进行切换
- v-show有更高的初始值切换
- v-sho适合频繁的切换
<body>
<div id="app">
<!-- 火锅,下馆子,辣条 -->
<h3>根据班长有多少钱,决定中午吃什么</h3>
<div v-show="money >=10000">海鲜</div>
<div v-show="money >=5000">火锅</div>
<div v-show="money >=1000">下馆子</div>
<div v-show="money >=100">辣条</div>
<div v-show>吃土</div>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
money:8000,
}
})
</script>
</body>
v-if:
- 动态的向DOM树内添加或删除DOM元素
- v-if有更高的消耗切换
- v-if适合运行条件很少改变的情况
<body>
<div id="app">
<!-- 多分支 -->
<h3>根据班长有多少钱,决定中午吃什么</h3>
<div v-if="money >=10000">海鲜</div>
<div v-else-if="money >=5000">火锅</div>
<div v-else-if="money >=1000">下馆子</div>
<div v-else-if="money >=100">辣条</div>
<div v-else>吃土</div>
<!-- 火锅 -->
<hr>
<!-- 双分支 -->
<div v-if="age >=18">去网吧通宵</div>
<div v-else>回家种田</div>
<!-- 去网吧通宵 -->
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
money:8000,
age:23
}
})
</script>
</body>
v-for的使用:
- v-for用于遍历某个数组或对象
- 使用v-for时需要注意,由于v-for会尝试最大限度的使用复数元素,导致绑定错乱,这是可以在v-for后面加上key属性,key绑定这个数据的唯一值(一般为id)
<body>
<div id="app">
<!-- 在数组下标为1的位置添加元素 -->
<button @click="list.splice(1,0,{id:4,name:'老六'})">添加</button>
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox">
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data :{
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
]
}
})
</script>
</body>
修饰符:
- 修饰符 (Modifiers): 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
常见的修饰符有:
- lazy:不会即时把输入框中的内容添加到data中
- trim:屏蔽空格
- number:把string字符转换成number数字
侦听器:
- 作用:由于侦听数据有没有发生变化,一旦有变化就调用函数
- 语法:在和data,methods这些平级位置写一个watch
侦听器的基本使用:
- newValue:变化后的数据
- oldValue:变化之前的数据
侦听器在对象中的使用:
- 普通写法侦听不到对象内部属性的变化,只能侦听到对象指向的变化
- 如果想要侦听到对象里属性的变化,可以在对象名添加引号
- 如果希望侦听到对象里所有属性的变化,就要开启深度监听(deep:true)
- 让页面一打开就立即调用handler函数,true表示立即调用(immediate:true)
侦听器在数组中的使用:
- 彻底替换成一个新数组,那么可以侦听到
- 如果使用push()等标准的数组操作方法,那么可以被侦听到
- 如果直接修改数组的元素,那么无法被侦听到
<!--
【对数组进行侦听】
数组是引用类型,存在比较复杂的侦听规则。
从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新元素,都不会修改数组数组本身的地址。
为此,Vue.js对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如: vm.items[indexOdItem] = newValue。
b.当你修改数组的长度时,例如: vm.items.length = newLength
2.使用标准方法修改数组可以被侦听到
push() 尾部添加
pop() 尾部删除
unshift() 头部添加
shift() 头部删除
splice() 删除、添加、替换
sort() 排序
reverse() 逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发属视图更新,以上就是被包裹的方法。)
-->
<div id="app">
<button @click="list.push('电王')">添加</button>
<button @click="list.pop()">删除</button>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue ({
el:'#app',
data: {
list:['空我','亚极陀','响鬼','甲斗']
},
watch: {
//复杂数据类型,这两个参数没有意义,因为地址没有变。
//所以复杂类型中,一般不会写这两个参数,因为这两个参数的值是一样的,所以写一个就行了
list(newValue,oldValue){
console.log('数组改变了',newValue,oldValue);
}
}
})
</script>
事件对象:
<script>
// 用户界面事件:涉及与BOM交互的通用浏览器事件
// load事件:在整个页面(包括所有外部资源如图片,JavaScript文件和css文件)加载完成后触发
window.onload = function(){
alert("页面加载完成")
};
// 焦点事件:在元素获得或失去焦点时触发事件
window.onfocus = function(){
alert("获得焦点");
}
window.onblur = function(){
alert("失去焦点");
}
// 鼠标事件:使用鼠标在页面上执行某些操作时触发的事件
window.onclick = function(){
alert("鼠标点击");
}
// 滚轮事件:使用鼠标滚轮时触发的事件
window.onwheel = function(){
alert("滚轮")
}
// 输入事件:向文档中输入文本时触发的事件
window.oninput = function(){
alert("输入")
}
// 键盘事件:使用键盘在页面上执行某些操作时触发的事件
window.onkeydown = function(){
alert("按下键盘");
}
</script>
事件修饰符:
<!--
事件修饰符
event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡
以上方法需要处理DOM事件细节,代码繁琐
为了解决这个问题,Vue.js提供了事件修饰符
修饰符是点开头的指令后缀来表示的
-->
<!-- .stop阻止冒泡事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- .self当事件目标是当前元素自身时,触发事件 -->
<ul @click.self="ulclick"></ul>
<!-- .caputer将原本默认的冒泡方式改为捕捉方式 -->
<!-- .prevent阻止事件默认行为 -->
<!-- @submit.prevent提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- .stop.prevent修饰符可以串联,即阻止事件冒泡,有阻止默认行为 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
计算属性:
- 可以在里面可以写一些计算逻辑的属性
- 它不像普通函数那样直接返回结果,而是经过一系列计算之后在返回结果
- 同时只要在它当中应用了data中的某个属性,当这个属性发生变化时,计算属性可以探嗅到这些变化,并自动执行
- 定义:要用的属性不存在,通过已有的计算属性计算得来
- 使用:在computer对象中定义计算属性,在页面中使用{{方法名}}
计算属性的缓存特性:
- 第一次调用计算属性时,会产生一个结果,这个结果会被缓存起来,后面每次用这个属性都会从缓存里取
- 当它的依赖项发生改变,会重新计算得到一个结果,再缓存起来
计算属性的基本使用:
<div id="app">
<p>原始字符串:{{message}}</p>
<p>计算反转后的字符串:{{reverseMessage}}</p>
<p>将字符串转换成小写:{{toLowerCase}}</p>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message:'ABCDEFG'
},
computed:{
// 计算反转后的字符串
reverseMessage:function(){
// split()//把一个字符串分割成字符串数组
// reverse()//颠倒数组中元素的排序
// join()//把数组中的所有元素转换为一个字符串
return this.message.split('').reverse('').join('')
},
toLowerCase(){
// substring(from,to)提取字符串中介于两个指定下标之间的字符
// toLowerCase()用于把字符串转换为小写
// return this.message.substring(0.7).toLowerCase('')
return this.message.substring(0,1).toLowerCase('')
}
}
})
</script>
<div id="app">
姓:<input type="text" v-model="lastName"> <br><br>
名:<input type="text" v-model="fristName"> <br><br>
全名: <span>{{fullName}}</span><br><br>
<button @click="btn">修改计算属性的值</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
fristName:'俊杨',
lastName:'刘'
}
},
computed:{
fullName:{
// get:获取值时触发
// 当有人读取fullName时,get就会调用,且返回值就作为fullName的值
get(){
return this.lastName + '-' +this.fristName;
},
// set:设置值时触发
// 当计算属性被修改时,调用set
set(value){
console.log('set',value);
}
}
},
methods:{
btn(){
this.fristName = '英俊';
this.lastName = '胡'
}
}
})
</script>
以对象方式绑定style属性:
<div id="app">
<!-- 在行内属性书写样式 -->
<div style="color: red; font-size: 48px;">我是小黑子</div>
<!-- 把行内属性改造成对象,以对象方式绑定style属性 -->
<!-- 外部增加{},属性值改造成字符串,分号改造成逗号,属性名到对象名的改变 -->
<div v-bind:style="{color: 'yellow',fontSize: '48px'}">我是小黑子</div>
<!-- 把属性值改为变量 -->
<!-- 第一个color是样式名,第二个color是变量名,和data中的变量保持一致 -->
<div v-bind:style="{color: color,fontSize: fontSize}">我是小黑子</div>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
color:'blue',
fontSize:'96px'
}
})
</script>
以对象方式绑定class属性:
<div id="app">
<!-- 想要动态的设置class,也是给一个对象 -->
<!-- 属性名:就是类名 -->
<!-- 属性值:就是布尔值,如果为true,就代表有这个类名;false:就代表没有 -->
<div class="box" v-bind:class="{bg:isag}"></div>
<!-- 点击按钮改变颜色 -->
<button @click="fn" style="color:red;font-size: 24px;">我黄了</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
isag:false,
num:0
},
methods:{
fn:function(){
if (this.num==0) {
this.isag=true;
this.num=1;
}else{
this.isag=false;
this.num=0;
}
}
}
})
</script>
vue生命周期:
<div id="xsk">{{msg}}</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:"#xsk",
data: {
msg:'dsid'
},
// 组件实例被创建之初
beforeCreate() {
console.log('beforeCreate');
},
// 组件实例已经完全创建
created() {
console.log('created');
},
// 组件挂载之前
beforeMount() {
console.log('beforeMount');
},
// 组件挂载到实例上去之后
mounted() {
console.log('mounted');
},
// 组件数据发生变化更新之前
beforeUpdate() {
console.log('eforeUpdate');
},
// 组件数据更新之后
updated() {
console.log('updated');
},
// 组件实例销毁之前
beforeDestroy() {
console.log('beforeDestroy');
},
// 组件实例销毁之后
destroyed() {
console.log('destroyed');
}
})
</script>
v-bind:
<div id="app">
<a href="http://www.baidu.com">百度</a>
<a v-bind:href="url">淘宝</a>
<button @click="change" target="_blank">换小米</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue ({
el:'#app',
data : {
url:'http://www.taobao.com'
},
methods:{
change(){
this.url='http://xiaomi.com'
}
}
})
</script>
v-model:
<div id="app">
<button @click="msg='你好'">修改msg的值</button>
<input type="text" v-model="msg">
<p>{{msg}}</p>
<!-- v-model:获取表单元素或者设置表单元素的值 -->
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<input type="checkbox" v-model="chk">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
msg:'',
fruit:'',
chk:true
}
})
</script>
AXIOS:
- Axios是一个基于promise的网络请求库,可以用于浏览器和node.js
- 在终端使用npm install axios下载
axios发送POST请求:
<!-- AJAX发送post请求
1.实例化一个请求对象
2.调用open方法,设置请求方式和请求地址
3.设置请求头
4.设置请求完成后回调函数
5.发送请求 -->
<!-- get请求传递参数:直接在url地址后拼接,安全性不高
post请求传递参数:在send()方法里传递 -->
<script>
// 1.实例化一个请求对象
let xhr = new XMLHttpRequest
//2.调用open方法,传递请求方法以及请求地址
xhr.open('post','https://autumnfish.cn/api/user/register')
//3.设置请求头(固定语法,负责就可以了)
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//4.设置请求成功后的回调函数
xhr.onload = function () {
// console.log(xhr.response);
let jokes = JSON.parse(xhr.response)
console.log(jokes);
}
// 5.发送请求
// 请求格式:'key = value'
xhr.send('username=刘俊杨')
</script>
axios发送GET请求:
<!-- 1.实例化一个请求对象
2.调用open方法,设置请求方式和请求地址
3.设置请求完成后回调函数
4.调用send方法,完成请求 -->
<!-- get传递参数
语法:url?key=value
url? key1 = value1&key2 = value2&key3 = value3 -->
<script>
// 1.实例化一个请求对象
let xhr = new XMLHttpRequest
// 2.调用open方法,设置请求方式和请求地址
xhr.open('get',"https://autumnfish.cn/api/joke/list?num=10")
// 3.调用onload方法,设置请求完成后回调函数
xhr.onload = function() {
// console.log(xhr.response);
// xhr.response是服务器响应回来的内容
// JSON.pares方法是将相应回来的JSON对象转换为普通的js对象
let jokes = JSON.parse(xhr.response)
console.log(jokes);
}
// 4.调用send方法,完成请求
xhr.send()
</script>
</body>