vue基础

VIP文章 bucketNiuNiu

已于 2022-06-22 17:08:14 修改

阅读量140

点赞数

分类专栏： vue 文章标签：前端 vue.js html5 javascript

于 2022-06-22 16:54:00 首次发布

本文链接：https://blog.csdn.net/qq_36596869/article/details/125412361

版权

指令语法事件修饰符键盘事件（用于解析标签）

列表渲染 key的作用（默认使用index作为key）列表过滤列表排序

vue基础

环境提示

<script >Vue.config.productionTip=false</script>

<script >

插值语法（解析标签体内容）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="../vue.js"></script>

<title>Document</title>

</head>

<body>



<div id="root">

<h1>



{ {name.toUpperCase()}}



{ {Date.now()}}

</h1>

</div>

</body>

</html>

<script>

Vue.config.productionTip = false

// 实例化容器(通常用css选择器)

//多个容器对一个实例只解析第一容器

//一个容器对多个实例只解析第一个实例

//容器：实例：组件=1：1：many

new Vue({

el:"#root",

data:{

name:"dsd"

}

})

</script>

指令语法事件修饰符键盘事件（用于解析标签）

<!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>Document</title>

<script src="../vue.js"></script>

<style>

ul {

width: 100px;

height: 80px;

background-color: aqua;

overflow: auto;

}

li {

width: 80px;

height: 80px;

background-color: burlywood;

}

</style>

</head>

<body>

<div id="app">



<input type="text" name="name" :value="name" id="">

<hr>



<input type="text" name="model" v-model:value="model" id="">



<h4 v-if="num == 1">



<template>1</template>

</h4>

<h4 v-else-if="num == 2">2</h4>

<h4 v-else>3</h4>



<h4 v-show="show">展示</h4>

<h4 v-show="notShow">不展示</h4>



<button @click="click1">点击事件1</button>



<button @click="click2('你好',$event)">点击事件2</button>



<div v-for="item in items" :key="item.age">

<div>{ {item.age}}</div>

</div>



<input type="text" placeholder="提示输入" @keyup.enter="top" >





<a href="http://www.baidu.com" @click.prevent="hello">阻止默认行为</a>



<div @click="show1">show1

<div @click.stop="show2">show2</div>

</div>



<button @click.once="show1">触发一次</button>



<div @click.capture="showMsg(1)">showMsg1

<div @click="showMsg(2)">showMsg2</div>

</div>



<div @click.self="show1">show1

<div @click="show2">show2</div>

</div>





<ul @wheel.passive="demo">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

</body>

</html>

<script>

let name = "哈哈"

let test = {

age: "22",

}

// 向对象追加值，参数对象 key 值（对象）

Object.defineProperty(test, 'name', {

// value: name,

enumerable: true,//开启后追加之才可遍历默认false

// writable: true,//开启后属性才可被修改默认false 与get set不能同时用

configurable: true,//开启后才可被删除默认false

//当有人获取name值时，get函数就被调用（与configurable无关）用做动态取赋值

get() {

return name

},

//当修改name时，set函数会被调用，且会收到具体值（与configurable无关）用做动态取赋值

set(value) {

console.log(name + "1")

name = value

console.log(name + "2")

}

})

console.log(test)

console.log(Object.keys(test))//获取对象的key值，返回值为数组

const VM = new Vue({

el: "#app",

data: {

name: "这是name",

num: 5,

show: true,

notShow: false,

model: "model",

items: [

{ age: 1 },

{ age: 2 },

{ age: 3 },

]

},

// data第二种写法（vue自己调）必须为普通函数不可为箭头函数（没有this对象）

/** date() {

return {

name: "这是name",

num: 5,

show: true,

notShow: false,

model: "model"

}

},*/

/**

create() {

// el 第二种写法

VM.$mount('#app');

}*/

methods: {

click1(event) {

console.log(event)//默认传参事件

console.log(this)//为vm或组件实例对象，箭头函数为window

},

click2(key, event) {

console.log(event)//默认传参事件

console.log(key)

},

hello(e) {

e.preventDefault() //js阻止默认行为

alert('你好')

},

show1() {

alert("show1")

},