vue基础概念

最新推荐文章于 2024-04-18 09:45:16 发布

ldcaws

最新推荐文章于 2024-04-18 09:45:16 发布

阅读量905

点赞数 1

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

本文链接：https://blog.csdn.net/leijie0322/article/details/127526920

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

下面对vue的基础知识点进行记录。
1、vue的生命周期就是vue实例从创建到销毁的全过程，即从main.js中的new Vue()开始，vue实例有一个完整的生命周期。
vue的生命周期中每个阶段对外开放操作vue的接口为钩子函数，包含如下：

beforeCreate（创建前）：vue实例完成创建，data没有初始化，不能访问data、method，一般在这个阶段不进行操作；
created（创建后）：vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真实dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化；
beforeMount（挂载前）：模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom）这个时候可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取；
mounted（挂载后）：模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动；
beforeUpdate（更新前）：更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发；
updated（更新后）：数据已经更改完成，dom也重新render完成；
beforeDestroy（销毁前）：销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等；
destroyed（销毁后）：销毁后（Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件；

创建vue实例的示例：

<template>
  <div id="app">
    <span :model="msg"></span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'msg',
    }
  },
  beforeCreate() {
    console.log('----beforeCreate----')
    console.log(this.msg) //msg
    console.log(this.$el) //undefined
  },
  created() {
    console.log('----created----')
    console.log(this.msg)
    console.log(this.$el)
  },
  beforeMount() {
    console.log('----beforeMount----')
    console.log(this.msg)
    console.log(this.$el)
  },
  mounted() {
    console.log('----mounted----')
    console.log(this.msg)
    console.log(this.$el)
  },
}
</script>

2、vue的关键字包含如下：

插值表达式：{{data中的数据}}
v-text：操作文本内容；
v-html：操作文本和标签；
v-bind：单向数据绑定，动态地绑定一个或多个特性，（要绑定的属性）=“(要绑定的属性值)” ；
v-model：双向数据绑定，将标签的value值与vue实例中的data属性值进行绑定；
v-on：过配合具体的事件名来绑定Vue中定义的函数；
v-show：显示隐藏元素；
v-if v-else-if v-else：判断指令；
v-for：循环指令；

{{i}}
遍历数字

{{s}}
遍历字符串

{{i}}-{{v}}
遍历数组

{{key}}-{{item}}
遍历对象

<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord">

3、vue常用属性包括如下：

el属性：用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符；
data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中；
methods属性：放置页面中的业务逻辑，js方法一般放置在methods中，使用v-on时调用的方法必须放在这里面；

<script>
        var app = new Vue({
            //el: "#app",//建议使用id选择器
            //el: ".app",//类选择器
            el: "div", //标签选择器
            data: {
                message: "你好，Vue"
            }
        })
</script>

4、组件
组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。

局部组件

定义组件

var app = new Vue({
    el: '#app',
    // 定义局部组件，这里可以定义多个局部组件
    components: {
        //组件的名字
        'Navbar': {
            //组件的内容
            template: '<ul><li>首页</li><li>用户管理</li></ul>'
        }
    }
})

使用组件

<div id="app">
    <Navbar></Navbar>
</div>

全局组件

定义组件

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

使用组件

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

后续会持续更新