vue的学习的一些题目
-
v-show 与 v-if 区别
v-show 是通过改变标签中的display来实现的
v-if是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件.
-
动态绑定class的⽅法
//第一种 :class="{ 'active': isActive, 'sort': isSort }" //第二种 :class="classObject" data() { return { classObject:{ active: true, sort:false } } } 第三种 :class="classObject" data() { return { isActive: true, isSort: false } }, computed: { classObject: function () { return { active: this.isActive, sort:this.isSort } } } -
计算属性和 watch 的区别
computed计算属性是用来声明式的描述一个值依赖了其它的值。当属性发生改变是重新计算。
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。
computed可以实现的，watch都可以实现，而watch可以实现的，有一些computed无法实现，但在计算属性时，computed更加节省资源。
-
⽣命周期的钩子函数有哪些，分别可以在什么场景下使用
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom -
父组件和子组件之间传值， 写一个案列
-
写一个插槽使用的案列
//app
<template> </div> </div></template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import header1 from './components/header.vue'
import slot1 from './components/slot.vue'
import item from './components/item.vue'
export default {
name: 'App',
components: {
HelloWorld,
header1,
slot1,
item
},
data:function(){
return{
name:"",
list:["item1","item2","item3"]
}
},
methods:{
getValue(value){
this.name=value
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.box{
padding-bottom: 20px;
}
</style>
父组件传子组件
<template>
<div>{{aa}}</div>
</template>
<script>
export default{
name:'item',
props:{
aa:String
}
}
</script>
<style>
</style>
子组件传父组件
<template>
<div>
header
<input type="text" v-model="name" />
<button @click="senddate">传值</button>
</div>
</template>
<script>
export default{
name:'header1',
date:function(){
return{
name:""
}
},
methods:{
senddate(){
if(this.name==null || this.name=="") return;
this.$emit("get_value",this.name)
}
}
}
</script>
<style>
</style>
插槽
<template>
<div>
<slot name="top"></slot>
用户名 :<input type="text" name="username"/>
<slot name="middle"></slot>
密码: <input type="text" name="password"/>
<slot name="buttom"></slot>
</div>
</template>
<script>
export default {
name:'slot1'
}
</script>
<style>
</style>
-
声明式路由和编程式路由，写个案列
编程式路由
<template> <div id="app"> <button @click="cartClick">跳转cart</button> <router-view @click="homeClick">跳转home</router-view> </div> </template> <script> export default { name:"cart", data: function() { return { } }, methods:{ cartClick() { this.$router.push({ name:"Cart" }) }, homeClick() { this.$router.push({ name:"home" }) } } } </script> <style scoped> </style>声明式路由
<template> <div> <router-link to="/hone">跳转home</router-link> <router-link to="/cart">跳转cart</router-link> <router-view></router-view> </div> </template> <script> export default { name:'app' } </script> <style scoped> .cartBtn { margin-top: 10px; } </style> -
利用axios和Promise封装一个网络请求
request核心代码
import axios from 'axios';
import qs from 'qs';
axios.interceptors.request.use(function (config) {
config.headers.auth = "aaa";
return config;
}, function (error) {
return Promise.reject(error);
});
export default function request(url,method,data={}){
return new Promise((resolve, reject)=> {
if (url == null) reject("url不能为空");
axios({
method: method,
url: url,
data: qs.stringify(data),
headera:{
'Access-Control-Allow-Origin':'*'
}
}).then(data=>{
resolve(data.data);
}).catch(err=>{
reject(err)
});
})
}
-
路由之间传值
//第一种 this.$router.push({ path: "/login?uname=" + this.userName }); //第二种 this.$router.push({ name:'name',params:{username:'zhangshagn'},query:{age:13,sex:"men"} }).catch(err=>{ console.log('err'); })
10.嵌套路由的配置
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children:[
{
parh:'/cart',
name:'cart',
component:cart
}
]
},
]
- 写个vuex的使用案列
//app
<template>
<div id="app">
<div class="hello">
<button @click="$store. commit('add')">+</button>
<h3>{{$store.state.count}</h3>
<button @click="$store.commit('less')">-</button>
</div>
</div>
</template>
<script>
</script>
<style scoped>
</style>
//index
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state) {
state.count++
}，
less(state) {
state.count--
},
actions: {},
modules: {}
})
-
使用element_ui 写一个表单（包含 输入框，单选框，复选框， select, 时间选择器），获取到里面的值并输入到页面上
<template> <div class="box"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item label="即时配送"> <el-switch v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源"> <el-radio-group v-model="form.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </el-form> <div> <span>活动名称:</span> <span>{{form.name}}</span> </div> <div> <span>活动区域:</span> <span>{{form.region}}</span> </div> <div> <span>活动时间:</span> <span>{{form.date1}}:{{form.date2}}</span> </div> <div> <span>活动性质:</span> <span>{{form.type}}</span> </div> <div> <span>特殊资源:</span> <span>{{form.resource}}</span> </div> <div> <span>活动形式:</span> <span>{{form.desc}}</span> </div> </div> </template> <script> export default { name:'App', data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); } } } </script> <style> .box{ width: 1200px; margin: 0 auto; } </style> -
使用element_ui 写一个table, 包含姓名，年龄，操作(删除，更新)
<template>
<div class="box">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄" width="180">
</el-table-column>
<el-table-column label="操作">
<el-button type="primary" size="mini">更新</el-button>
<el-button type="success" size="mini">删除</el-button>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name:'秦华凯',
age:'22'
}, {
name:'秦华凯',
age:'22'
},{
name:'秦华凯',
age:'22'
},{
name:'秦华凯',
age:'22'
},{
name:'秦华凯',
age:'22'
}]
}
}
}
</script>
<style>
.box {
width: 600px;
text-align: center;
margin: 0 auto;
padding-top: 30px;
}
</style>
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
