Table of contents
1. Introduction to Vue2
1.1, what is vue
Official concept: Vue (pronounced /vjuː/, similar to view) is a front-end framework for building user interfaces.
1.2, initial vue
- M: Model (model) data corresponding to data
- V: View (View) Template==>Page
- VM: ViewModel (view model) Vue instance object
1.3. Build vue environment
There are many ways to build a vue environment:
- use cdn
- Download the javaScript file and host it yourself
- Install using npm
- Use the official cli to build the project
For our first learning, we use the method of downloading js ourselves.
1.4, the first hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data: {
// 用于储存数据，数据供el指定的容器使用
message: 'Hello world!',
},
});
</script>
</html>
Notice
- One vue instance can only take over one container
- Interpolation syntax: { {}} can read all attributes in data
- If the data in data changes, the data used in the container will be automatically updated.
- When writing data, we usually write it as a function. The code is as follows:
data(){
return {
message: 'Hello world!',
}
}
Interview question:
Why should Data be written as a function?
The reason why the data attribute in Vue cannot be written in the format of an object is because the object is a reference to the address and does not exist independently. If a .vue file has multiple sub-components that receive a variable together, changing the value of the variable in one of the sub-components will affect the values of the variable in other components. If they are written as functions, then they have the concept of scope inside them, and they are separated from each other and will not be affected.
2. Basic knowledge
2.1 Instructions
What is a directive?
Vue provides some more convenient operations for page + data. These operations are called instructions.
For example, use this in an HTML page
<div v-xxx=''></div>
In vue, v-xxx is the instruction of vue. The instruction uses data to drive DOM behavior, simplifying DOM operations.
What are the commonly used commands and how to use them
- v-text cannot parse html tags
- v-html can parse html tags
- v-if performs element insertion (append) and removal (remove) operations
- v-else-if
- v-else
- Switching between v-show display:none and display:block
- v-for array item, index object value, key, index
2.2-1 Command v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<div v-text="showText"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
showText:'<h1>vue</h1>',
}
},
})
</script>
</html>
2.2-2 Command v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<div v-html="showHtml"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
showHtml:'<h1>vue</h1>',
}
},
})
</script>
</html>
2.2-3 Instruction v-if
The v-if directive is called a conditional rendering directive, which inserts and deletes elements based on whether an expression is true or false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
isIf:true,
}
},
})
</script>
</html>
2.2-4 Command v-else
The v-else directive adds an "else block" to the v-if directive. The v-else element must immediately follow the v-if element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
<h1 v-else="isIf">我是isIf为false时显示</h1>
<!-- v-if不成立时，才会显示 -->
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
isIf:false,
}
},
})
</script>
</html>
2.2-5 Command v-show
The v-show command controls toggling the display and hiding of an element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
// 表达式为真元素显示
isShow:true,
}
},
})
</script>
</html>
2.2-6 Differences between v-if command and v-show command
Press the F12 key to open the console to view
- When the v-if directive meets the conditions, it will be rendered into HTML. When the conditions are not met, it will not be rendered.
- Elements using the v-show directive will always be rendered into HTML
- Simply set the CSS style attribute for the element. When elements that do not meet the conditions are set to style="display:none"
The difference between application scenarios
- The v-if instruction has higher switching cost. When the condition of the v-if instruction is true, the element will be added. When it is not true, the DOM will be removed, and the internal instructions will not be executed.
- The v-show command has a higher initial rendering cost, v-show is just a simple hide and show
2.2-7 Command v-on
The v-on directive binds event listeners to HTML elements
v-on：事件名称 ="函数名称() "
简写形式 @事件名称 ="函数名称()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
{
{message}}<br>
<button @click="fun1">点击1</button>
<button @dblclick="fun2">双击2</button>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
message: 'Hello world!',
}
},
methods:{
// 声明了一个叫fun1的方法
fun1(){
// 怎么在方法中使用data对象的变量,需要使用this
console.log("button1被点击了",this.message);
this.isShow=false
if(this.isIf){
this.isIf=false
}else{
this.isIf=true
}
},
fun2(){
console.log("button2被双击了");
},
}
})
</script>
</html>
2.2-8 Command v-bind
The v-bind directive can take a parameter after its name. The parameter is usually an attribute of the HTML element.
v-bind:属性名 ="表达式"
简写形式 :属性名 ="表达式"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<div>
<img v-bind:src="img1url" width="300px" height="100px" alt="">
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
img1url:'../img/banner1.jpg',
}
},
})
</script>
</html>
2.2-9 Command v-model
The v-model directive can easily implement two-way binding between form input and application state.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<form action="">
<!-- 双向数据绑定是表单元素进行绑定 -->
<input type="text" name="personNmae" v-model="person.name">
<input type="text" name="age" v-model="person.age">
<select name="love" v-model="person.love">
<option value="eat">吃</option>
<option value="drick">喝</option>
</select>
<input type="radio" v-model="person.sex" name="sex" value="1">男
<input type="radio" v-model="person.sex" name="sex" value="2">女
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
person:{
name:'王琪',
age:18,
love:'eat',
sex:1,
},
}
},
})
</script>
</html>
2.2-10 Command v-for
The v-for instruction can traverse the data in data and display the data on the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<form action="">
<div>
<select v-model="shabi1" name="" id="">
<option v-for="(item, index) in shabi" >{
{item}}</option>
</select>
</div>
<div v-for="(attr,key) in person">
{
{key}}-{
{attr}}
</div>
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
person:{
name:'王导',
age:18,
love:'eat',
sex:1,
},
shabi:["小豪","王导","光头"],
shabi1:"小豪",
}
},
})
</script>
</html>
3. Event binding
Event binding v-on: event name = "expression || function name" abbreviation @event name = "expression || function name" The
event name can be native or customized. Note that the definition of the function must also be in Vue, using the methods attribute.
3.1. Obtain the event object in the method corresponding to the event
Add parentheses. Adding parentheses is usually when additional parameters are required.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<form action="">
<div>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(stu,index) in person.studentArray">
<td>{
{index+1}}</td>
<td>{
{stu.name}}</td>
<td>{
{stu.age}}</td>
<td><button type="button" @click="fun1($event,stu.name)">修改</button></td>
</tr>
</table>
</div>
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
person:{
studentArray:[
{
name:"小豪",age:"18"},
{
name:"导哥",age:"20"}
],
},
}
},
methods:{
// 声明了一个叫fun1的方法
fun1(event,name){
console.log("事件对象",event);
console.log(name);
},
}
})
</script>
</html>
3.1, event modifier-prevent bubbling
Scenario where bubbling occurs: The child element and the parent element are bound to the same event, and then the child element is clicked, and the parent element also triggers the event.
Use native js to prevent bubbling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<div @click="fun3">
外层div
<div @click="fun3">里层div</div>
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun3(event){
console.log("sss");
event.stopPropagation(); // 使用原生js阻止冒泡
},
}
})
</script>
</html>
Use vue event modifiers to prevent bubbling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<div @click="fun3">
外层div
<div @click.stop="fun3">里层div</div>
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun3(event){
console.log("sss");
// event.stopPropagation(); // 使用原生js阻止冒泡
},
}
})
</script>
</html>
3.2, event modifier-prevent default behavior
Some tags have default behaviors, such as the a tag, which has a default page jump.
Prevent default behavior using native js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun5">百度</a>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun5(event){
alert("不可跳转！")
event.preventDefault(); // 使用原生js阻止默认行为
},
}
})
</script>
</html>
Use vue's event modifier to prevent default behavior
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<a href.prevent="http://www.baidu.com" @click="fun5">百度</a>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun5(event){
alert("不可跳转！")
// event.preventDefault(); // 使用原生js阻止默认行为
},
}
})
</script>
</html>
3.3, an event
This event will only be executed once, and the second click will be invalid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<div @click.once="fun7">一次事件</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun7(event){
console.log("sss");
},
}
})
</script>
</html>
3.3, keyboard event modifier
Keyboard event modifier, mainly filters to trigger when specific characters are entered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
<!-- 13表示是输入enter，起的keycode值可以查询 -->
<input type="text" @keyup.13="change">
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
change(event){
console.log(event.key,event.keyCode);
}
}
})
</script>
</html>
4. Vue filter
Filter means that Vue.js supports adding a pipe character "(|)" at the end of {{}} interpolation to filter the data. It is often used to format text, such as capitalization of letters, use of thousand digits in currencies, and comma separation. wait
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app">
{
{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
times: 1690944730436,
}
},
// 2. 定义过滤器
filters: {
//3.定义一个处理函数，参数value为要处理数据,format为传入参数
conversion: function (value, format) {
//这个转换方法就不介绍了，看看就行，过滤器用法为主
var date = new Date(value);
function addZero(date) {
if (date < 10) {
return "0" + date;
}
return date;
}
let getTime = {
yyyy: date.getFullYear(),
yy: date.getFullYear() % 100,
MM: addZero(date.getMonth() + 1),
M: date.getMonth() + 1,
dd: addZero(date.getDate()),
d: date.getDate(),
HH: addZero(date.getHours()),
H: date.getHours(),
hh: addZero(date.getHours() % 12),
h: date.getHours() % 12,
mm: addZero(date.getMinutes()),
m: date.getMinutes(),
ss: addZero(date.getSeconds()),
s: date.getSeconds(),
w: (function () {
let a = ["日", "一", "二", "三", "四", "五", "六"];
return a[date.getDay()];
})(),
};
for (let i in getTime) {
format = format.replace(i, getTime[i]);
}
return format;
},
//4.再定义一个过滤器，给数据前加上"时间为："这几个字
againChange: function (value) {
return "时间为：" + value;
},
},
})
</script>
</html>
5. Dynamic binding of class style in vue
5.1, string writing method
- scenes to be used
- Undefined type of style
- Manually trigger style changes
- Note that
the string uses the existing attributes in the vue instance data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
<div :class="myclass">你好vue</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
myclass:'yangshi yanse',
}
},
})
</script>
</html>
5.1, object writing method
- scenes to be used
- The number of styles and class names are determined, and whether they are dynamically displayed through Boolean
- Object written inline style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
<div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
isyangshi:true,
isyanse:true,
}
},
})
</script>
</html>
5.1, array writing method
- scenes to be used
- The number of styles that need to be bound is uncertain, and the class name is also uncertain.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
<div :class="myclassObject">你好</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
myclassObject:['yangshi','yanse']
}
},
})
</script>
</html>
6. Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
{
{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}}
<div :class="myclass">你好</div>
<div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div>
<div :class="myclassObject">你好</div>
<div v-html="showHtml"></div>
<h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
<h1 v-else>我是isIf为false时显示</h1>
<h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1>
<button @click="fun1">点击1</button>
<button @dblclick="fun2">点击2</button>
<div>
<img v-bind:src="img1url" width="300px" height="100px" alt="">
</div>
<div>
<form action="">
<!-- 双向数据绑定是表单元素进行绑定 -->
<input type="text" name="personNmae" v-model="person.name">
<input type="text" name="age" v-model="person.age">
<select name="love" v-model="person.love">
<option value="eat">吃</option>
<option value="drick">喝</option>
</select>
<input type="radio" v-model="person.sex" name="sex" value="1">男
<input type="radio" v-model="person.sex" name="sex" value="2">女
<div>
<select v-model="shabi1" name="" id="">
<option v-for="(item, index) in shabi" >{
{item}}</option>
</select>
</div>
<div v-for="(attr,key) in person">
{
{key}}-{
{attr}}
</div>
<div>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(stu,index) in studentArray">
<td>{
{index+1}}</td>
<td>{
{stu.name}}</td>
<td>{
{stu.age}}</td>
<td><button type="button" @click="fun3($event,stu.name)">修改</button></td>
</tr>
</table>
</div>
</form>
</div>
<div>
<div @click="fun4">
外层div
<div @click.stop="fun4">里层div</div>
</div>
</div>
<div>
<a href="http://www.baidu.com" @click.prevent="fun5">百度</a>
</div>
<div>
<div @click.once="fun6">一次事件</div>
</div>
<div>
<!-- 13表示是输入enter，起的keycode值可以查询 -->
<input type="text" @keyup.13="change">
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
name:'小豪老放屁！！',
isIf:true,
isShow:true,
img1url:'../img/banner1.jpg',
person:{
name:'王导',
age:18,
love:'eat',
sex:1,
},
showHtml:'<h1>王导</h1>',
shabi:["小豪","王导","光头"],
shabi1:"小豪",
studentArray:[
{
name:"光头",age:"18"},
{
name:"王导",age:"20"}
],
times: 1690944730436,
myclass:'yangshi yanse',
isyangshi:true,
isyanse:true,
myclassObject:['yangshi','yanse']
}
},
methods:{
// 声明了一个叫fun1的方法
fun1(){
// 怎么在方法中使用data对象的变量,需要使用this
console.log("button1被点击了",this.name);
this.isShow=false
if(this.isIf){
this.isIf=false
}else{
this.isIf=true
}
},
fun2(){
console.log("button2被双击了");
},
fun3(event,name){
console.log("事件对象",event);
console.log(name);
},
fun4(event){
console.log("111");
// elent.stopPropagation(); // 使用原生js阻止冒泡
},
fun5(event){
alert("111");
// elent.preventDefault(); // 使用原生js阻止默认行为
},
fun6(){
console.log("sss");
},
change(event){
console.log(event.key,event.keyCode);
}
},
// 2. 定义过滤器
filters: {
//3.定义一个处理函数，参数value为要处理数据,format为传入参数
conversion: function (value, format) {
//这个转换方法就不介绍了，看看就行，过滤器用法为主
var date = new Date(value);
function addZero(date) {
if (date < 10) {
return "0" + date;
}
return date;
}
let getTime = {
yyyy: date.getFullYear(),
yy: date.getFullYear() % 100,
MM: addZero(date.getMonth() + 1),
M: date.getMonth() + 1,
dd: addZero(date.getDate()),
d: date.getDate(),
HH: addZero(date.getHours()),
H: date.getHours(),
hh: addZero(date.getHours() % 12),
h: date.getHours() % 12,
mm: addZero(date.getMinutes()),
m: date.getMinutes(),
ss: addZero(date.getSeconds()),
s: date.getSeconds(),
w: (function () {
let a = ["日", "一", "二", "三", "四", "五", "六"];
return a[date.getDay()];
})(),
};
for (let i in getTime) {
format = format.replace(i, getTime[i]);
}
return format;
},
//4.再定义一个过滤器，给数据前加上"时间为："这几个字
againChange: function (value) {
return "时间为：" + value;
},
},
})
</script>
</html>
at last
送大家一句话：穷且益坚，不坠青云之志