Vue入门实战（Day01）

最新推荐文章于 2023-10-16 12:32:14 发布

AuroraJim

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量180

点赞数

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

本文链接：https://blog.csdn.net/qq_45835014/article/details/119166607

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue入门实战之基础篇

一、vue的简单介绍(第一天)
二、vue的实例选项
- - 2.1 vue实例选项的用法详解（重点掌握）
三、插值表达式、指令的术语解释（了解）
- - 3.1 插值表达式
  - 3.2 指令

一、vue的简单介绍(第一天)

1.1 vue是什么？

Vue:全称vue.js；是前端JavaScript中的框架；是一套构建用户界面的渐进式框架，采用的是自低向上增量的开发设计；vue只关注于视图层；vue的目标就是使用尽可能简单的API来实现响应数据的绑定和组合的视图组件。

1.2 vue使用前期准备？

       前期准备
       ①.Vocode编译器或其他编译器
       ②.vue.js文件，官网下载
       ③.笔记本和一支水笔    （这点很重要）
       ④.整装待发小白一个

1.3 vue渲染式声明

       步骤说明：
       ①编写基本html结构代码，引入vue.js文件
       ②定义一个id为app的div，id名随你
       ③创建vue实例对象，new Vue()===>大写
       ④运行至浏览器，大功告成。

<body>
    <!-- 将数据渲染到浏览器 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>
<script src="vuejs-2.5.16.js"></script>
<script>
    new Vue({
        //将id为app的div交给vue
        el: "#app",
        // 模拟ajax返回后台数据
        data: {
            msg: "Hello World"
        }
    });
</script>

效果图：
在这里插入图片描述

二、vue的实例选项

2.1 vue实例选项的用法详解（重点掌握）

基本结构：

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

    <script src="vuejs-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

①el:"#app"
作用：设置/指定当前vue实例使用的视图模块；通俗讲就是你指定的那个id为app的div

<body>
    <!-- 将数据渲染到浏览器 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>
<script src="vuejs-2.5.16.js"></script>
<script>
    new Vue({
        //将id为app的div交给vue
        el: "#app",
        //el:作用是设置、指定 当前vue实例所管理的视图
        //el:可以是id class或者其它选择器
        // 模拟ajax返回后台数据
        data: {
            msg: "Hello World"
        }
    });
</script>
</body>

       ②data
         作用：设置/指定当前vue实例使用的视图的数据；data数据可以是一个对象，数组等；
         数据访问方式：可以使用vue实例对象.属性名来访问数据;或者是使用插值表达式{{ }}双大括号来访问数据

<body>
    <!-- 将数据渲染到浏览器 -->
    <div id="app">
    	<!--插值表达式取值-->
        <p>{{msg}}</p>
    </div>

</body>
<script src="vuejs-2.5.16.js"></script>
<script>
    var vm = new Vue({

        el: "#app",
        data: {
            //data:设置、指定当前vue实例的视图的数据
            //data数据可以是一个对象
            //data:可以通过vue实例.属性名（vm.msg）
            //data:是响应式数据 当数据变化时  视图中数据会自动变化更新
            msg: "Hello World"
        }
    });
    console.log(vm.msg) //Hello World
</script>

       ③methods
         作用：设置/指定当前vue视图中的方法
         方法访问方式：在视图中使用插值表示式调用；或使用vue对象.方法名调用；再者使用指令调用。（别着急、等下举例，一定要认真看哦）
         注意：方法中的this指向的是当前vue实例对象；方法中可以使用箭头函数，但是不推荐使用，因为箭头函数没有自己的this

举个栗子：

<body>
    <div id="app">
        <!-- 插值表达式调用函数 -->
        {{fun1()}}
        <!-- 指令调用函数 -->
        <button @click="fun1()">点击</button>
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "11111"
            },
            //方法
            //方法可以使用{{}}来调用、直接使用vm.方法名调用
            //方法中的this指向是值得当前vue的实例对象
            //不推荐使用箭头函数，因为箭头函数没有this指向
            //可以使用指令 调用方法
            methods: {
                fun1: function () {
                    console.log("fun1指令----")
                },
                fun2: function () {
                    console.log(this)
                },
                fun3: function () {
                    console.log(this.msg)
                },
                //箭头函数，不建议使用
                fun4: () => {
                    console.log("这是个箭头函数")
                }
            }
        });
        // vue实例.方法名调用函数
        vm.fun2(); //返回vue实例对象
        vm.fun3(); //返回11111
        vm.fun4();
    </script>
</body>

三、插值表达式、指令的术语解释（了解）

3.1 插值表达式

插值：{{}}在vue中就叫插值表达式，可以在视图中显示data中的数据；用来取值。
注意：插值表达式里面可以写一写简单的运算，比如：

{{num+10}}
{{count>12}}

但是，不能出现js的语句，不能在{{}}中写if for

3.2 指令

指令：vue指令实质上就是html标签特殊的属性，vue给html标签增加了一些自定义的属性，这些属性都是以 v-开头都叫vue的指令；
vue总共提供了14个指令自定义指令，vue提供了每一个指令都有特殊的作用，具体作用：

具体使用方法，点击前往👍

AuroraJim

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue入门实战（Day01）

Vue入门实战之基础篇一、vue的简单介绍1.1vue是什么？1.2 vue使用前期准备？一、vue的简单介绍1.1vue是什么？       Vue:全称vue.js；是前端JavaScript中的框架；是一套构建用户界面的渐进式框架，采用的是自低向上增量的开发设计；vue只关注于视图层；vue的目标就是使用尽可能简单的API来实现响应数据的绑定和组合的视图组件。1.2 vue使用前期准备？   
复制链接

扫一扫