Vue3基础语法
文章目录
- 一、内置指令
-
-
- 1.文本渲染
- 2.属性渲染
- 3.条件渲染
- 4.列表渲染
- 5.事件
-
- 二、自定义指令
- 三、计算与监听
-
- 1.计算 computed
- 2.监听 watch
一、内置指令
内置指令 v- 开头的特殊属性 ，联系html模板与JavaScript数据模型
1.文本渲染
- v-text
- v-html
- {{msg}} 只能写一行表达式，不能写复杂js
2.属性渲染
- v-bind :属性名=“值”
缩写
：属性名=“值”
3.条件渲染
-
v-if 隐藏式移除节点
-
v-else if
-
v-else
-
v-show 隐藏css方式
4.列表渲染
v-for="(item,index) in list" :key= "item"
- item变量的当前数据, index当前的下标
- key是给vue遍历的节点,一个唯一的标识符， 更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面 key的值要唯一
- 遍历对象
v-for = "(value,key) in obj " - 范围
v-for = "item in 5 "
5.事件
- v-on指令
缩写： @
监听DOM事件，并在触发事件时执行一些 JavaScript - 事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 捕获
.self 自身元素触发
.once 执行一次
.passive 滚动立即触发，不等待滚动完成 - 按键修饰符
.enter 回车
.tab 制表
.delete “删除”和“退格”键
.esc 取消
.space空格
.up 上
.down 下
.left 左
.right 右 - 表单修饰符
.lazy
添加 lazy 修饰符，从而转为在 change 事件之后进行同步
在“change”时而非“input”时更新
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
.trim过滤首尾空白
- 案例1 步进器
<body>
<div class="app">
<button @click="add(-1)">-</button>
<span>{{num}}</span>
<button @click="add(1)">+</button>
</div>
</body>
<script type="text/javascript">
Vue.createApp({
//存放数据
data(){
return{num:1}
},
// 存放方法
methods:{
add(n){
this.num+=n;
}
}
}).mount(".app")
</script>
- 案例2 选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.active{
color: #fff;
background-color: #ff7700;
}
</style>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<p>
<button @click="num=1" :class="num==1?'active':''">css</button>
<button @click="num=2" :class="num==2?'active':''">html</button>
<button @click="num=3" :class="num==3?'active':''">js</button>
</p>
<div v-if="num===1">css内容</div>
<div v-if="num===2">html内容</div>
<div v-if="num===3">js内容</div>
</div>
</body>
<script type="text/javascript">
Vue.createApp({
data(){
return{num:1}
},
methods:{
add(n){
this.num+=n;
}
}
}).mount(".app")
</script>
</html>
二、自定义指令
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
created：创建。
beforeMount：父组件挂载前
mounted：挂载后。
beforeUpdate：更新前
<body>
<div class="app">
<input type="text" v-focus="flag">
<button @click="flag=!flag">按钮</button>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
flag: true
}
},
// 自定义指令 操作dom
directives: {
// 指令名称 focus
"focus": {
// mounted；dom节点挂载后执行
// beforeUpdate更新前
beforeUpdate(el, binding) {
console.log(el, binding);
if (binding.value) {
el.focus()
}
},
}
}
}).mount(".app")
</script>
三、计算与监听
1.计算 computed
对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性
（从现有数据计算出新的数据）
案例 关键词查找
<body>
<div class="app">
<input type="text" placeholder="请输入关键字搜索" v-model.trim="keyword">
<table border="" rules="all" style="width: 600px; text-align: center;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr v-for="item in fstudents" :key="item.phone">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
</tr>
</table>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
keyword: '',
students: [
{name: '李四',sex: '男',age: 29,phone: '18921221122'},
{name: '王五',sex: '女',age: 39,phone: '18921788723'},
{name: '赵六',sex: '男',age: 49,phone: '18921556124'},
{name: '曾七',sex: '男',age: 29,phone: '18921221125'},
{name: '刘八',sex: '女',age: 39,phone: '18921788726'},
{name: '黄九',sex: '男',age: 29,phone: '18921221127'},
{name: '王五',sex: '女',age: 39,phone: '18921788728'},
{name: '王五',sex: '女',age: 39,phone: '18921788729'},
{name: '赵六',sex: '男',age: 49,phone: '18921556110'},
{name: '李思思',sex: '男',age: 29,phone: '18921221111'},
{name: '张三',sex: '女',age: 19,phone: '18921212112'},
{name: '李四',sex: '男',age: 29,phone: '18921221113'},
{name: '王五',sex: '女',age: 39,phone: '18921788714'},
{name: '赵六',sex: '男',age: 49,phone: '18921556115'},
{name: '李四',sex: '男',age: 29,phone: '18921221116'},
{name: '王五',sex: '女',age: 39,phone: '18921788717'},
{name: '李四',sex: '男',age: 29,phone: '18921221118'},
{name: '李五五',sex: '男',age: 29,phone: '18921221133'}
]
}
},
computed: {
"fstudents": function () {
return this.students.filter(item => {
var flag = true;
if (this.keyword !== '') {
var str = JSON.stringify(item);
str.includes(this.keyword) ? flag = true : flag = false;
}
return flag;
})
}
},
}).mount(".app")
</script>
2.监听 watch
有时需要一个自定义的侦听器当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
案例 简易计算器
<body>
<div class="app">
<input type="text" v-model.number="obj.n1">
<select v-model="obj.type">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model.number="obj.n2">=
<button>{{obj.n3}}</button>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
obj: {
n1: 1,
n2: 1,
type: "+",
n3: 2
}
}
},
watch: {
obj: {
handler(nval) {
this.obj.n3 = eval(this.obj.n1 + this.obj.type + this.obj.n2);
},
deep: true,
}
}
}).mount(".app")
</script>
