小白入门

Vue基础笔记

第一单元

1.简述MVVM和MVC的区别
MVC是后台的中框架模式 将程序分成三部分 M(model模型) V（view 视图） C（controller控制器）
model 和数据库的操作相关功能
view *****（前端关心的 页面）
contoller 就是协调model和view的

MVVM 是MVC中的view细分成了三部分 M model（数据） v（html）视图 vm(view-model)
前端的框架模式

2.简述虚拟DOM
将dom元素映射为js对象

3.怎么创建VUE实例
var vm=new Vue({
el:"",data:{},methods(){}
})

4.举例常用指令及作用
1、v-html 给元素绑定数据 可以解析html标签
2、v-text 给元素绑定数据 不解析标签
3、v-bind 给元素绑定属性
4、v-on 绑定事件
5、v-model 双向数据绑定 （一定是针对于表单和变量之间）
6、v-for 数据的遍历
7、v-if v-show 条件输出

5.例举常用修饰符
.stop .prevent .capture .self

6.v-if与v-show的区别
v-if有更高的切换成本 频繁的切换不适合用v-if
v-show有更高的渲染成本，有些数据永远不会显示的时候就不要用v-show
场景：v-if根据条件渲染数据， v-show把所有数据全部渲染出来

7.vue怎么绑定事件？以及常用修饰符

.stop .prevent .capture .self

第二单元

1.method computed watch 的区别
watch 也可以响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时使用watch
methods 每次渲染的时候都会被重新调用
computed 它既有属性的特点，也可以写复杂的逻辑，但是它是基于属性的缓存的，只有缓存属性的依赖发生改变的时候才会被调用，否则不会被调用

2.vue中怎么动态绑定class样式
：class="{ ‘active’:isActive }"

3.什么是过滤器？怎么定义全局和局部过滤器

• 定义全局过滤器:

 Vue.filter("big",function(val){        //全局过滤器
       return val.charAt(0).toUpperCase()+val.slice(1)                //逻辑处理
   })

• 定义局部过滤器: filters:{ //局部过滤器

  big:function(val){
             return val.charAt(0).toUpperCase()+val.slice(1)
         },
         change:function(val){
            return val.split("").join("-")
         }
        }

4.自定义指令语法是什么？请举例说明一个带参数的自定义指令怎么定义
directives：{
名（不带v-）:{
//指令钩子
bind 操作样式
inserted 操作行为 inserted
}
}

5.渐进式框架的理解
主张最少，没有多做职责之外的事情，渐进式框架就是对项目的参与性小，在这个项目中还可以使用其他插件

6.vue中双向数据如何实现的
{{ aa }}
Vue 实现 双向数据绑定 主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，
在数据变动时发布消息给订阅者触发监听。

7.单页应用和多页应用的区别和优缺点
单页应用：只有一个html页面，跳转的方式是通过路由来切换不同组件
优点：跳转流畅，组件开发复用率高 缺点：首屏加载过慢
多页应用：有多个html页面跳转方式是通过多页面。整页刷新
优点：首屏加载快 缺点：跳转过缓慢

8.自定义指令有哪些钩子函数，及自定义指令的使用场景（面试真题）

• bind 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

• inserted 被绑定元素插入到父节点时调用(父节点存在即可调用，不必存在于document中)

• update 所在组件的VNode更新时调用，可能会触发多次。
  但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新

• componentUpdated 所在组件的VNode及其孩子的VNode全部更新时调用
  unbind 只调用一次，指令与元素解绑时调用-

• v-clock有什么用？ 解决差值表达式闪铄的问题

第四天

1.组件特性和好处
特性：组件功能必须是完整的
好处：提高开发率，方便重复使用

2.组件的基本组成
样式及结构 行为逻辑 数据

3.父传递子如何传递

1. 在父组件中给子组件的标签绑定自定义属性 挂载要传输的数据 :suibian=“obj”
2. 在子组件中通过 props选项来接收数据 记住props是一个数组 props:[ “suibian” ] {{
   suibian }}
3. 使用 接的什么就是使用什么

4.子传父如何传递

1. 在父组件中定义方法***
2. 在父组件中的子组件的标签上自定义事件挂载1中的方法
3. 在子组件的某个方法中通过this.$emit()来调用父组件的方法如果需要传输数据那么就从$emit的第二个参数开始写就行
   this.$emit(“add”,this.list)

5.兄弟组件如何传递

1. 先传给共同的父组件 再由父组件向下传递

2. bus总线传值

   bus总线其实是一个空5\\ \\\\\\\\\的vue实例
   1、做一个bus总线
   2、在要发送数据的方引入总线 通过Bus.$emit来派发事件Bus.$emit(“事件名”,数据)
   3、在接受数据的组件中，在created()构造函数中通过Bus.$on来监听事件，来获取数据Bus.$on(“事件名”,(data)=>{
   this.属性名=data
   })

6.props验证类型有哪些？
string number boolean array object

第五单元

1.keep-alive是什么？
保留组件状态

2.生命周期共有几个，分别在什么时候使用？
一共8个阶段
1、beforeCreate（创建前）
2、created（创建后）
3、beforeMount（载入前）
4、mounted（载入后）
5、beforeUpdate（更新前）
6、updated（更新后）
7、beforeDestroy（销毁前）
8、destroyed（销毁后）

3.created和mounted区别？
created是最早可以使用data和methods的生命周期函数
Mounted页面和内存中都是最新的数据 这个钩子函数是最早可以操作dom节点的方法

第六天

1.安装脚手架步骤
1.安装webpack npm install webpack -q
2.新建文件夹打开cmd vue init webpack aa
3.cd aa 然后运行 npm run dev

2.为什么要用脚手架
快速开始一个项目，不用手动搭配各种东西

3.vue中如和使用sass
1、安装
cnpm install --save-dev sass-loader
cnpm install --save-dev node-sass
2、配置
bulid->webpack.base.config.js中添加规则
{
test: /.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
3、