Vue从0开始
1、Vue指令
直接代码吧!
点击按钮使方块隐藏显示,实例如下:
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.div1 {width: 100px; height: 100px; background: red; margin-top: 20px;}
</style>
<div id="box">
<button @click='fn()'>toggle</button><br/>
<div class="div1" v-show='bol'></div>
</div>
// 控制器
var vm = new Vue({
el: '#box',
data: {
// 数据
bol: false
},
methods: {
fn: function () {
// body...
// console.log(1);
// console.log(this.bol);
// 如果div显示,那么点击隐藏;
// 如果div隐藏,那么点击显示
this.bol = !this.bol;
}
}
});
Vue点击事件:v-on:click。简写方式:@click。
v-model:双向绑定(将用户输入的信息显示在页面上)
v-bind:用来响应的更新HTML属性,支持单一的JavaScript表达式
完整语法:<span v-bind:class=“classProperty”>
注:v-bind是指令;class是参数;classProperty是预期值
v-bind属性绑定:v-bind:class={类名:表达式}。
实例:<style type="text/css"> .red {background: red;} </style> <ul> <!-- 有多少条数据,就渲染(render)多少个li --> <!-- <li v-for='item in arr'>{{ item }}</li> --> <li v-for='(item,index) in arr' @click='fn(index)' v-bind:class='{red:item.bol}'>{{ index+'、' }}{{ item.des }}</li> </ul> var vm = new Vue({ el: '#box', data: { arr: [ {des:'睡觉', bol:false}, {des:'shopping', bol:false}, {des:'coding', bol:false}, {des:'LOL', bol:false}, ] }, methods: { fn: function (index) { // body... // 通过i知道当前被点的数据时谁, // 把被点击的数据的 bol 值改成true // 把所有其他未被选中的数据的bl 改成false // 思路:先都改成 false,然后再把选中的改成true for (var i = 0; i < this.arr.length; i++){ this.arr[i].bol = false; } this.arr[index].bol = true; } } });
v-for:相当于js中的for循环
语法:v-for=“item in arr”
注:item是遍历后得到的元素;arr表示要遍历的数组
v-for=’’(item index) in arr "
注:index表示下标
在style中使用[v-cloak] {display:none}防止当页面刷新的时候产生的{{}},使其在页面加载完成之前隐藏。
v-text:用来设置文本内容。语法:v-text=变量。相当于innerHTML
v-if:判断。语法:v-if=表达式
实例:
hello!
world
redredred
v-show:控制一个元素的显示与隐藏。语法:v-show=表达式
原理:通过控制元素的display属性,来控制元素的显示和隐藏。
v-else:和v-if、v-else-if指令配合使用。
v-for、v-model、v-show、v-bind:class、@blur等的配合使用。
实例如下:
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
#box {width: 350px; margin: 30px auto; background: #eee; padding: 30px 50px;}
li {list-style-type: none;}
ul {padding-left: 0;}
.add {width: 200px; height: 20px; margin-right: 10px;}
.finish {color: #ccc; text-decoration: line-through;}
.span1 {color: skyblue;}
</style>
</head>
<body>
<div id="box">
<!--
如何计算未完成的任务总数:
将 arr 进行遍历,能够拿到 obj.bol 值;
通过判断 obj.bol 的真假,就知道当前这条任务是否完成;
如果完成,不做计算;如果未完成,将其加入到未完成的数量中;
-->
<h1>任务列表</h1>
<p>任务总数:{{ arr.length }};还有:{{ choose() }} 未完成;【<span @click='finish()' class="span1">完成</span>】</p>
<ul>
<li v-for='(item,index) in arr' v-bind:class='{finish: item.bol}'>
<input type="checkbox" v-model='item.bol' @click.stop='choose(index)'></input>
<span v-show='!item.edit' @click='edit(index)'>{{ item.des }}</span>
<input type="text" v-model='item.des' v-show='item.edit' @blur='item.edit=false'></input>
</li>
</ul>
<input type="text" class="add" v-model='msg'></input><button @click='add()'>添加</button>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: [
// 每条数据中应该有数据的内容,和 数据的状态
{des:'设计', bol: false, edit: false},
{des:'编写页面代码', bol: false, edit: false},
{des:'编写js代码', bol: false, edit: false},
{des:'设计产品原型', bol: false, edit: false},
],
msg: ''
},
methods: {
add: function () {
// body...
// 向数组中添加内容
this.arr.push({des: this.msg, bol: false});
this.msg = '';
},
choose: function (i) {
// body...
// console.log(1);
// i代表当前点中的数据的下标
// 返回当前数据的一个状态(bol)
// 遍历数组
// arr.forEach(function(item){逻辑操作})
// item 代表每次遍历后得到的值
var num = 0; //未完成任务数量
this.arr.forEach(function (item) {
// body...
if (!item.bol) { //当前任务未完成
// 增加未完成任务的数量
num++;
}
});
return num;
},
finish: function () {
// body...
// 遍历数组,通过判断bol值,来判断当前待办事项是否完成。
// 如果完成,那么删除
// for (var i = 0; i < this.arr.length; i++){
// if (this.arr[i].bol) {
// // 删除掉
//splice()方法表示要添加/删除的项目,并返回删除的项目。
// this.arr.splice(i,1);
// }
// }
// 添加功能
// this.arr
// var temp = this.arr; this.arr清空
// 遍历temp,如果bol值判断结果为未完成,那么将数据push到this.arr
var temp = this.arr;
this.arr = [];
for (var i = 0; i < temp.length; i++) {
if (!temp[i].bol) {
this.arr.push(temp[i]);
}
}
},
edit: function (i) {
// body...
if (this.arr[i].bol){
return;
}
this.arr[i].edit = true;
}
}
});
</script>**
2、Vue交互及生命周期
(1)get请求
语法:this.$http.get(‘url’,{params:{a:1,b:2,…}}).then(function (res) {处理请求成功},function (res) {处理请求失败} );
get请求可以用来请求文本文件、向后台传递参数并返回数值、调用接口查询真实数据等。
(2)post请求
语法:this.$http.post(‘url’,{a:1,b:2…},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败})
(3)jsonp请求
语法:this.$http.jsonp(‘url’,{params:{a:1,b:2…}},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况});
实例:
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
<div id="box">
<button @click='search()'>search</button>
<!--
1、get请求
this.$http.get('url', {params:{a:1,b:2...}}).then(function(res){处理请求成功},function(res){处理请求失败});
-->
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
},
methods: {
search: function () {
// body...
// 1)请求文本
// this.$http.get('11.txt').then(function (res) {
// // body...
// // console.log('成功');
// // res参数: 请求成功时返回的数据
// // 返回的参数中,status 是请求的状态码
// // data:请求返回的数据
// console.log(res.status);
// console.log(res.data);
// }, function (res) {
// // body...
// // console.log('失败');
// console.log(res.status);
// });
// 2) 需要向后台传递参数,并返回数值
// 需求:向后台传入两个数,返回两个数的和
// this.$http.get('sum.php',{
// params: {a:3, b:10}
// }).then(function (res) {
// // body...
// console.log(res.data);
// }, function (res) {
// // body...
// console.log(res.status);
// });
// 3) 请求真实数据
// http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=2&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187
// 接口、接口描述、参数描述、返回值、状态码
this.$http.get('http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=2&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187').then(function (res) {
// body...
console.log(res.data.data.commentList[0].createAt);
}, function (res) {
// body...
console.log(res.status);
});
// 12412935808094 时间戳,表示时间的毫秒数
// post请求
// this.$http.post(‘url’,{a:1,b:2...},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败})
// 参数传递: {参数1:值1,参数2:值2.。。。}
// {emulateJSON:true} 模拟json数据格式,将参数传递过去
// 求两个数的差
// this.$http.post('sub.php',{
// a:5, b:1
// },{emulateJSON:true}).then(function (res) {
// // body...
// console.log(res.data);
// }, function (res) {
// // body...
// console.log(res.status);
// });
// jsonp请求
// this.$http.jsonp('url',{params:{a:1,b:2...}},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况});
// 到底该使用什么类型的请求
// get,参数拼接url上,一般保密性的信息不要使用这种方法,对文件大小限制
// post,允许传递数据大小 大
// 使用哪种请求方式,是由后台开发人员决定的
// 接口文档中,会详细标注,使用什么请求方式
}
}
});
</script>**
(4)过滤器的使用
定义过滤器是在创建实例之前。
语法:Vue.filter(‘过滤器名称’,function (val) {
val:需要处理的值
逻辑代码
return 处理后的数据;
})
过滤器的调用:数据 | 过滤器名称
过滤器的串联:过滤器在没有冲突的情况下,是可以进行串联使用的。
实例:
**<div id="box">
<h1>{{ name | hello | currency}}</h1>
</div>
<script type="text/javascript">
// 定义过滤器
// 位置:创建实例之前
/* Vue.filter('过滤器名称',function(val){
val: 需要处理的值
逻辑代码
return 处理后的数据;
})
*/
//过滤器的调用:
// 数据 | 过滤器名称
// 过滤器的串联:过滤器在没有冲突的前提下,是可以进行串联使用的
Vue.filter('hello',function (val) {
// body...
return 'hello'+val;
});
Vue.filter('currency',function (val) {
// body...
return '¥¥¥ '+val;
});
var vm = new Vue({
el: '#box',
data: {
name: 'lily'
}
});
</script>**
(5)实例的生命周期
实例的生命周期:实例从创建到销毁的过程
钩子函数:在实例的生命周期中会自动调用一些函数,这些函数就是钩子函数
作用:可以通过钩子函数来定义需要的一些逻辑
生命周期:
create(创建):beforeCreate、created
mount(挂载):beforeMount、mounted
update(更新):beforeUpdate、updated
destroy(销毁):beforeDestroy、destroyed
实例:
**<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: 'hello'
},
// 钩子函数书写的位置,和data,methods等配置项同级
beforeCreate: function () {
// body...
console.group('beforeCreate~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
// 三者都没有创建
},
created: function () {
// body...
console.group('created~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
// el没有创建、data和msg创建
},
beforeMount: function () {
// body...
console.group('beforeMount~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
// el并没有真正的创建出来,而是进行了一个占位、data和msg创建
},
mounted: function () {
// body...
console.group('mounted~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
// el已经替换成了真是的数据,而是进行了一个占位、data和msg创建
},
// el 是设置挂载 el:‘selector’ 用来将容器和数据进行关联 挂载
beforeUpdate: function () {
// body...
console.group('beforeUpdate~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
},
updated: function () {
// body...
console.group('updated~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
},
//数据更新后,这两个方法会执行
beforeDestroy: function () {
// body...
console.group('beforeDestroy~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
},
destroyed: function () {
// body...
console.group('beforeDestroy~~~~~~~~~~~~~~~~~~');
console.log('el:'+this.$el);
console.log('data:'+this.$data);
console.log('msg:'+this.msg);
},
// destroy 在实例销毁的时候执行;
// 实例销毁后,其身上所有的数据和方法都会销毁,不在生效
});
</script>**
三、组件
(1)全局组件
Vue.Component(‘name’,{template:‘html结构’});
如果想在HTML结构中写入多个标签,外层必须包裹容器。
组件中定义数据语法 data:function () { return { a:1 …}};
实例:
**<script type="text/javascript">
// 全局组件
// 组件的封装
// Vue.component('name',{template:'html结构'})
// 如果想在html结构中,写入多个标签,外层必须包裹容器
Vue.component('test', {
// 模板
// template: '<div><h1>test</h1><p>111111</p><img src="img/1.png"/></div>'
template: '#t',
// 组件中定义数据
// data:function(){return {a:1...}}
data: function () {
// body...
return {
msg: 'hello',
name: 'lily'
}
},
methods: {
fn: function () {
// body...
console.log(1);
}
}
});
var vm = new Vue({
el: '#box',
data: {
}
});
var vm2 = new Vue({
el: '#box2',
data: {
}
});
</script>
<body>
<div id="box">
<!-- 组件的调用
<组件名></组件名>
-->
<test></test>
<test></test>
<test></test>
</div>
<div id="box2">
<p>~~~~box2~~~~~~</p>
<test></test>
</div>
<!-- 定义模板
使用template标签,在box容器外定义模板
为template标签,添加id
设置template:‘selector’
-->
<template id="t">
<div>
<!-- 模板中添加事件 -->
<img src="img/1.png" @click='fn'/>
<ul>
<li>12312323</li>
<li>12312323</li>
<li>12312323</li>
</ul>
<h1>组件组件</h1>
<h2>{{ msg + '~~' + name }}</h2>
</div>
</template>
</body>**
(2)局部组件
在哪个实例里面进行定义,就只能在对应关联的容器里面进行调用
注:如果组件命名的时候使用了驼峰命名法,那么在调用的时候要使用 - 连接的方式代替驼峰。
**var vm = new Vue({
el: '#box',
data: {
},
// 局部组件的定义
components: {
// 组件名称:{配置项}
'test': {
// template: '<h1>sdfasdfsdf</h1>'
template: '#t',
data: function () {
// body...
return {
msg: 'hello',
a: 100
}
},
methods: {
fn: function () {
// body...
console.log(1);
}
}
},
'test2': {
template: '<h2>~~~~~~~~~~test2~~~~~~~~~~</h2>'
},
// 如果组件命名使用了驼峰命名法,那么在调用时,需要用-连接的方式,替代驼峰
'myTest': {
template: '<h1>*********myTest**********</h1>'
}
// 每一个组件,相当于一个完整的vue实例
// 所以组件之间的作用域是完全独立的,组件之间的值不能够公用
}
});**
组件下方还可以定义组件,形成父子组件。