1.{{}} 模板语法
2.Vue.createApp().mount("#app") 初始化
3.为啥是函数?
vue是组件开发,会多次复用,如果是对象,会共享,必须是函数,返回一个新对象
data(){
return{
myname:'hh' //状态
}
}
4.vue插件 识别vue,调试
5.vscode安装 Volar插件
6.vue2的方法
Object.defineProperty(obj,"属性",{
get(){},
set(val){} //缺点:无法监听数组的改变
})
7.est6的proxy
new Proxy(target,{
get(target,key){},
set(target,key,value){}
})
8.{{}}可以支持什么?
表达式,三目运算符
9.v-bind 动态绑定(属性上进行绑定)
<div v-bind:class="isShow:'':'hidden' "></div>
可以省略v-bind ,直接 :class
<img v-bind="obj" /> //绑定对象
10.事件绑定
<button v-on:click="方法名"></button> //替换click,v-on固定 v-on可以用@替换,@click
methods:{
方法名(){
this.myname=""
}
}
11.v-for
<li v-for="item,index in arr">{{item}}---{{index}}</li>
12.v-model
13.v-show 先创建,再判断
14.v-if 先判断,后创建节点
15.v-html
16.template 包装元素
17.in===of 可迭代数据
以上为选项式vue3写法
案例
TODOList
<div id="app">
<input type="text" v-model="msg">
<button @click="add()">add</button>
<ul>
<li v-for=" item,index in arr">
{{item}}
<button @click="del(index)">delete</button>
</li>
</ul>
<div v-show="arr.length===0">暂无待办事项</div>
</div>
<script>
var obj={
data(){
return{
arr:[],
msg:''
}
},
methods:{
add(){
this.arr.push(this.msg)
console.log(this.arr);
this.msg=""
},
del(index){
this.arr.splice(index,1)
console.log(this.arr);
}
}
}
var app=Vue.createApp(obj).mount('#app')
</script>
点击变色案例
<script src="./vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="item,index in arr" :class=" index===current? 'active' : '' "
@click="hidelClick(index)">{{item}}</li>
</ul>
</div>
<script>
var obj={
data(){
return{
arr:["菜单","音乐","美食","我的"],
current:0
}
},
methods:{
hidelClick(index){
this.current=index
}
}
}
var app=Vue.createApp(obj).mount('#box')
</script>
模糊查询案例
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg">
<ul>
<template v-for="item in dataList">
<li v-if="item.includes(msg)">
{{item}}
</li>
</template>
</ul>
</div>
<script>
var obj={
data(){
return{
dataList:[
'aa','bb','cc','ff','aca','hhh','ggg'
],
msg:''
}
}
}
var app=Vue.createApp(obj).mount('#box')
</script>
权限管理案例
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<select v-model="selected">
<option value="1">管理员</option>
<option value="2">编辑</option>
</select>
<ul>
<template v-for="item in dataList">
<li v-if="role[selected].includes(item.path)">
{{item.title}}
</li>
</template>
</ul>
</div>
<script>
var obj = {
data() {
return {
selected: 1,
role: {
1: ["/home", "/user", "/manager", "/article"],
2: ["/edit"],
},
dataList: [
{
title: "首页",
path: "/home",
},
{
title: "用户管理",
path: "/user",
},
{
title: "权限管理",
path: "/manager",
},
{
title: "文章管理",
path: "/article",
},
{
title: "编辑管理",
path: "/edit",
},
],
};
}
};
var app = Vue.createApp(obj).mount("#box");
</script>
