零基础学习vue文档详解

 

一.安装

• 全局安装

npm install vue-cli -g

• 项目初始化

vue init webpack vue-project   //vue-project项目名称

• 启动项目

npm run dev

2.3. vue-cli项目解释

• src目录

- assets: 存放静态资源，比如图片
- components: 存放组件
- router/index.js 配置路由的地方， 查看，发现跟我们封装的一模一样
- App.vue: 根组件
- main.js 入口文件，和我们的一模一样
 Vue.config.productionTip = false ： 关闭生产提示
 /* eslint-disable no-new */ 关闭eslint报错，eslint中new创建对象必须接收

• config目录的解释

index.js : 项目常见的配置项

    - port： 修改端口号
    - autoOpenBrowser： 应该改成true， 就会自动打开浏览器
    - useEslint: true,  表示开启了eslint, 如果实在受不了了，那就关闭它把

• build目录 

webpack.base.conf.js: webpack打包的基本配置：
    - extensions: ['.js', '.vue', '.json'],   如果后缀是.js .vue .json可以省略
    - 'vue{{content}}#39;: 'vue/dist/vue.esm.js', 配置别名，import Vue from "vue"
    - '@': resolve('src'),:   @表示src目录

Vue提供高效率的开发；简单

1. Vue是一个渐进式框架（尤雨溪）
2. 
3. 库和框架的概念：
4. 
5. 区别：库就是一个堆方法的集合（工具箱），我们调用库的方法，我们需要完成某个功能就能调用某个库；框架就是已经帮我们定好了逻辑，我们只需要在康佳中填写我们的逻辑
6. 例子：你要盖房子，库就是你所需的东西，框架就是你要建造什么样房子的设计图，你要按照设图的条条框框去建造这个房子，不然他就会不牢固，或者难维护
7. MVVM介绍：1.mvc最早出现在后端，m是model数据模型，v是view视图，c是controllor控制器，是m和v沟通的中间的桥梁
8. 
9. 
10. 
11. Mvc跟mvvm的区别：mvvm不懂操作dom，直接操作数据视图就会自动发生改变，（双向绑定），

12. 双向数据绑定的原理：1.当表单控制数据时通过事件监听addEventListenter监听input，使得数据的值等于当前value的值；

13. object-defineProperty

14. 

15. V-text和v-html的区别：v-text：标签不生效，更新的标签textContent/innerText；v-html：标签能生效更新的标签的innerHtml
16. v-on的时间修饰符：.prevent:阻止浏览器的默认行为;.stop阻止时间冒泡行为
17. 以后再使用v-for的时候，需要指定一个key属性，目的是为了性能更高；没有key的时候，vue采用的是就地复用原则；需要重新创建查找，是非常消耗性能
18. V-if和v-show的区别：v-if隐藏是删除dom，v-show是隐藏dom；使用场景：如果这个元素需要频繁的显示隐藏，就使用v-show；如果这个元素根据条件渲染，就用v-if；v-if如果为false的情况，内部指令不会执行，效率会更高
19. Vue的生命周期：

20. 简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

21. 组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

22. 生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为

23. 注意：vue再执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可

24. 注意：钩子函数的名称都是固定的！！！

钩子函数 - beforeCreate()

• 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

• 注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

• 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据

使用场景：发送请求获取数据 ​​​​​​​

钩子函数 - beforeMounted()

 

具名插槽slot：

//html

<div id="app">
    <modal>
      <span slot="title">这是标题</span>
      <span slot="content">这是内容</span>
    </modal>
    <modal>
      <span slot="title">温馨提示</span>
      <p slot="content">你确定要退出吗</p>
    </modal>
 </div>

// js
<script>
    // 定义组件
    // <slot></slot>起到一个占位置作用, 组件中的内容，如果有slot插槽，会会显示到slot插槽中，
    // 如果组件没有slot插槽，内容会被丢弃
    Vue.component('modal',{
    	template:`
    		<div class="modal">
    			<h3><slot name="title"></slot></h3>
    			<div class="modal"><slot name="content"></slot></div>
    		</div>
    	`
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      }
    })
 </script>