VUE学习
一、开始
1、导入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2、使用
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello"
}
});
</script>
el:元素
data:数据使用方法为— {{字段名}}
v-bind:title="message"
v-bind开头的被称为指令。
会在dom上应用特殊的响应式行为
二、判断-循环(显示)
1、判断
<h1 v-if="ok">YES</h1>
<h1 v-else="ok">No</h1>
<!--ok这个属性为布尔值-->
<!--在标签中进行判断-->
<h1 v-if="socre==='A'">A</h1>
<h1 v-else-if="socre==='B'">B</h1>
<h1 v-else>C</h1>
2、循环
使用
<!--使用v-for="(参数1,参数2) in 数组"-->
<li v-for="info in list">
{{info.message}}
</li>
vue代码
var vm = new Vue({
el:"#app",
data:{
list:[
{message: '运维'},
{message: '后端'},
{message: '前端'},
]
}
});
三、事件
1、v-on
该指令可以监听dom事件
<button v-on:click="hello">点我</button>
methods: {
hello: function(){
alert(this.message);
}
},
vue中方法定义在methods中
2、双向绑定
在标签中引用 v-model=“字段名” 绑定字段
输入文本:<input type="text" v-model="message" />{{message}}
var vm = new Vue({
el:"#app",
data:{
message:"22"
}
});
<!--多行文本输入框-->
<textarea rows="10" cols="30" v-model="message"></textarea>{{message}}
<!--单选框-->
性别:<input type="radio" name="sex" id="boy" value="男" v-model="checked" />男
<input type="radio" name="sex" id="girl" value="女" v-model="checked" />女
<p>
选中了: {{checked}}
</p>
<!-- 下拉框 -->
<select name="zm" v-model="checked">
<option value ="A" >A</option>
<option value ="B" >B</option>
<option value ="C" >C</option>
<option value ="D" >D</option>
</select>
选择了:{{checked}}
四、组件
1、主要属性
props:接收参数
template:模板
定义:自定义标签
Vue.component("bango",{
template: '<span>hello</span>'
});
使用bango标签即可获取模板内容
**作用:**方便复用
例子:
//定义自定义标签的模板,使用props来获取值
Vue.component("bango",{
props: ['kc'],
template: '<li>{{kc}}</li>'
});
//设置data的值
var vm = new Vue({
el:"#app",
data:{
list: [
"java","Python","C++"
]
},
});
使用:
<bango v-for=" info in list" v-bind:kc="info"></bango>
<!--v-bind:后面接的是props绑定的参数名,双引号中为遍历出来的参数名称-->
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i33q71S1-1637636269039)(C:\Users\AOC\AppData\Roaming\Typora\typora-user-images\image-20211119165815853.png)]
3、vue的生命周期
钩子函数:
在流程中间的某个过程前后执行一个操作,
beforeCreat,created,beforeMount,mounted,updated,beforeDestroy,destroyed
五、Axios请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
链式编程,ES6
axios.get('./data.json').then(response=>(console.log(response.data)));
在data()方法中使用return来获取数据
var vm = new Vue({
el: "#vue",
data(){
return{
//请求的返回参数格式和json字符串一样
info: {
name: null,
address: {
street: null,
city: null,
country: null
},
links: [],
}
}
},
//钩子函数
mounted(){
axios.get('./data.json').then(response=>(this.info=response.data));
}
});
在html中使用v-bind来获取数据
六、计算属性
虚拟dom,放在内存中。
与methods相似,methods和computed重名优先使用methods中的方法,
methods: {
currentTime1: function(){
return Date.now();
}
},
//计算属性---缓存
computed: {
currentTime2: function(){
return Date.now();
}
}
<!--methods调用为方法,computed为属性调用-->
<p>{{currentTime1()}}</p>
<p>{{currentTime2}}</p>
七、插槽
//slot插槽
Vue.component("todo",{
template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
});
//标题
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
//列表内容
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}}</li>'
});
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="info in todoItems" :item="info"></todo-items>
<slot></slot>
</todo>
插槽的使用为了使数据动态增加
八、自定义事件–参数分发
组件内部调用方法
//列表内容
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}} <button @click="remove()">删除</button></li>',
methods: {
remove: function(){
alert('确定要删除吗?');
}
}
});
在组件的标签中定义方法并在模板中使用
使用this.$emit(‘自定义事件’,参数)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4Kc0Kaq-1637636269043)(C:\Users\30583\AppData\Roaming\Typora\typora-user-images\image-20211123105422388.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE3</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(info,index) in todoItems"
:item="info" :index="index" @remove="removeItems(index)" ></todo-items>
<slot></slot>
</todo>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//slot插槽
Vue.component("todo",{
template: '<div><slot name="todo-title"></slot><ul><slot name="todo-items"></slot></ul></div>'
});
//标题
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
//列表内容
Vue.component("todo-items",{
props:['item','index'],
template:'<li>{{index}}---{{item}} <button @click="remove()">删除</button></li>',
methods: {
remove: function(index){
this.$emit('remove',index);
}
}
});
var vue = new Vue({
el: "#app",
data: {
title:"标题123",
todoItems:['Java','Python','前端']
},
methods: {
removeItems: function(index){
console.log("删除了"+this.todoItems[index]+"...OK")
this.todoItems.splice(index,1);//一次删除一个
}
}
});
</script>
</html>
this.$emit('remove',index);
}
}
});
var vue = new Vue({
el: "#app",
data: {
title:"标题123",
todoItems:['Java','Python','前端']
},
methods: {
removeItems: function(index){
console.log("删除了"+this.todoItems[index]+"...OK")
this.todoItems.splice(index,1);//一次删除一个
}
}
});
</script>