Vue js 学习
Vue js 简介
Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。
Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择,所以说,Vue.js是一套构建用户界面的渐进式框架。
Vue的核心库只关注视图层,Vue的目标是通过尽可能简单的 API 实现响应的数据绑定,在这一点上Vue.js类似于后台的模板语言。
Vue也可以将界面拆分成一个个的组件,通过组件来构建界面,然后用自动化工具来生成单页面(SPA - single page application)系统。
Vue.js使用文档及下载Vue.js
Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用,可以通过下面地址下载: https://cn.vuejs.org/v2/guide/installation.html
Vue js 基本概念
开发版本vue.js,上线版本vue.min.js
Vue实例
每个 Vue 应用都是通过实例化一个新的 Vue对象开始的:
其中,el属性对应一个标签,当vue对象创建后,这个标签内的区域就被vue对象接管,在这个区域内就可以使用vue对象中定义的属性和方法。
数据与方法
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。还可以在Vue实例中定义方法,通过方法来改变实例中data对象中的数据,数据改变了,视图中的数据也改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
// 一个应用是从一个vue对象开始的
// 创建一个vue对象
var vm = new Vue({
el:"#app",
data:{
msg:"hello world!",
}
})
</script>
</body>
</html>
Vue js 模板语法
模板语法指的是如何将数据放入html中,Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层 Vue 实例的数据。所有 Vue.js的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
插入值 双大括号{{message}}
指令 本质上是将js封装好使用
v-bind 链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{sTr}}</p>
<p>{{iNum + 15}}</p>
<P>{{bIsok? 'AMD YES' : 'NO'}}</P>
<P>{{sTr.split('').reverse().join('')}}</P><br>
<!-- 指令带有v-的前缀属性 本质上是js操作分装 -->
<!-- <a v-bind:href="sUrl">百度的链接</a>
<input type="button" v-on:click="fnReverse" name="" id="" value="数据反转"> -->
<!-- 指令简写 -->
<a :href="sUrl">百度的链接</a>
<input type="button" :click="fnReverse" name="" id="" value="数据反转">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
sTr:"hello world",
iNum:10,
bIsok:true,
sUrl:'http://www.baidu.com'
},
methods:{
fnReverse:function(){
this.sTr = this.sTr.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
Class与style绑定
Class绑定
可以给v-bind:class传一个对象,以动态的切换class
style绑定
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 来命名
一般多使用class绑定 切换class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.big{
font-size: 100px;
}
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 类的绑定 -->
<p :class="{big:isBig,red:isRed}">这是第一个段落</p>
<p :class="[isBig?'big':'', 'red']">这是第二个段落</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
isBig:true,
isRed:true,
}
})
</script>
</body>
</html>
条件渲染
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下:
v-if v-else-if v-else 控制元素的创建或者销毁
v-show 控制元素的隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if='bIsok'>这是使用v-if的标签h1</h1>
<h2 v-else>这是使用v-else的h2</h2>
<h3 v-show='bIsok'>这是使用v-show的h3</h3>
<div v-if="sCode=='A'">A</div>
<div v-else-if="sCode=='B'">B</div>
<div v-else-if="sCode=='C'">C</div>
<div v-else>not A/B/C</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
bIsok:true,
sCode:'A'
}
})
</script>
</body>
</html>
事件处理
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,事件的处理,简单的逻辑可以写在指令中,复杂的需要在vue对象的methods属性中指定处理函数。
事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{iNum}}</p>
<input type="button" name="" id="" value="递增" @click="iNum+=1">
<input type="button" value="弹框显示iNum02的值" @click="fnShow">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
iNum:10,
iNum02:15
},
methods:{
fnShow:function(){
alert("iNum02的值是:"+this.iNum02);
}
}
})
</script>
</body>
</html>
实际开发中,事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为,在vue.js可以加上事件修饰符
<!-- 阻止单击事件继续传播 -->
<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>
实例: 弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app" @click="bIsshow=false">
<input type="button" value="弹出弹框" id="btn01" @click.stop="bIsshow=true">
<div class="pop_main" id="pop" v-show="bIsshow">
<div class="pop_con" @click.stop>
<div class="pop_title">
<h3>系统提示</h3>
<a href="#" id="shutoff" @click="bIsshow=false">×</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲!请关注近期的优惠活动!</p>
</div>
<div class="pop_footer">
</div>
</div>
<div class="mask"></div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
bIsshow:false,
}
})
</script>
</body>
</html>
小练习: 选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .activve{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="js/vue.js"></script>
<script>
</script>
</head>
<body>
<div class="tab_con" id="app">
<div class="tab_btns">
<input type="button" value="按钮一" :class="[(iNow==0)?'active':'']" @click="iNow=0">
<input type="button" value="按钮二" :class="[(iNow==1)?'active':'']" @click="iNow=1">
<input type="button" value="按钮三" :class="[(iNow==2)?'active':'']" @click="iNow=2">
</div>
<div class="tab_cons">
<div :class="[(iNow==0)?'current':'']">按钮一对应的内容</div>
<div :class="[(iNow==1)?'current':'']">按钮二对应的内容</div>
<div :class="[(iNow==2)?'current':'']">按钮三对应的内容</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
iNow:0
}
})
</script>
</body>
</html>
列表渲染
通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象,v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 将数组的数据放到页面 带索引值 -->
<ul>
<li v-for="item in aList">{{ item }}</li>
</ul>
<!-- 带索引值 -->
<ul>
<li v-for="(item,index) in aList">{{index+1}},{{ item }}</li>
</ul>
<!-- 将对象的数据放到页面 -->
<ul>
<li v-for="item in oPerson">{{ item }}</li>
</ul>
<!-- 将对象的数据放到页面 带建名 -->
<ul>
<li v-for="(item,key) in oPerson">{{key}},{{ item }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
aList:['红海', '妇联3', '战狼2', '捉妖记2'],
oPerson:{"name":"李思", "age":18, "gender":"女"}
}
})
</script>
</body>
</html>
表单绑定输入输出 – 数据的双向绑定
可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框,绑定到同一个数组:
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
......
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
单选框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
......
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
下拉框
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
......
new Vue({
el: '...',
data: {
selected:''
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
<!-- 单行文本输入 -->
<p>
<label for="">用户名:</label>{{username}}<br>
<input type="text" v-model="username"><br>
<input type="button" value="改变值" @click="fnChange">
</p>
</form>
<p>
<label for="">性别:</label>{{xingbie}}<br>
<input type="radio" value="0" name="gender" v-model="xingbie">男
<input type="radio" value="1" name="gender" v-model="xingbie">女
</p>
<p>
<!-- 多行文本输入 -->
<label for="">个人信息:</label>{{info}}<br>
<textarea v-model="info" name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label for="">爱好:</label>{{}}<br>
<input type="checkbox" v-model="aihao" value="study" name="hobby" >学习
<input type="checkbox" v-model="aihao" value="practise" name="hobby">练习
<input type="checkbox" v-model="aihao" value="basketball" name="hobby">打球
</p>
<p>
<label for="">{{site}}<br></label>
<select v-model="site" name="" id="">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
username:"",
info:'',
xingbie:0,
aihao:[],
site:3,
},
methods:{
fnChange:function(){
this.username += 'haha!'
}
}
})
</script>
</body>
</html>
计算属性和侦听属性
计算属性和侦听属性 方法定义在 侦听之前
computed 计算属性
watch 侦听属性
计算属性
模板内一般只能进行简单的运算 使用计算属性可以使用较为复杂的运算
侦听属性
伴随某一属性的变化而进行相应的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}<br></p>
<p>{{message.split("").reverse().join('')}}</p>
<!-- 上面的写法建议写成下面计算属性的形式 -->
<p>{{reversemsg}}</p>
<input type="button" value="改变属性" @click="fnXXX" name="" id="">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello"
},
methods:{
fnXXX:function(){
this.message += 'haha';
}
},
// 计算属性
computed:{
reversemsg:function(){
return this.message.split("").reverse().join('')
}
},
watch:{ // 定义侦听属性
message:function(newVal, oldVal){
console.log(newVal + ' | ' + 'oldVal');
},
}
})
</script>
</body>
</html>
过滤器
过滤器 实质上是一个函数 可以在一个组件的选项中定义组件内部过滤器
vue.js 允许你自定义过滤器
{{ prize | RMB }}
可以在一个组件的选项中定义组件内部过滤器
定义全局过滤器
将过滤器绑定到类上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 过滤器 可以用于双花括号 -->
<p>商品的价格是: {{price | RMB | Yuan}}</p>
</div>
<div id="app2">
<!-- 过滤器 可以用于双花括号 -->
<p>商品的价格是: {{price | $ | Yuan}}</p>
</div>
</body>
<script>
// 定义全局过滤器 绑定到Vue类上
Vue.filter('Yuan', function (value) {
if(value==''){
return;
}
return value + ' 元'
})
var vm = new Vue({
el:"#app",
data:{
price:99.99,
},
// 局部过滤器
filters:{
RMB:function(value){
if(value==''){
return;
}
return '¥ ' + value;
}
}
})
var vm2 = new Vue({
el:"#app2",
data:{
price:88.88
},
filters:{
$:function(value){
if(value==0){
return;
}
return '$ ' + value;
}
}
})
</script>
</html>
实例的生命周期
实例生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新 DOM 等。同时在这个过程中会自动运行一些叫做生命周期钩子的函数,我们可以使用这些函数,在实例的不同阶段加上我们需要的代码,实现特定的功能。
beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
实例挂载到dom之后被调用,可以当成是vue对象的ready方法来使用,一般用它来做dom的初始化操作。
beforeUpdate
数据发生变化前调用
updated
数据发生变化后调用
一般来说 使用vuejs 操作数据 是在生命周期的mounted使用
es6
变量声明let和const
let和const是新增的声明变量的开头的关键字,在这之前,变量声明是用var关键字,这两个关键字和var的区别是,它们声明的变量没有预解析,let和const的区别是,let声明的是一般变量,const申明的常量,不可修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
alert(iNum01); // 弹出undefined 这个叫做变量预解析
var iNum01 = 12;
alert(iNum02);
// es6 新增定义变量的关键字
// let 定义的变量没有变量的预解析
let iNum02 = 199;
// const 也没有变量预解析
alert(iNum03);
const iNum03 = 36;
iNum02 = 25;
// const 定义的是一个常量 不可修改
iNum03 = 37;
</script>
</head>
<body>
</body>
</html>
箭头函数
可以把箭头函数理解成匿名函数的第二种写法,箭头函数的作用是可以在对象中绑定this,解决了JavaScript中this指定混乱的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fnRs(a,b) {
var rs = a + b;
alert(rs);
};
fnRs('cc', 'dd')
// 上面定义函数的方式可以改写成赋值定义的方式
var fnRs = function (a, b) {
var rs = a + b;
alert(rs);
},
// 改成箭头函数的形式
var fnRs = (a, b)=> {
var rs = a + b;
alert(rs);
},
var fnRs = a => {
alert(a);
},
</script>
</head>
<body>
</body>
</html>
数据交互
vue.js没有集成ajax功能,要使用ajax功能,可以使用vue官方推荐的axios.js库来做ajax的交互。 axios库的下载地址:https://github.com/axios/axios/releases
axios完整写法:
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios请求的写法也写成get方式后post方式。
执行get请求
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应,catch是请求失败时的响应
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});