一.安装

  • 全局安装
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. MVVM介绍:1.mvc最早出现在后端,m是model数据模型,v是view视图,c是controllor控制器,是m和v沟通的中间的桥梁
  6. Mvc跟mvvm的区别:mvvm不懂操作dom,直接操作数据视图就会自动发生改变,(双向绑定),
  7. 双向数据绑定的原理:1.当表单控制数据时通过事件监听addEventListenter监听input,使得数据的值等于当前value的值;

  8. object-defineProperty

  9. V-text和v-html的区别:v-text:标签不生效,更新的标签textContent/innerText;v-html:标签能生效更新的标签的innerHtml
  10. v-on的时间修饰符:.prevent:阻止浏览器的默认行为;.stop阻止时间冒泡行为
  11. 以后再使用v-for的时候,需要指定一个key属性,目的是为了性能更高;没有key的时候,vue采用的是就地复用原则;需要重新创建查找,是非常消耗性能
  12. V-if和v-show的区别:v-if隐藏是删除dom,v-show是隐藏dom;使用场景:如果这个元素需要频繁的显示隐藏,就使用v-show;如果这个元素根据条件渲染,就用v-if;v-if如果为false的情况,内部指令不会执行,效率会更高
  13. Vue的生命周期:
  14. 简单说:一个实例从开始到最后消亡所经历的各种状态,就是一个组件的生命周期

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

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

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

  18. 注意:钩子函数的名称都是固定的!!!

钩子函数 - 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>

 

Logo

前往低代码交流专区

更多推荐