2-1 Vue实例与数据绑定

最新推荐文章于 2024-07-16 17:20:09 发布

一只小黄呀！

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量100

点赞数

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

本文链接：https://blog.csdn.net/HXL1611374495/article/details/120751734

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

一、实例与数据

每个vue应用都是通过Vue函数创建一个新的Vue实例开始的

let vm = new Vue ({
   el:"",
   data:"",
   methods:"",
   mounted:""
})

变量vm就代表这个Vue实例了

1、el挂载点：要绑定的元素

（1）.Vue实例的作用范围是什么？

vue会管理el挂载点选项命中的元素及其内部的后代元素，在它之外的元素是无效的

（2）.vue实例是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

（3）.vue是否可以使用其他的dom元素？

可以使用其他的双标签，但不能使用html和body

2、data数据

vue中用到的数据定义在data中，data中可以写复杂数据类型

组件中DATA为什么使用函数，不使用对象？什么时候可以使用对象？

每个组件都是vue的实例，组件共享data属性，当data的值指向同一个引用类型值的时候，改变其中一个会影响其他，所以必须使用函数。不过当我们可以使用new Vue()的复试的时候，无论我们将data设置成对象还是函数都是可以的，因为new Vue()的方式是生成一个根组件，该组件不会复用，也就不会存在共享 data的情况了。

二、生命周期

vue实例的生命周期：指的是从创建到销毁的整个过程
在这个过程中提供了一些方法(生命周期函数，生命周期钩子，钩子函数)，在不同的阶段给我们开发人员执行操作
created：实例创建完成后调用，需要初始化一些数据时
mounted：el挂载到实例上面之后用，一般我们的第一个业务逻辑会在这里开始写
beforeDestroy：实例销毁之前调用

1. beforeCreate（）

在这个钩子函数中是获取不到props或者data中数据的，因为这些数据的初始化都在initState中。

2. created（）

在这个钩子函数中已经可以访问到之前不能访问到的数据，但是这时候组件还没有被挂载，所以是看不到的。

3. beforeMount（）

在这个钩子函数中会开始创建虚拟dom。

4. mounted（）

在这个钩子函数中会把虚拟dom转换成真实dom，并且渲染数据，组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件挂载完毕，才会执行根组件的挂载钩子。

5. beforeUpdate（）

这个钩子函数在数据更新前调用。

6. updated（）

这个钩子函数在数据更新后调用。

7.beforeDestroy（）

组件卸载之前调用，可以移除事件、定时器、取消未发送成功的ajax请求。

8.destroyed（）

所有子组件都销毁完毕后才会执行根组件的destroyed钩子函数。卸载组件的方式this.$distroy（）

9. deactivated（）

keep-alive 独有的生命周期，用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

10. activated（）

11. errorCaptured（）

捕获一个来自子孙组件的错误时被调用,基本用不上，自己可以调试解决。

// 1. 组件创建之前的生命周期
        beforeCreate() {
            console.log("创建前元素", this.$el); //undefined
            console.log("创建前数据", this.$data); //undefined
        },

// 2. 组件创建的时候的生命周期 
        // 这个过程做的事情是：发请求拿数据
        // 组件创建的时候，发送请求数据，fetch axios 以前是用ajax jquery去拿数据
        created() {
            console.log("创建时元素", this.$el); //undefined
            console.log("创建时数据", this.$data); //能打印出
        },

// 3. beforeMount组件挂载前
        beforeMount() {
            let appInnerHtml = document.getElementById("app").innerHTML
            console.log("挂载前元素", this.$el); //能打印出来
            console.log("挂载前数据", this.$data); //能打印出来
            console.log(appInnerHtml); //打印app节点最原始样子
        },

// 4. mounted组件挂载到dom树上了
        // 这个过程做的事情是：
        // a.请求数据
        // b.操作dom节点
        mounted() {
            let appInnerHtml = document.getElementById("app").innerHTML
            console.log("挂载了元素", this.$el);
            console.log("挂载了数据", this.$data);
            console.log(appInnerHtml); //节点编译出来了
        },

// 上面四个步骤，已经拿到了元素和数据

// 5. 组件更新之前
        beforeUpdate() {
            console.log("组件更新之前");
        },

// 6. 组件更新时
        updated() {
            console.log("组件更新了");
        },
        // 不点击“改变msg”按钮，5.1和5.2控制台是不会打印输出的，只有点击了才会输出


        // 通过$destroy组件销毁，调用handleDestroy函数会出现销毁组件的两个生命周期函数
        // 这个过程做的事情是：
        // 清除无用的请求，定时器和订阅消息


// 7. 组件销毁之前
        beforeDestroy() {
            console.log("组件销毁前");
        },

 // 8. 组件销毁时
        destroyed() {
            console.log("组件销毁了");
        },
        // 点击了“销毁组件”按钮，控制台会打印输出6.1和6.2，vue面板实例也会消失

三、插值与表达式

{{}} 模板语法

变量、字符串、算术表达式、三木运算表达式、数组、对象
语句是不允许的，会报错！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        <div class="nav">
            <!-- 模板语法  {{expression}}-->
            <!-- 变量 -->
            <div class="nav-item">{{xinwen}}</div>

            <!-- 字符串 -->
            <div class="nav-item">{{"hao123"}}</div>

            <!-- 算数表达式 -->
            <div class="nav-item">{{1+1}}=2</div>
            <div class="nav-item">{{1+num }}=2</div>

            <!-- 三目运算表达式 -->
            <div>{{bool?"吃饭了":"还没吃"}}</div>

            <!-- 数组 -->
            <div>{{arr}}</div>

            <!-- 对象 -->
            <div>{{obj}}</div>
            <div>{{obj.name}}</div>

            <!-- 语句 是不允许添加的 会报错 -->
            <!-- <div>
                {{ if(bool){ console.log("吃饭了"); }else{ console.log("还没吃") } }}
            </div> -->

            <!-- <div class="nav-item">地图</div>
            <div class="nav-item">视频</div>
            <div class="nav-item">贴吧</div>
            <div class="nav-item">学术</div>
            <div class="nav-item">更多</div> -->
        </div>
    </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            xinwen: "新闻", //不推荐
            news: "新闻",
            num: 1,
            bool: true,
            arr: ["太阳", "月亮"],
            obj: {
                name: "hxl"
            }
        }
    })
</script>
</html>