一. vue-cli创建项目指令是？项目目录结构是什么？
vue create demo
node_modules 下载的所有项目依赖
src 项目源码
asssts 普通静态资源
components 可复用小组件
router 路由
store vuex（全局状态）
views 页面级别大组件
main.js 入口函数
gitignore git配置文件（上传代码时忽略文件）
package.json 项目配置文件
二.
分别用methods和属性计算，属性监听实现 加法计算器
<body>
<div id='app'>
<input type="text" v-model='firstname'>+
<input type="text" v-model="lastname"> <button @click="getname">=</button>
<input type="text" v-model="name">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
firstname: "",
lastname: "",
// name: ''
},
methods: {
getname() {
this.name = this.firstname + this.lastname
}
},
//属性监听
// watch: {
// "firstname": function (newvalue,oldvalue) {
// // console.log(newvalue);
// // console.log(oldvalue);
// this.name = this.firstname + this.lastname
// },
// "lastname": function (newvalue,oldvalue) {
// this.name = this.firstname + this.lastname
// }
// },
methods
methods:{
getResult(){
return{ Number( this.input1) + Number( this.input2);}
},
// 属性计算 不能和data里面数据冲突
// 计算属性中所依赖的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
computed:{
// name:function(){
// return this.firstname + '-' + this.lastname
// }
// 2
name:{
get:function(){
return this.firstname + '-' + this.lastname
},
// 只有修改自身时会触发
set:function(value){
console.log(value);
this.firstname = value.split("-")[0]
this.lastname = value.split("-")[1]
}
}
}
})
</script>
三. 手写实现定义全局过滤器实现日期格式化，实现传YYYY-MM-DD hh-mm:ss显示年月日时分秒？
定义全局过滤器
Vue.filter('formatTime', function (date, format) {
// 这里的data就是未处理的原始数据，format为传递
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString().padStart(2,0);
var day = (date.getDate()).toString().padStart(2,0);
var hour = (date.getHours()).toString().padStart(2,0);
var minute = (date.getMinutes()).toString().padStart(2,0);
var second = (date.getSeconds()).toString().padStart(2,0);
return format.replace("YYYY",year).replace("MM",month).replace("DD",day).replace("hh",hour).replace("mm",minute).replace("ss",second)
})
使用{
{date | formatTime("YYYY-MM-DD hh:mm:ss") }}
四.
如何进行路由重定向结合代码说明如何设置路由嵌套？
routes: [
{
path: "/userInfo",
component: userInfo
}, {
path: "/login/:userid/:name",
component: login,
name: "namelogin"
}, {
path: "/home",
component: home,
children: [{ //路由嵌套
path: "son",
component: son
}]
},
// 重定向
{
path: "/",
redirect: "/home"
}
],
五.
$router和$route的区别？
$router :是 VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由包含了许多关键的对象和属性；
$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等我们可以从vue devtools中看到每个路由对象的不同