【Vue】（一）Vue简介、第一个Vue程序、Vue指令

机车柑仔店

已于 2022-09-21 17:17:03 修改

阅读量438

点赞数

分类专栏： Vue从入门到跑路文章标签： vue.js javascript 前端

于 2022-09-16 17:43:54 首次发布

本文链接：https://blog.csdn.net/TuPonShuy/article/details/126895008

版权

Vue从入门到跑路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

`1.Vue简介`

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

`2.第一个Vue程序`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
    {{message}}
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data:{
            message: "hello,Vue!!"
        }
    });
</script>
</body>
</html>

`3.Vue指令`

v-bind指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
    <span v-bind:title=ok>
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data:{
            ok: "v-bind测试"
        }
    });
</script>
</body>
</html>

v-if、v-else-if、v-else指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
    <h1 v-if="ok">true</h1>
    <h1 v-else>false</h1>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data:{
            ok: true
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else=>C</h1>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data:{
            type: "A"
        }
    });
</script>
</body>
</html>

v-for指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
  <li v-for="(item,index) in items">
    {{item.message}}--{{index}}
  </li>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    //Model 数据
    data:{
      items:[
        {message: "Java"},
        {message: "Python"},
        {message: "JavaScript"}
      ]
    }
  });
</script>
</body>
</html>

v-on指令监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
    <button v-on:click="hello">点击我弹窗</button>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            message: "codePeng快乐学Vue！"
        },
        methods: {
            hello(){
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--渲染区-->
<div id="app">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>value:{{selected}}</span>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model 数据
        data: {
            selected: ""
        }
    });
</script>
</body>
</html>

`4.生命周期`

生命周期：事物从诞生到消亡的整个过程

虽然我们平常开发中只是new了一个vue实例（ new vue() ），但是在vue源码里却做了很多的事情。
生命周期的相关函数，例如：created()、mounted()方法等等都不是我们手动调的，而是vue源码里调的这些方法（vue源码通过callHook()回调这些生命周期函数）
生命周期函数也叫钩子函数（Hook：钩子）

`八大生命周期函数`：

beforeCreate 数据注入vm实例之前, 此时vm还没有数据
created 数据注入vm实例之后, 此时vm已经有数据了
beforeMount 创建出来的结构, 替换视图之前
mounted 创建出来的结构, 替换视图之后
beforeUpdate 数据变化了, 更新视图之前
updated 数据变化了, 更新视图之后
beforeDestroy 实例销毁, 资源释放之前
destroyed 实例销毁, 资源释放之后

`生命周期示意图`:

在这里插入图片描述

该图片资源来自：https://www.icode9.com/content-4-679799.html

机车柑仔店

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】（一）Vue简介、第一个Vue程序、Vue指令

生命周期的相关函数，例如：created()、mounted()方法等等都不是我们手动调的，而是vue源码里调的这些方法（vue源码通过callHook()回调这些生命周期函数）与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。虽然我们平常开发中只是new了一个vue实例（ new vue() ），但是在vue源码里却做了很多的事情。结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。) 是一套用于构建用户界面的。
复制链接

扫一扫