目录
1.什么是Vue?
官网回答:是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.vue的实现原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
1. 引入vue.js
2. 创建Vue对象
el:指定根element(选择器)
data:初始化数据(页面可以访问)
3.双向数据绑定:v-model
4.显示数据:{{xxx}}
5.理解vue的mvvm实现原理
-->
<div id="app"> <!--view-->
<input type="text" v-model="username"/>
<p>hello {{username}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//创建vue实例
const vm = new Vue({//配置对象
el:'#app',//element:选择器
data:{// 数据(model)
username:'lin'
}
})
</script>
</body>
</html>
3.vue的语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--vue为声明式函数,只需声明调用就可以-->
<body>
<!--mvvm
1.模版的理解:
动态的HTML页面
包含哪一些js的语法代码
双大括号表达式
指令(以v-开头的自定义标签属性)
2.双括号表达式
语法:{{exp}}或{{{exp}}}
功能:向页面输入数据
可以调用对象方法
3.指令一:强制数据绑定
功能:指定变化的属性值
完整写法:
v-bind:xxx='yyy'//yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
4.指令二:绑定事件监听
功能:绑定指定事件名的回调函数
完整写法:v-on:click='xxx'
简洁写法:
@click='xxx'
-->
<div id="app">
<h2>1.双大括号表达式</h2>
<p>{{tex}}</p>
<!--转换为大写toUpperCase()-->
<p>{{tex.toUpperCase()}}</p>
<!--比较-->
<p v-text="msg"></p><!--context直接输出文本-->
<p v-html="msg"></p><!--innerhtml直接是网页超链接-->
<h2>2.指令一:强制数据绑定</h2>
<!--按html写-->
<img src="imgUrl"/>
<!--按vue方式写-->
<img v-bind:src="imgUrl"/>
<!--vue简写-->
<img :src="imgUrl"/>
<h2>3.指令二:强制事件监听</h2>
<button v-on:click="test">测试1</button>
<!--简写就变成了强制绑定,但是是强制监听才对,于是:号变成了@号-->
<!--<button v-on:click="test">测试2</button>-->
<button @click="test">测试2</button>
<!--灵活的vue,方法传递参数-->
<button @click="test2(abc)">测试3</button><!--显示未定义-->
<button @click="test2(msg)">测试4</button><!--显示msg的文本-->
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
//不同数据要用逗号隔开
tex:'i will back!!',
msg:'<a href="www.baidu.com">百度网址</a>',
imgUrl:'https://cn.vuejs.org/images/logo.png'
},
methods:{
//方法
test(){
alert('点我这个测试')
},
//随便起一个名字接受参数,也就是传参
test2(content){
alert(content)
}
}
})
</script>
</body>
</html>
4.vue的计算属性和监视
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算结果
2. 监视属性:
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时,回调函数自动调用,在函数内部进行计算
3.计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存,多次读取只执行一次getter计算
-->
<div id="demo">
姓:<input type="text" placeholder="First name" v-model="firstName"/><br /><!--一想到input就必须写入v-model-->
名:<input type="text" placeholder="last name" v-model="lastName"/><br />
姓名1(单向):<input type="text" placeholder="Full name" v-model="fullName1"/><br />
姓名2(单向):<input type="text" placeholder="Full name" v-model="fullName2"/><br />
姓名3(双向):<input type="text" placeholder="Full name" v-model="fullName3"/><br />
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//直接写new Vue也可以
const vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
//fullname1:'A B'
//初始为A B
fullName2:'A B'
},
//计算属性
computed:{
// 什么时候执行:初始化显示/相关的data属性数据发生改变
fullName1 (){//计算属性中的一个方法,方法的返回值作为属性值
//console.log(' 你干嘛 fullname1()')
//一步简化
return this.firstName + ' '+ this.lastName
//两步弱化
/*var add = this.firstName + ' '+ this.lastName
return add*/
},
//双向
fullName3:{
//1. 你定义的 2.你没有调用 3.但最终执行的
//2. 什么是时候调用?2.用来做什么
//回调函数 当需要读取当前属性值时回调,根据相关的数据计算并放回当前属性的值
get(){
return this.firstName + ' '+ this.lastName
},
//回调函数,监视当前属性值的变化,当前属性值发生改变回调,更新相关的属性数据
set(value){//value就是fullName3的最新属性值
//split截取,剩下的就是A和B在一个数组
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
//监视属性
watch:{//配置监视
firstName: function (value) {//监听firstname是否发生了变化
//console.log(this)//就是vm对象
this.fullName2 = value +' '+ this.lastName
}
}
})
//$监视 不知道去官网看API教程
//监听第一个
vm.$watch('lastName',function(value){
//更新funllName2
this.fullName2 = this.firstName + ' '+value
})
//总结:写两个监听来满足一个,还不如用计算computed属性
//split一般是指根据特定的分隔符将字符串分隔成一个数组.它是一个函数
</script>
</body>
</html>
5.vue的class和style的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
color:green;
}
</style>
</head>
<body>
<!--
1.理解
在应用界面中,某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定:class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3.style绑定
:style="{color:activeColor,fontSize:fontSize + 'px'}"
其中activColor/fontSize是data属性
-->
<div id="demo">
<h2>1. class绑定:class='xxx'</h2>
<!--xxx是字符串-->
<!--a是一个变量,当然也可以直接写标签器名字 但是主要这样就写死了-->
<!--<p class="cClass" :class="aClass">这是class绑定样式:xxx是字符串</p>-->
<p class="cClass" :class="a">这是class绑定样式:xxx是字符串</p>
<!--xxx是对象:当然也可以直接写标签器名字aClass:true,bClass:false 这里将true 和 false 替换成isA 和 isB
并且在#demo中设置isA和isB的值为布尔类型的值 ,点击按钮的时候在改变他的值
-->
<!--<p :class="{aClass:true,bClass:false}">这是class绑定样式:xxx是对象</p>-->
<p :class="{aClass:isA,bClass:isB}">这是class绑定样式:xxx是对象</p>
<!--xxx是数组:直接写标签名 也可以写变量 也可以写对象 这里使用的比较少 就不详细说明-->
<!--<p :class="['aClass','cClass']">这是class绑定样式:xxx是数组</p>-->
<p :class="[Aa]">这是class绑定样式:xxx是数组</p>
<!--2.style绑定-->
<h2>2.style绑定</h2>
<p :style="{color:activeColor,fontSize:fontSize + 'px'}">{color:activeColor,fontSize:fontSize + 'px'}</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>、
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
a:'aClass',
isA:true,
isB:false,
Aa:'aClass',
activeColor:'yellow',
fontSize:'20'
},
methods:{
update(){
this.a = 'bClass';//不能加,号的
this.isA = false;
this.isB = true;
this.Aa = 'cClass';
this.activeColor='bule';
this.fontSize=50
}
}
})
</script>
</body>
</html>
6.vue的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">
姓:<input type="text" placeholder="First name" v-model="firstName"/><br />
名:<input type="text" placeholder="last name" v-model="lastName"/><br />
姓名(单向):<input type="text" placeholder="Full name" v-model="fullName1"/><br />
姓名(单向):<input type="text" placeholder="Full name" v-model="fullName2"/><br />
姓名(双向):<input type="text" placeholder="Full name" v-model="fullName3"/>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
//1.属性计算
computed:{
//1.回1
//回调函数
fullName1(){
//this就是vm
return this.firstName + ' ' + this.lastName
},
//1.回2
//属性计算,利用get和set方法
fullName3:{
//1. 你定义的,2. 你没有调用 3 .但是执行了
//2.什么时候调用?2.用来做什么
//回调函数 当需要读取当前属性值时回调,根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + ' ' + this.lastName
},
set(value){
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
//2.监听属性(配置监视)firstName第一个
watch:{
//firstname发生了变化 value为变化的值
firstName:function(value){
//this就是vm
this.fullName2 = value + ' '+ this.lastName
}
}
})
//监听
vm.$watch('lastName',function(value){
//更新fullName2
this.fullName2 = this.firstName + ' ' + value
})
</script>
</body>
</html>
7.vue条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.条件渲染指令
v-if
v-else
v-show
2.比较v-if与v-show
如果频繁切换v-show比较好
-->
<div id="demo">
<h3 v-if="ok">成功了啊啊啊啊</h3><!--设置一个ok变量 在管理面板m设置状态-->
<h3 v-else>失败了</h3>
<!--这个是比较容易频繁使用的-->
<p v-show='ok'>表白成功</p>
<p v-show='!ok'>表白失败</p>
<!--给变量设置属性值就可以 :一般为Boolean-->
<button @click="ok=!ok">更新</button><!--取反操作 优化不用写属性-->
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
ok:true
}
})
</script>
</body>
</html>
8.vue列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染 常用</title>
</head>
<body>
<!--
1.列表显示
数组:v-for / index
对象:v-for / key
2.列表的数据更新
删除item
替换item
-->
<div id="demo">
<h2>测试:v-for 遍历数组 </h2>
<ol>
<li v-for="(p,index) in persons" :key="index"> <!--这里是说:key为什么加冒号 就是因为 将文本变成表达式 但是为什么???(加不加都可以实现)-->
{{index}}---{{p.name}}---{{p.age}}
————><button @click="deleteP(index)">删除</button>
————><button @click="updateP(index,{name:'zhou',age:21})">更新</button>
<!--上面的时固定写入(index,{name:'zhou',age:21})了 也可以写入数组或者对象进行改变-->
</li>
</ol>
<h2>测试:v-for 遍历对象 </h2>
<ul>
<li v-for="(value,key) in persons[1]" :key="key">
{{value}}-----{{key}}<!--value:值 key:属性-->
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//vue 本身只是监视了persons的改变,没有监视数组内部数据的改变
//vue重写了数组中的一系列改变数组内部的方法(先调用原生,再更新界面)
new Vue({
el:'#demo',
data:{
//数组
persons:[
{name:'Tom',age:18},
{name:'Ken',age:19},
{name:'Jack',age:20},
{name:'Rose',age:17},
]
},
methods:{
deleteP(index){
//删除指定person数组的index中的p
this.persons.splice(index,1);
},
updateP(index,newValue){
//1.这样并没有改变persons本身,数组内部发生了变化,但并没有调用变异方法,所以vue不会更新页面
//this.persons[index] = newValue;
//2.可以使用重写数组的属性 让他带有绑定并且显示的属性
this.persons.splice(index,1,newValue);//总是删除(执行)第一个 就像栈一样
}
}
})
</script>
</body>
</html>
9.vue增删改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删改</title>
</head>
<body>
<div id="demo">
<ol>
<li v-for="(p , index) in persons" :key="index">
{{index}}---{{p.name}}---{{p.age}}
————><button @click="deleteP(index)">删除</button>
<!--不能写 会发现没有定义这个函数updateP 会出错-->
————><button @click="updateP(index,{name:'zhou',age:21})">更新</button>
————><button @click="addP(index,{name:'jia',age:222})">添加</button>
</li>
</ol>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
persons:[
{name:'Tom',age:21},
{name:'Cot',age:22},
{name:'Dog',age:23},
{name:'Tom',age:24},
]
},
methods:{
deleteP(index){
this.persons.splice(index,1);
},
updateP(index,newValue){
this.persons.splice(index,1,newValue);
},
addP(index,newValue){
this.persons.splice(index,0,newValue);
}
},
})
</script>
</body>
</html>
10.vue列表的搜索和排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">
<input type="text" v-model="searchName"/>
<ol>
<li v-for="(p,index) in fliterpersons" :key="index">
---{{p.name}}---{{p.age}}
</li>
</ol>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
searchName:'',
persons:[
{name:'Jack',age:18},
{name:'Tom',age:16},
{name:'Bob',age:19},
{name:'Rose',age:17},
],
},
computed:{
fliterpersons(){
//取出相关数据
//简化代码
const {searchName,persons} = this;
/*
const {searchName,persons} = this;
上面的这句话是一个简写,最终的含义相当于
const searchName = this.searchName
const persons = this.persons
* */
let fPersons;
//let 是一个作用域块 没有变量提升 var 才有
fPersons = persons.filter(p=>p.name.indexOf(searchName)!==-1)
/*相当于,引入变量就可以看得懂了indexOf = function(){}
function(p){
return p=>p.name.indexOf(searchName)!==-1;
}
* fliterpersons 的值是通过searchName 和persons动态计算出来的
* */
return fPersons;
}
}
})
//这样让我想起了冒泡排序:那么如果这样的话 我的冒泡排序是不是 可以用第一个减后面的数 小于零的 就是小的数 应前面
</script>
</body>
</html>
11.vue列表的搜索和排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">
<input type="text" v-model="searchName"/>
<ol>
<li v-for="(p,index) in filterpersons" :key='index'>
---{{p.name}}---{{p.age}}
</li>
</ol>
<!--绑定点击的函数 并且传一个值-->
<button @click="setorderType(1)">升序排序</button>
<button @click="setorderType(2)">降序排序</button>
<button @click="setorderType(0)">原来顺序</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
//刚开始搜索框初始值为''
searchName:'',
orderType:0,//0代表原本排序 , 1代表升序 ,2代表降序
persons:[
{name:'zhou',age:16},
{name:'姚',age:17},
{name:'姚明',age:15},
{name:'姚明明',age:19},
],
},
//计算属性
computed:{
filterpersons(){
/*const{searchName,persons}=this;*/
const searchName = this.searchName;
const persons = this.persons;
const orderType = this.orderType;
let fPerson;
fPerson = persons.filter(p=>p.name.indexOf(searchName)>=0)
//indexof 是遍历索引搜索 给他限定范围就行
/*return persons.filter(p=>p.name.indexOf(searchName)>=0)*/
if(orderType!==0){
//需要进行排序
fPerson.sort(function(p1,p2){
if(orderType===2){
return p1.age-p2.age;
}else{
return p2.age-p1.age;
}
})
}
return fPerson;
}
},
methods:{
//从click传下来的setorderType方法
setorderType(orderType){
this.orderType = orderType;
}
}
})
</script>
<!--
一句话来说: key值是为了虚拟dom的比对
展开来说: 页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象),
循环中 ,如果没有唯一key , 页面上删除一条标签,
由于并不知道删除的是那一条! 所以要吧全部虚拟dom重新渲染,
如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可!
-->
</body>
</html>
12.vue事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<!--
1.绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参:event
隐含属性对象:$event
2.事件修饰符
-->
<div id="example">
<!-- v-on: == @-->
<h2>1. 绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('zhouqiyong')">test2</button>
<button @click="test3">test3</button><!--$event事件(默认了),但是例如有多个参数的情况下 使用$event获取innerHTML里面的值-->
<button @click="test4(123,$event)">test4</button>
<!--$event 存在代表事件innerHTML里面的内容事件-->
<h2>2. 事件修饰符</h2>
<div style="width: 250px;height: 250px;background: #FF0000;" @click="test5">
<div style="width: 150px;height: 150px;background: green;" @click.stop="test6"></div>
<!--stop只负责停止冒泡事件-->
</div>
<a href="https://www.baidu.com"@click.prevent="test7">点击我去百度</a>
<h2>3. 按键修饰符</h2>
<!--属性keyup 按键松开显示内容-->
<input type="text" @keyup="test8"/>
<!--这tm也太强大了-->
<input type="text" @keyup.13="test8"/>
<input type="text" @keyup.enter="test8"/>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#example',
data:{
test1(){
alert('test1');
},
test2(msg){
alert(msg);
},
test3(event){
alert(event.target.innerHTML);
},
test4(number,event ){
/*alert(number , '-----' , event.target.innerHTML);*/
alert(number + '-----' + event.target.innerHTML);
},
//事件修饰符
test5(){
//外部
alert('out');
},
//内部
test6(){
//之前js使用的是,停止事件冒泡event.propoStop
//现在一键解决:@click.stop="test6"
alert('inner');
},
test7(){
//之前使用js的是 event.preventDfualt阻止事件的默认行为
//现在一键解决:@click.prevent="test7"
alert("去百度");
},
//按键监听
test8(event){
/*if(event.keyCode===13){
alert(event.target.value +' 键值 '+event.keyCode);
//event.keyCode获取按键的keycode值
//原生js的代码就是这样
}*/
alert(event.target.value +' 键值 '+event.keyCode);
}
}
})
</script>
</body>
</html>
13.vue的表单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01.表单的练习</title>
</head>
<body>
<div id="demo">
<form action="../xxx" @submit.prevent="handlerSubmit">
<span>昵称:</span>
<input type="text" v-model="username"/><br />
<span>昵称:</span>
<input type="password" v-model="pwd"/><br />
<span>性别:</span>
<input type="radio" id="famale" value="女" v-model="sex"/>
<label for="famale">女</label>
<input type="radio" id="male" value="男" v-model="sex"/>
<label for="male">男</label><br />
<span>爱好:</span>
<input type="checkbox" id="basket" value="篮球" v-model="likes"/>
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="足球" v-model="likes"/>
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="乒乓球" v-model="likes"/>
<label for="pingpang">乒乓球</label><br />
<span>城市:</span>
<select v-model="defaultCityid">
<option value="">请选择</option>
<option :value="city.id" v-for="(city,index) in allcity" v-model="allcity">{{city.name}}</option>
</select><br />
<span>介绍:</span>
<textarea rows="10" v-model="information"></textarea><br />
<input type="submit" value="注册"/>
</form>
</div>
</form>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
username:'',
pwd:'',
sex:'女',
likes:['足球'],
allcity:[{id:1,name:'北京'},{id:2,name:'上海'},{id:3,name:'广州'}],
defaultCityid:'3',
},
methods:{
handlerSubmit(){
console.log(this.username,this.pwd,this.likes,this.allcity,this.information);
}
}
})
/*
总结:
理解:其label中的for的值是服务元素的Id,绑定指定id的元素,点击label后会激活相应的控件
也就是说:没有添加for之前,我们选中复选框需要点那个框
但是添加之后,我们选中旁边那个字,复选框也会选中。
for关联到相关组件上了
*/
</script>
</body>
</html>
14.vue的表单输入和绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
实现表单的自动收集
1.使用v-model(双向数据绑定)自动收集数据:用的是v-model实现自动收集数据 然后利用ajax传到后台去
text/textarea
checkbox
radio
select
-->
<body>
<div id="demo">
<form action="/xxx" @submit.prevent="handlerSubmit"><!--prevent取消默认行为-->
<span>昵称</span>
<input type="text" v-model="username"/><br>
<span>密码</span>
<input type="password" v-model="pwd"/><br>
<span>性别:</span>
<input type="radio" id="famale" value="女" v-model="sex"/>
<lable for="famale">女</label>
<input type="radio" id="male" value="男" v-model="sex"/>
<lable for="male">男</label><br>
<span>爱好:</span>
<input type="checkbox" id="basket" value="basket" v-model="likes"/>
<lable for="basket">篮球</label>
<input type="checkbox" id="foot" value="foot" v-model="likes"/>
<lable for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes"/>
<lable for="pingpang">乒乓球</label><br/>
<span>城市:</span>
<select v-model="Cityid">
<option value="">未选择</option>
<!--allcity传入-->
<!--为什么要加个: 加上冒号会首先将这个属性当作变量解析,没加冒号就直接是字符串-->
<option :value="city.id" v-for="(city,index) in allCity">{{city.name}}</option>
</select><br />
<span>介绍:</span>
<textarea rows="10" v-model="information"></textarea><br/><br/>
<input type="submit" value="注册"/>
<!--通过ajax手动 提交请求-->
</form>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
/*
* 都是通过v-model自动收集数据的
*/
username:'',
pwd:'',
sex:'女',//初始化,原本默认是空的
likes:['pingpang'],
allCity:[{id:1,name:"北京"},{id:2,name:"上海"},{id:3,name:"广州"}],
Cityid:'3',//初始化,原本默认是空的==>显示广州
},
methods:{
handlerSubmit(){
console.log(this.username,this.pwd,this.sex,this.likes,this.Cityid,this.information);
}
}
})
</script>
</body>
</html>
15.vue的生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
</head>
<body>
<!--
1.vue对象的生命周期
a. 初始化对象显示
* beforCreate()
* created()
* beforeMount()
* mounted()
b. 更新显示 this.xxx = value
* beforeUpdate(
* updated()
c. 销毁vue实例:vm.$destory()
* beforeDestory()
* destoryed()
2. 常用的生命周期方法
mounted(): 发送ajax请求,启动定时器等异步任务
beforeDestroy(): 做收尾工作,如:清除定时器
-->
<!--<div id="test">
<button @click="BtnDestroy">点击销毁生命周期</button>
<p v-show="isShow">尚硅谷IT教育</p>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
isShow:false
},
//初始化值的mounted
//为什么使用箭头函数这里,因为在函数里面要使用isShow,箭头函数作用域可以使用
//在这里,函数被用作参数
mounted(){
this.intervalId = setInterval(()=>{
console.log("---------");
this.isShow = !this.isShow;
},1000)
},
beforeDestroy(){//死亡之前调用()
// 清除定时器
clearInterval(this.intervalId)
//这里有一个返回值
},
methods:{
BtnDestroy(){
//销毁vm对象
this.$destroy();
}
}
})
</script>-->
<div id="test">
<button @click="BtnDestroy">点击销毁vm</button>
<p v-show="isIshow">尚硅谷IT教育</p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
isIshow:true
},
beforeCreate(){
console.log('beforeCreate()');
},
created(){
console.log('created()');
},
beforeMount(){
console.log('beforeMount()');
},
mounted(){//初始化显示之后立即调用
console.log('mounted()')
this.setIntervalId = setInterval(()=>{
console.log("-----------");
this.isIshow =!this.isIshow;
},1000)
},
//2. 更新显示
beforeUpdate(){
console.log('beforeUpdate()')
},
updated(){
console.log('updated()');
},
//销毁destory
beforeDestroy(){//遗嘱函数
//清除定时器
clearInterval(this.setIntervalId);
},
destroyed(){
console.log('destroy()')
},
methods:{
BtnDestroy(){
//销毁生命周期的vm对象
this.$destroy();
}
}
})
</script>
</body>
</html>
16.vue的生命周期
17.vue生命周期练习
18.vue过渡_动画_放大缩小篇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wen-enter-active {
animation: wen-in 1s;
}
.wen-leave-active {
animation: wen-in 1s reverse;
}
@keyframes wen-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="wen">
<p v-show="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#example-2',
data: {
show: true
}
})
</script>
</body>
</html>
19.vue过渡与动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡与动画</title>
<style type="text/css">
/*
总结:vue是通过搬运css来事项动画效果的
*
*/
/*显示和隐藏的过渡效果*/
.xxx-enter-active, .xxx-leave-active{
transition: opacity 1s;
}
/*隐藏*/
.xxx-enter, .xxx-leave-to{
opacity: 0;
}
/*第二种效果;过渡加平移*/
/*位移效果!!!*/
.move-enter-active{
transition: all 1s
}
.move-leave-active{
transition: all 3s
}
/*隐藏时的样式*/
.move-enter, .move-leave-to{
opacity: 0;
transform: translateY(-20px)
}
/*文字向放大缩小*/
/*然后:bounce-in动画名称加效果*/
.wen-enter-active{
animation: bounce-in 1s;
}
/*效果反转*/
.wen-leave-active{
animation: bounce-in 1s reverse;
}
/*放大缩小的效果:@keyframes 动画名称*/
/*这个比例是将时间分割,然后出效果*/
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<!--
1. vue动画的理解
操作css的transition或anmiation
vue会给目标元素添加、移除特定的class
2. 基本过渡动画的编码
a. 在目标元素外包裹<transition name='xxx'>
b. 定义class
1.指定过渡样式:transition
2.指定隐藏的样式:opacity/其他
3. 过渡的类名
xxx-enter-active:指定显示的transition
xxx-Leave-active:指定隐藏的transition
xxx-enter:指定隐藏时的样式
-->
<div id="test1">
<button @click="isShow =!isShow">点击切换</button>
<transition name="xxx"><!--name的唯一性-->
<p v-show="isShow">hello</p>
</transition>
</div>
<!--
加上位移 transform
-->
<div id="test2">
<button @click="isShow =!isShow">点击切换</button>
<transition name="move">
<p v-show="isShow">hello</p>
</transition>
</div>
<!--文字向Z轴平移-->
<div id="test3">
<button @click="isShow =!isShow">点击切换</button><br>
<transition name="wen">
<p v-if="isShow" style="background: red; display: inline-block;">在 CSS 过渡和动画</p>
</transition>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#test1',
data:{
isShow:true
}
})
new Vue({
el:'#test2',
data:{
isShow:true
}
})
new Vue({
el:'#test3',
data:{
isShow:true
}
})
</script>
<!--
总结:基本动画过渡的流程
1. 在目标元素外包裹<transition name="xxx"></transition>
2. 定义class样式
指定的过渡样式:transition
指定的隐藏样式:opacity/其他
-->
</body>
</html>
20.vue过滤格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间过滤格式</title>
</head>
<body>
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>初始化版本:{{date}}</p>
<!--{{我的日期 |}}-->
<p>完整版:{{date | dateString}}</p>
<p>年月日:{{date | dateString('YYYY-MM-DD')}}</p><!--指定格式-->
<p>时分秒:{{date | dateString('HH:mm:ss')}}</p>
</div>
<!--引入moment.js库-->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//引入一个一个概念:函数对象
//Vue在这里作为一个对象,但是它本身就是一个函数,现在作为对象调用filter方法('过滤器名称',函数(值,值,...))
// 然后每个过滤器都有一个处理函数,当date传进来,return就会得出一个新的结果传出去
Vue.filter('dateString',function(value,format){
// ||当是format格式的时候就传原本的,如果不是原来的格式那就:'YYYY-MM-DD HH:mm:ss'
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el:'#test',
data:{
date: new Date()//时间函数
}
})
</script>
</body>
</html>
21.vue的时间过滤格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test">
<h2>时间格式的过渡</h2>
<p>标准计算机格式:{{date}} </p>
<p>完整格式:{{date | dateString}}</p>
<p>年月日格式:{{date | dateString('YYYY-MM-DD')}}</p>
<p>时间格式:{{date | dateString('HH-mm-ss')}}</p>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//传值进行格式化
//2.es6的格式也可以传:这个叫形参默认值
//Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){return moment(value).format(format)}
Vue.filter('dateString',function(value,format){
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el:'#test',
data:{
date: new Date()
}
})
</script>
</body>
</html>
22.vue内置指令练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--指令名不包括v-,调用的时候才可以使用-->
<!--
1. 注册全局指令(指令名,处理函数(标签el名,))
Vue.directive('my-directive',function(el,binding){
el.innerHTML = binding.value.toUpperCase()
})
2. 注册局部指令
directives :{
'my-directive':{
bind(el,binding){
el.innerHTML = binding.value.toLowerCase()
}
}
}
3. 使用指令
v-my-directive='xxx'
4. 需求:自定义2个指令
1. 功能类型于v-text,但转化为全大写
2. 功能类型于v-text,但转化为全小写
-->
<div id="test1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="test2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//编写指令(全局指令)
Vue.directive('upper-text',function(el,binding){
el.textContent = binding.value.toUpperCase();
})
new Vue({
el:'#test1',
data:{
msg1:'zhou qi yong'
},
//局部指令
directives :{
'lower-text':{
bind(el,binding){
el.innerHTML = binding.value.toLowerCase()
}
}
}
})
new Vue({
el:'#test2',
data:{
msg2:'JUST do it'
}
})
</script>
</body>
</html>
23.vue指令_内置_外置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>指令</title>
<style type="text/css">
/*属性选择器,刚刚出现的时候选择隐藏{{msg}},要显示的时候才显示出来就行*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--熟记与心-->
<!--
常用的内置指令:
v-text:更新元素的textContent
v-html:更新元素 innerHTML
v-if: 如果为true, 当前标签才会输出到页面
v-else:如果为false,当前标签才会输出的到页面
v-show: 通过控制dispaly样式来控制显示/隐藏
v-for:遍历数组/对象
v-on:绑定事件监听,一般简写为@
v-bind:双向数据绑定
ref:为某个元素注册一个唯一标识,vue对象通过$els属性访问这个元素对象
v-cloak:使用它防止闪现表达式,与class配合:[v-cloak]{dispaly:none}
v-molde:自动收集数据
-->
<div id="demo">
<p ref="content">atguigu.com</p>
<button @click="hint">提示</button>
<!--数据存在本地,所以就会加载出来,但是如果在加载之前就使用,那么,使用后就不会出现-->
<p v-cloak>{{msg}}</p>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
alert("0000")
new Vue({
el:'#demo',
data:{
msg:'尚硅谷'
},
methods:{
hint(){
//使用语法格式也要注意
alert(this.$refs.content.textContent)
}
}
})
</script>
</body>
</html>
24.vue外置指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>指令_自定义指令</title>
</head>
<body>
<!--指令名不包括v-,调用的时候才可以使用-->
<!--
1. 注册全局指令(指令名,处理函数(标签el名,))
Vue.directive('my-directive',function(el,binding){
el.innerHTML = binding.value.toUpperCase()
})
2. 注册局部指令
directives :{
'my-directive':{
bind(el,binding){
el.innerHTML = binding.value.toLowerCase()
}
}
}
3. 使用指令
v-my-directive='xxx'
4. 需求:自定义2个指令
1. 功能类型于v-text,但转化为全大写
2. 功能类型于v-text,但转化为全小写
-->
<div id="test1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="test2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*全局指令*/
Vue.directive('upper-text',function(el,binding){
//toupperCase()出错 u应该是U大写才对
el.textContent = binding.value.toUpperCase()
})
new Vue({
el:'#test1',
data:{
msg1:'zhou qi YONG'
},
directives:{
'lower-text':{
bind(el,binding){
el.innerHTML = binding.value.toLowerCase();
}
}
}
})
new Vue({
el:'#test2',
data:{
msg2:'JUST do it'
}
})
</script>
</body>
</html>
vue脚手架的搭建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.网上下载模版项目(网址:),脚手架(相当于一个vue库)
创建vue项目
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问 http://localhost:8080/
脚手架项目我转移到VScode上面了,转移战场——————————————————————>
-->
</body>
</html>
目录说明
1
2.build
3.config