Vue.js 是什么
- Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
- 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
- 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue准备
了解关于 HTML、CSS 和 JavaScript 的中级知识。
如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的。
Vue中文官网教程:https://cn.vuejs.org/v2/guide/
**Vue下载:**https://github.com/vuejs/vue
Idea中使用Vue
需要安装Vue插件:
下载完成后:
项目结构:
入门及插值表达式
前端页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--v-cloak:解决插值表达式闪烁问题-->
<p v-cloak>{{msg}}</p>
<!--v-text等价于插值表示,没有闪烁问题-->
<p v-text="msg2"/>
<p v-text="msg3"/>
<!--插入一个标签元素,需要使用v-html-->
<p v-html="msg3"></p>
</div>
<!--
引入Vue.JS
script必须成对出现,不能自闭合
MVC : M V C
-->
<script src="../lib/vue.js"></script>
<script>
//使用Vue,需要一个Vue的对象
var vm = new Vue({
//绑定元素el
el:"#app",
//传递数据
data:{
/*
Controller
@ResponseBody , JSON
前后端分离 :
前端专注于前端及伪造数据,留下接口
后端专注数据交互,产生真实数据,数据库中的数据,提供请求路径
*/
msg:"Hello,vue", //请求 ${content}/hello
msg2:"hello2",
msg3:"<h1>hello</h1>"
}
})
</script>
</body>
</html>
输出结果;
绑定数据
<!DOCTYPE html>
<html lang="en"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>
<!--绑定HTML元素属性的值,
需要使用 v-bind: + 属性名 = "vue中数据的key"
-->
用户名 : <input type="text" name="username" v-bind:value="msg">
</p>
<p>
<!--v-bind: 简化就是 :-->
用户名 : <input type="text" name="username" :value="msg">
</p>
<p>
<!-- 只要表达式合法,就能执行
变量 + 变量
变量 + 字符串常量
变量 + 字符串 + 变量
-->
用户名 : <input type="text" name="username" :value="msg+'你好'"> <br>
用户名 : <input type="text" name="username" :value="msg+'+'+msg">
</p>
<!--
方法调用,绑定方法: v-on:
click 和 onclick
1、onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么。
2、click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件
3、click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;
4、onclick则是给这个id注册一种行为,可以重复触发
5、click 是方法;onclick是事件;执行click就是模拟鼠标点击,同时会触发onclick事件。
-->
<p><button v-on:click="hello()">点击</button></p>
<!--v-on: 可以简化为一个 @-->
<p><button @click="hello()">点击</button></p>
<p><input type="text" value="Hello" :style="style" ></p>
<!--注意点:
1. v-bind 用来绑定元素属性的数据,可以是任意属性,只要数据合法;简写为 :
2. v-on 给元素事件[包括但不限于,点击,键盘按下,鼠标移动,窗口缩放]绑定方法,只要方法没有错,简写@
-->
</div>
<script src="../lib/vue.js"></script>
<script>
function f() {
alert("hello")
}
var vm = new Vue({
//绑定元素el
el:"#app",
//数据:
data:{
msg:"hello,Vue2",
style:"border-radius: 20px"
},
//方法
methods:{
hello:function () {
alert("方法被调用了!")
}
}
})
</script>
</body>
</html>
结果输出:
跑马灯效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="toStart()">启动</button>
<button @click="toStop()">停止</button>
<h6 v-html="msg" :style="style"></h6>
<input type="text" :value="msg"/>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"希望你们每次来上网,都是因为喜欢,而不是无聊!就像结婚,是因为爱情,而不是因为凑合。",
//注意点 : 赋值,在这里不能使用=号 ,要使用冒号
lightIntervalID:null,
style:"color: red;font-weight: bold;background-color:black"
},
methods:{
toStart(){
/*
vue对象中data、methods里面声明的内容全部都会成为vm的直接属性、方法
所有这些内容应该直接使用this访问,而不是【this.data.xxx、this.methods.xxx()】
*/
console.log("Haaa");
//如果不为null,直接返回(表示此时定时器已经启动,不可重复启动)
if (this.lightIntervalID!=null) {
return;
}
var _this = this; //别名
this.lightIntervalID = setInterval(function () {
//字符走动,跑马灯效果
_this.msg = _this.msg.substring(1).concat(_this.msg.charAt(0))
/*
希望你们每次来上网,都是因为喜欢,而不是无聊!就像结婚,是因为爱情,而不是因为凑合。
望你们每次来上网,都是因为喜欢,而不是无聊!就像结婚,是因为爱情,而不是因为凑合。希
你们每次来上网,都是因为喜欢,而不是无聊!就像结婚,是因为爱情,而不是因为凑合。希望
们每次来上网,都是因为喜欢,而不是无聊!就像结婚,是因为爱情,而不是因为凑合。希望你
*/
},200);
},
toStop(){
clearInterval(this.lightIntervalID);
this.lightIntervalID=null;
}
}
})
</script>
</body>
</html>
输出结果
双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>
<!--value是不会变化,但是我们需要的是可以进行调整的
数据和视图层可以双向绑定的东西。v-model-->
单价 :<input type="text" v-model="price">
数量 :<input type="text" v-model="num">
<button @click="calc()">计算</button>
总价 :<span v-text="sum"></span>
</p>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
price:3,
num:0,
sum:0
},
methods:{
calc(){
this.sum = this.price * this.num
}
}
})
</script>
</body>
</html>
结果输出:
计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
num1: <input type="text" v-model="num1">
<select v-model="opr">
<option value="+" selected disabled >+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
num2: <input type="text" v-model="num2">
<button @click="calc()">=</button>
<span v-text="sum"></span>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:1,
sum:0,
opr:'+'
},
methods:{
calc(){
//判断标识
var flag = this.opr;
switch (flag){
case '+':
//这里取得的值为字符串,我们需要转换为int类型
this.sum = parseInt(this.num1) + parseInt(this.num2);
console.log(this.sum);
break;
case '-':
//这里取得的值为字符串,我们需要转换为int类型
this.sum = parseInt(this.num1) - parseInt(this.num2);
console.log(this.sum);
break;
case '*':
//这里取得的值为字符串,我们需要转换为int类型
this.sum = parseInt(this.num1) * parseInt(this.num2);
console.log(this.sum);
break;
case '/':
//这里取得的值为字符串,我们需要转换为int类型
this.sum = parseInt(this.num1) / parseInt(this.num2);
console.log(this.sum);
break;
}
}
}
})
</script>
</body>
</html>
结果输出:
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--v-for:遍历普通数组: val in arrays , 这个var就是取出来的值 -->
<p v-for="name in names">{{name}}</p>
<!--数组下标从0开始,index是默认的属性-->
<p v-for="name,index in names" v-text="name+'---'+index"/>
<hr>
<!--遍历对象数组-->
<p v-for="student in students">{{student.id}}--{{student.name}}--{{student.age}}
</p>
<hr>
<!--遍历普通对象的键和值-->
<p v-for="value,key in kuangshen">{{key}}---{{value}}</p>
<!--for循环固定的次数,遍历的值名不能为var-->
<p v-for="num in 12">{{num}}</p>
<!--
v-for : 用于循环,可以循环 数组,打印对象的值,循环固定次数;
value in arrays
-->
</div>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
names:["张三","李四","王五","赵六","田七"],
students:[
{id:1,name:"喜洋洋",age:1},
{id:2,name:"懒洋洋",age:2},
{id:3,name:"灰太狼",age:3}
],
kuangshen:{id:1,name:"秦疆",age:3,hobby:"code"}
}
})
</script>
</body>
</html>
结果输出:
for循环应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
id: <input type="text" v-model="id">
name: <input type="text" v-model="name">
age: <input type="text" v-model="age">
<button @click="add()">添加信息</button>
<!--显示所有用户的信息--><hr>
<p v-for="student in students" :key="student.id">
<input type="checkbox">
{{student.id}}--{{student.name}}--{{student.age}}
</p>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
id:1,
name:"张三",
age:2,
students:[
{id:1,name:"喜洋洋",age:1},
{id:2,name:"懒洋洋",age:2},
{id:3,name:"灰太狼",age:3}
]
},
methods:{
add(){
//添加一个人员信息
this.students.unshift({id:this.id,name:this.name,age:this.age});
}
}
})
</script>
</body>
</html>
v-if&v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="change()">显示</button>
<!--如果只有一行代码的情况下,可以直接写在事件中
一行代码不用写this , 因为this在我们的函数中,指代本身,但是这里不需要,我们直接操作属性即可;
-->
<button @click="flag=false">隐藏</button>
<button @click="flag=!flag">切换</button>
<!--v-if为true,则显示-->
<p v-if="flag">希望你们每次来上网,都是因为喜欢,而不是无聊!就像结婚,是因为爱情,而不是因为凑合。</p>
<!--v-show为true,则显示-->
<p v-show="flag">希望你们每次来上网,都是因为无聊,而不是喜欢!就像结婚,是因为凑合,而不是因为爱情。</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
<a href="#">点击链接</a>
</div>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{
change(){
this.flag=true;
}
}
})
</script>
</body>
</html>
结果输出:
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app1">
{{msg|ri()}}
</div>
<div id="app2">
{{msg|ri()}}
</div>
<script src="../lib/vue.js"></script>
<script>
<!--导入Vue-->
//全局过滤器,不要出现日
Vue.filter("ri",function(a){
return a.replace('日',"*")
});
var vm1 = new Vue({
el:"#app1",
data:{
msg:"我爱你,日"
},
filters:{
ri:function(a){
return a.replace('日',"#")
}
}
});
var vm2 = new Vue({
el:"#app2",
data:{
msg:"向日葵"
},
filters:{
ri(a){
return a.replace('日',"!")
}
}
});
</script>
</body>
</html>
结果输出:
自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-kuang="'red'" value="西部开源"/>
</div>
<script src="../lib/vue.js"></script>
<script>
//自定义指令 v-* v-kuang
Vue.directive("kuang",{
bind:function (el,binding) {
//el,指代指令作用的元素
//binding.value 就是你自定义指令后面的具体指 , v-kuang=""
el.style.color = binding.value;
}
});
//09: 使用BootStrap操作列表
//Vue对象
var vm = new Vue({
el:"#app",
directives:{}
})
</script>
</body>
</html>
结果输出:
过滤器笔记
什么是过滤器?
可以用来过滤一个网页上的资源,比如将网页上的所有的 ,都改为 - , 实现一个过滤效果
如何自定义一个过滤器
全局过滤器 (作用域:全局) 需要再vm对象创建之前创建,使用Vue.filter(“name”,function())来创建
Vue.filter(name,function (data,old,newWord) {
});
局部过滤器 (作用域,仅在这个对象中有效) 需要再vm对象里面创建,加上一个filter属性,里面添加不同的过滤器,格式
filters:{
name:function f() {
},
name2:function f() {
}
}
如何调用过滤器
在插值表达式或者v-bind下使用 {{data|过滤器的名字(arg1,arg2,arg3…)}}
就近原则
如果局部过滤器和全局过滤器名字相同,优先调用进的;局部过滤器