VUE的基础1

最新推荐文章于 2024-09-08 21:29:56 发布

巴呆丶

最新推荐文章于 2024-09-08 21:29:56 发布

阅读量122

点赞数

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_45981924/article/details/107170223

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE的初识：

Vue是一种渐进式的JS框架，它只关注view层，可以从底向上逐层应用。它是2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出的一款轻量框架。

VUE的文件及作用：
1、main.js是我们的入口文件，主要作用是初始化vue实例，并使用我们需要的插件；
2、App.vue是根组件，所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，我们可以吧头部课底部及每个页面都出现的内容放在App.vue里面；
3、index.html文件入口；
4、src放置组件和入口文件；
5、node_modules为依赖的模块；
6、config中配置了路径端口值等；
7、build中配置了webpack的基本配置、开发环境配置、生产环境配置等。

Vue模板语法：

双大括号插值:{{}}

<body>
  <div id="app">
    <h2>{{msg}}
  </div>
  <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
  new Vue({
    methods:{},
    el="#app",
    data() {
      return {
	msg:'指令系统'
      }
    }
  })
</body>

Body最外层必须要有唯一一层标签即root标签，否则报错。
Vue的核心思想是数据驱动视图，使用mvvm设计模式。

mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，而是一种改造，这其中的ViewModel便是一个创新。如下图所示：
在这里插入图片描述

V-xxx的是vue指令，方便页面数据输出:
V-if，如果判断结果为true则将数据渲染在页面中，反之则不渲染

<div v-if="true">显示</div>
<div v-if="false">隐藏</div>

v-show,通过控制dom元素display来显示/隐藏数据（none|block）
v-Model数据双向绑定，只会体现在ui控件中，只能应用于有value属性的。数据先通过v-model渲染到view中，view中的数据改变又会影响data。实现data-view-data的过程。v-model是语法糖，实际上是v-bind:value与v-on:input的体现。
v-text ==》 innerText
v-html ==》 innerHTML
v-on,原生事件名=‘函数名’，简便写法 @

<template>
  <div>
    <button @click="buttonClickHandler">按钮</ button>
  <div>
</template>
<script>
    methods {
  	buttonClickHandler() {
  		alert("点击事件触发");
   	}
   }
</script>

v-bind,绑定标签上的属性（内置属性和自定义属性），简写：
v-for，可以绑定数组的数据来渲染一个项目列表：

    <div id="app">
      <ol>
       <li v-for="todo in todos">
        {{ array.text }}
       </li>
      </ol>
    </div>
    var app = new Vue({
  	el: '#app',
  	data: {
	    array: [
	      { text: '学习 JavaScript' },
	      { text: '学习 Vue' },
	      { text: '学习微服务' }
	    ]
	}
    })

组件:包含了html,css,js。

App.vue是一个入口组件，一般存放着可复用组件。局部组件:应用于当前组件内部；全局组件:全局共享，所有组件都可以使用。

components:挂载子组件
父组件可以使用 props 把数据传给子组件
子组件可以使用 $emit 触发父组件的自定义事件。子组件在父组件中的使用过程可以简单概括为“声子-挂子-用子”。

Vue的生命周期

   每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据
监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过
程也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码
的机会。

Vue生命周期分为beforeCreated、created、beforMounted、mounted、beforeUpdate、updated、beforeDestoryed、destoryed。created中的内容在页面初始化时就进行加载；
mounted：是在页面初始化完成后加载，数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。
在这里插入图片描述

工作问题总结：

1、vue中data里为什么要return?
因为不使用return包裹的数据会在项目的全局可见，会造成变量污染。
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件
2、文件引入时，@符号代表什么含义？
代表从src一级目录下查询内容
3、什么是EventBus？
EventBus是事件集，相当于一个公用的箱子，父组件中通过EventBus的 $o n 方法绑定一个事件，再在子组件中通过$ emit调用事件。EventBus解决了事件跨组件调用的问题。
4、什么是vm，什么是Vue实例？
vm就是viewModel，相当于一个Vue实例。Vue实例类似创建一个对象，里面包含data（存放Vue的数据，Vue框架会检测data中的数据变化，自动更新到DOM上。
methods：主要存放一些函数方法，通过vm去调用

巴呆丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE的基础1

VUE的初识：Vue是一种渐进式的JS框架，它只关注view层，可以从底向上逐层应用。它是2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出的一款轻量框架。VUE的文件及作用：1、main.js是我们的入口文件，主要作用是初始化vue实例，并使用我们需要的插件；2、App.vue是根组件，所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，我们可以吧头部课底部及每个页面都出现的内容放在App.vue里面；3、i
复制链接

扫一扫