安装
适合有一定Java后端和前端基础的
Vue的下载和安装可以参考这篇文章：https://blog.csdn.net/qq_41112238/article/details/105727188
Vue简介
概念
一套用于构建用户界面（用Vue往html页面中填充数据）的前端框架
特性
一、数据驱动视图（单向数据绑定）
- 使用了Vue的页面中，Vue会监听数据变化，自动重新渲染页面结构。就是说数据变化后，页面会自动更新。
二、双向数据绑定
- 在网页中，form表单负责采集数据，Ajax负责提交数据。
- 填写表单时，双向数据绑定可以在不操作DOM的前提下自动把用户输入的数据填写到数据源中。也就是说，页面上表单采集的数据发生变化时，Vue会自动获取并更新到js中。
MVVM
MVVM（Model View ViewModel）是Vue实现数据驱动视图和双向数据绑定的核心原理，它把每个HTML页面都拆分成这三部分：
- Model：当前页面渲染时依赖的数据源
- View：当前页面渲染的DOM结构
- ViewModel：Vue的实例，把页面的数据源（Model）和页面结构（View）连接在了一起
版本
- 1.x版本：几乎被淘汰
- 2.x版本：主流版本
- 3.x版本：尚不成熟
Vue的基本使用
基本使用步骤
0、创建一个HTML文件
1、导入vue.js的script脚本文件
2、声明一个将要被Vue控制的DOM区域
3、创建Vue实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 2.声明一个将要被Vue控制的DOM区域 -->
<!-- View视图区域，div的id和el里的值对应，用{{data中的属性名}}获取vue对象data中属性的具体数值 -->
<div id = "app">
我的名字是：{{username}}
</div>
<!-- 1. 导入vue.js的script脚本文件 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//3.创建Vue实例对象
new Vue({
//el属性是固定写法，表示vm实例要控制的区域，接收的值是一个选择器
el:'#app',
//Model数据源区域，data对象是要渲染到页面上的数据
data:{
username:'假面骑士'
}
})
</script>
</body>
</html>
效果：
Vue指令
指令：为Vue开发者提供的模板语法，用于渲染页面的基本结构，包括以下六种：
内容渲染指令
渲染DOM元素的文本内容
v-text
示例：
<div id="app">
<p v-text="username"></p>
</div>
缺点：会覆盖原有内容
效果：
{{ }}
插值表达式，用于解决v-text会覆盖原本值的问题，实际使用更多
示例：
<div id="app">
<p>我的名字是{{username}}</p>
</div>
效果：
插值表达式中支持JavaScript表达式的运算：
例如：
<div id="app">
{{ 1 > 0 ? 'YES' : 'NO'}}
</div>
效果：
v-html
优点：可以渲染带html标签的字符串
示例：
<div id="app">
<p>我的名字是{{username}}</p>
<p v-html="info"></p>
</div>
....
<script>
new Vue({
el:'#app',
data:{
username:'假面骑士',
info:'<h1>Revice</h1>'
}
})
</script>
效果：
属性绑定指令
v-bind
插值表达式不能用在属性上，只能用在内容上
例如：
<div id="app">
<input type="text" placeholder="{{tips}}">
</div>
....
<script>
new Vue({
el:'#app',
data:{
tips: '我的名字是假面骑士'
}
})
效果：
使用v-bind：
<div id="app">
<input type="text" v-bind:placeholder="tips">
</div>
可以简写为冒号：
<div id="app">
<input type="text" :placeholder="tips">
</div>
效果：
v-bind也支持JavaScript表达式运算：
<div id="app">
//如果绑定内容需要动态拼接，字符串需要使用单引号''
<input :value="'我的名字是'+tips">
</div>
...
<script>
new Vue({
el:'#app',
data:{
tips: '假面骑士'
}
})
</script>
效果：
事件绑定指令
v-on
语法：v-on:事件名称=事件方法
不绑定参数示例：
<div id="app">
<p>我的存款余额是{{ money }}</p>
<button v-on:click="addMoney">+1000</button>
<button v-on:click="subMoney">-1000</button>
</div>
...
<script>
new Vue({
...
//定义事件方法 可写成:function，也可省略
methods: {
addMoney: function () {
//this是当前的Vue对象
this.money += 1000;
},
subMoney() {
this.money -= 1000;
}
}
})
</script>
初始效果：
点击+1000按钮：
点击-1000按钮：
绑定参数示例：
<div id="app">
<p>我的存款余额是{{ money }}</p>
<button v-on:click="addMoney(9999)">得加钱</button>
</div>
...
<script>
methods: {
addMoney: function (n) {
this.money += n;
}
}
</script>
效果：
简写方式：
使用@表示v-on:
<div id="app">
<p>我的存款余额是{{ money }}</p>
<button @click="addMoney(9999)">得加钱</button>
</div>
使用f()表示f : function()
<script>
methods: {
addMoney: function (n) {
this.money += n;
}
}
</script>
$event
示例：
<div id="app">
<p>我的存款余额是{{ money }}</p>
<button @click="add">加钱</button>
</div>
...
<script>
new Vue({
el:'#app',
data:{
money: 0
},
methods: {
//不传参数时，默认收到的参数是事件对象event
add(e) {
this.money += 1;
if (this.money % 2 === 0) {
e.target.style.backgroundColor = 'red';
} else {
e.target.style.backgroundColor = 'green';
}
}
}
})
</script>
效果：
传参数时，使用$event：
<button @click="add($event)">加钱</button>
<script>
...
add($event) {
this.money += 1;
if (this.money % 2 === 0) {
$event.target.style.backgroundColor = 'red';
} else {
$event.target.style.backgroundColor = 'green';
}
}
...
</script>
事件修饰符
-
prevent（常用） 阻止默认行为（链接跳转、表单提交）
代码：<div id="app"> <a href="http://www.baidu.com" @click="f">跳转百度</a> </div> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:'#app', //定义事件方法 methods: { f() { } } }) </script>点击前：
点击后：
改为如下代码时，不会跳转：<a href="http://www.baidu.com" @click.prevent="f">跳转百度</a> -
stop（常用） 阻止事件冒泡
代码：<div id="app"> <div @click="f1" style="height: 150px;background-color: #42b983;padding-left: 20px"> <button @click="f2">按钮</button> </div> </div> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:'#app', methods: { f1() { console.log("我是") }, f2() { console.log("假面骑士") } } }) </script>点击“按钮”
观察控制台输出：
将代码改为：<button @click.stop="f2">按钮</button>点击观察控制台：
-
capture 以捕获模式触发当前事件的处理函数
-
once 绑定的事件只触发一次
-
self 只有在event.target是自身元素时触发事件处理函数
按键修饰符
<div id="app">
<!-- 按下ESC时调用clean方法，按下ENTER触发commit -->
<input type="text" @keyup.esc="clean" @keyup.enter="commit">
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el:'#app',
//定义事件方法
methods: {
clean(e) {
e.target.value = '';
},
commit(e) {
e.target.value = '触发了commit方法';
}
}
})
</script>
双向绑定指令
v-model
在不获取DOM的情况下，快速获取表单数据（input、textarea、seletct）
input示例：
<div id="app">
<p>我的名字是:{{username}}</p>
<!-- 双向绑定，改变了数据源，会影响p标签的值 -->
<input type="text" v-model="username">
<!-- 单向绑定，未改变数据源，不会影响p标签的值 -->
<input type="text" :value="username">
</div>
效果：
select示例：
<div id="app">
<select v-model="city">
<option value="">请选择：</option>
<option value="1">Revi</option>
<option value="2">Vice</option>
<option value="3">Revice</option>
</select>
</div>
<script>
new Vue({
el:'#app',
data:{
city: '3'
}
})
</script>
效果：
v-model 修饰符
-
number 自动将输入的值转为数值类型
正常情况下input输入的是字符串，+做的是字符串拼接，使用.number可以将其转换为数值相加
例：<div id="app"> <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2}}</span> </div> <script> new Vue({ el:'#app', data:{ n1: 1, n2: 1 } }) </script> -
trim 自动过滤首尾空白字符
例：<input type="text" v-model.trim="username"> -
lazy 在“change”而非“input”时更新
在值中间变化的过程中不会改变数据源
例：<input type="text" v-model.trim="username">
条件渲染指令
v-if 和 v-show
区别：v-if直接将代码删除，v-show使用display属性隐藏元素。
-
如果刚进入页面，某些元素默认不展示，后期也可能不需要使用，v-if更好。
-
如果频繁切换元素的显示状态，使用v-show更好。
例：<div id="app"> <p v-if="flag">这是v-if控制的元素</p> <p v-show="flag">这是v-show控制的元素</p> </div> <script> new Vue({ el:'#app', data:{ flag: true } }) </script>
v-else-if
充当v-if的“else if”，可以连续使用，但必须配合v-if使用
例：
<div id="app">
<p v-if="type==='A">优秀</p>
<p v-else-if="type==='B">良好</p>
<p v-else-if="type==='C">一般</p>
<p v-else>差</p>
</div>
列表渲染指令
v-for
基于数组来循环渲染一个列表结构，语法：v-for="(item, index) in list"
例：
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thread>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
</thread>
<tbody>
<!-- 用到了v-for指令，一定要绑定一个key属性（字符串或数值），否则会报错，尽量把id作为它的值，因为key的值不允许重复否则报错：Duplicate keys detected，索引不具有唯一性不推荐作为 key值-->
<tr v-for="(item, index) in list :key="item.id">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[
{id: 1, name: 'revi'},
{id: 2, name: 'vice'},
]
}
})
</script>
过滤器
过滤器常用于文本的格式化，可以用在两个地方：插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由管道符进行调用，例：
<!-- 使用filter1对message的值过滤 -->
<p>{{ message | filter1 }}</p>
<!-- 使用filter2对uid的值过滤 -->
<div v-bind:id =" uid | filter2"></div>
<script>
const vm = new Vue({
...
filters:{
//val表示管道符“|”前的值
filter2(val){
//过滤器中一定要有一个返回值，如果uid=1，现在返回2
return val + 1
}
}
});
</script>
私有过滤器和全局过滤器
在filters节点下定义的过滤器属于“私有过滤器”，只在当前Vue对象控制的el区域内有效。如果希望在多个Vue实例间共享过滤器，需要定义全局过滤器，例：
Vue.filter('filterName',(val) => {
return ....
})
如果全局过滤器和私有过滤器名字一样，调用的是私有过滤器。（就近原则）
连续调用过滤器
例：
<p>{{ message | filter1 | filter2}}</p>
侦听器
watch侦听器
监视数据的变化，对数据的变化做特定操作，例：
const vm = new Vue({
data: {username: ' '},
//侦听器写到watch节点下，监视的数据名作为方法名
watch: {
//监听username值的变化，第一个参数是新值，第二个是旧值
username(newVal, oldVal) {
}
}
})
判断用户名是否被占用
<script>
new Vue({
data: {username: ' '},
watch: {
username(newVal) {
$.get('后端url' + newVal， function (result) {
if() ....
})
}
}
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
