Vue
Vue概述
框架是一个软件的半成品，在全局范围内给了大的约束。库是工具，在单点上给我们提供功能。框架是依赖库的。Vue是框架，而jQuery则是库。
什么是MVC
MVC的核心理念是：你应该把管理数据的代码（Model）、业务逻辑的代码（Controller）、以及向用户展示数据的代码（View）清晰的分离开
通过MVC框架又衍生出了许多其它的架构，统称MV*，最常见的是MVVM
Vue与Angular就是一个MVVM框架，MVVM与MVC最大的区别是模型与视图实现了双向绑定。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的JS 库，API 简洁，很容易上手。
Vue语法讲解
在使用Vue框架之前我们现需要在GitHub上下载Vue相关的包，一共有4个文件
将这4个文件复制到项目的lib目录下，在将这4个文件导入成功后我们就可以在设置的插件下载中下载Vue的插件，下载完成后我们就可以使用Vue框架了
在HTML文件中要是使用Vue框架我们需要在<body>标签中添加<script src="../lib/vue.js" type="text/javascript"></script>来进行对配置文件的调用
之后还需要写一对</script>标签，在这个标签中进行我们代码的编写
1.入门及差值表达式
按照上面讲到的格式，我们创建好HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<script>
代码块
</script>
</body>
</html>
在Java语言中万物皆对象，我们要使用Vue的话就需要创建Vue的对象，而这些操作都在 <script>标签中进行编写
Vue对象的创建
//使用Vue，需要一个Vue的对象
var vm = new Vue({
//绑定元素el
el:"#app",
//传递数据
data:{
/*
Controller
@ResponseBody , JSON
前后端分离 ：
前端专注于前端及伪造数据，留下接口
后端专注数据交互，产生真实数据，数据库中的数据，提供请求路径
*/
msg:"Hello,vue", //请求 ${content}/hello
msg2:"hello2",
msg3:"<h1>hello</h1>"
}
})
在这里我们创建好了Vue对象，这个对象和我们之前讲解的普通对象一样，都包含属性（data）和方法（method），当然要使用这些属性和方法我们就需要进行属性的关联，el:"#app",就将这个对象和id为app的标签进行绑定
这里我们还需要创建一个id为app的标签，注意这个标签的位置，在<body>标签内<script>标签外
<div id="app">
<!--v-cloak：解决插值表达式闪烁问题-->
<p v-cloak>{{msg}}</p>
<!--v-text等价于插值表示，没有闪烁问题-->
<p v-text="msg"/>
<p v-text="msg3"/>
<!--插入一个标签元素，需要使用v-html-->
<p v-html="msg3"></p>
</div>
这里我们通过差值表达式来进行Vue对象的属性值的使用，<p v-cloak>{{msg}}</p>中的{{msg}}就相当于一个占位符，后面会将Vue的msg属性后的值填充到这里，理解起来也非常简单
但是使用<p v-cloak>{{msg}}</p>来进行数据的打印会存在闪烁问题，闪烁问题后面会详解，我们可以在<head>标签中添加下面所示的代码，可以防止闪烁问题的出现
<style>
[v-cloak]{
display: none;
}
</style>
有种更简单的方法可以直接避免闪烁问题，就是使用<p v-text="msg"/>
但是使用<p v-text="msg"/>却不能解析Vue对象中的msg属性中的标签，如果执行<p v-text="msg3"/>，
运行结果如下
这时候就需要<p v-html="msg3"></p>，使用v-html可以解析属性值中的标签
2.绑定数据
在上面讲解了一个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>
运行结果为
3.跑马灯的实现
代码示例
<!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>
运行结果是动态形式，这里无法展示，读者可以自行测试运行
4.双向绑定示例
代码示例
<!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>
运行结果
在框中输入相应的值，可以得到相应的结果
5.计算器的实现
代码示例
<!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>
运行结果，是一个简单的计算器
6.循环
代码示例
<!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>
运行结果
7.循环的应用
代码示例
<!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>
运行结果
在输入框中输入相应的值可以得到相应的结果
8.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>
9.过滤器
<!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>
<!--导入Vue-->
<script src="../lib/vue.js"></script>
<script>
//全局过滤器，不要出现日
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>
10.自定义指令
<!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>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
