vue相关

1、构建的vue-cli用到的技术有哪些?

1.vue.js:vue-cli工程的核心,主要特色是双向数据绑定和组件系统。

2.vue-router:官方推荐的路由框架。

3.vuex:专为vue.js应用项目开发的状态管理器,维护vue组件间共同的一些变量和方法。

4.axios:用于发起http请求,基于Promise设计。

5.vux等:一个专为vue设计的移动端UI组件库。

6.webpack:模块加载和工程打包工具。

2、vue-cli经常使用的npm指令有哪些?

npm install       ---下载资源依赖包
复制代码

npm run dev       ---启动开发环境
复制代码

npm run build    
---打包 (自带webpack,生成dist文件夹)
复制代码

3、vue常见的指令有哪些?

v-text/v-html: 替换该指令的元素内容,text是纯文本输出,html是格式的输出。

v-if: 根据表达式的值的真假条件渲染元素,在切换时元素被销毁并重建。控制DOM节点存在与否,一次显示或隐藏v-if更合理

v-show: 控制元素的显示方式,display.block和none来回切换。常常切换用v-show

v-for: 循环指令,基于一个数组或者对象渲染列表,vue2.0以上必须配合key值使用。

v-on: 用于监听指定元素的DOM事件,好比点击事件,绑定事件监听器,简写为'@'。

v-once: 只能渲染一次。

v-cloak: 为了解决插值表达式的闪烁问题

v-bind: 动态绑定一个或多个特性,简写':'。

v-model: 实现表单输入和应用状态之间的双向绑定。

语法糖(一种简洁的写法):原理经过v-bind绑定的input属性,监听input事件触发,获取input的值再去修改data中数据。
复制代码

4、vue-cli目录解析

1.build文件夹:

存放webpack相关配置和脚本。开发过程当中会偶尔使用到webpack.base.conf.js,用于配置less、sass等css预编译库,或者配置UI库。

2.config文件夹:

存放配置文件,用于区分开发环境、线上环境的不一样。经常使用到config.js配置开发环境端口号、是否开启热加载、设置生产环境的静态资源相对路径、npm run build命令打包生成静态资源的名称和路径。

3.dist文件夹:默认npm run build命令打包生成的静态资源文件,用于生产部署。

4.node_modules文件夹:存放npm命令下载的开发环境和生产环境的依赖包。

5.src文件夹:存放项目源代码及须要用到的资源文件。

5.1 src下的assets:存放项目中的静态资源文件,如images、css、fonts

5.2 src下的componets:存放vue开发中的公共组件,如header.vue、footer.vue

5.3 src下的router:vue路由的配置文件

5.4 src下的util:存放vue一些公共的js方法

5.5 src下的vuex:存放vuex为vue专门开发的状态管理器

5.6 src下的app.vue:使用标签< route-view> </ route-view >渲染整个项目的.vue组件

5.7 src下的main.js:vue-cli的入口文件

6.index.html:设置项目的一些meta头信息和挂载vue节点 < div id="app"> </ div>

7.package.json:用于node_modules资源部和启动、npm命令管理。

5、什么是vue生命周期

生命周期是vue实例从建立到销毁，也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。在这个过程当中也会运行一些叫作生命周期钩子的函数。

6、侦听器watch基本使用

使用场景:

在依赖data数据的时候,若是获取新数据的时候有异步操做,使用侦听器。

当依赖的数据没有改变的时候,不会触发侦听器。

data: {
    message:'hello vue'
},
watch: {
    message (new, old) {
        console.log(new, old)
        setTimeout(() => {
            this.str ='123'
        },2000)
    }
}
复制代码