如何简单使用vue

最新推荐文章于 2023-06-27 17:29:38 发布

陈小同学

最新推荐文章于 2023-06-27 17:29:38 发布

阅读量212

点赞数

文章标签： vue.js html5 html

本文链接：https://blog.csdn.net/xiaoChenPengYou/article/details/120189114

版权

如何简单使用vue

这次就来说说如何使用VUE。

首先是吧，肯定得有项目文件，就先创建一个新的项目文件。然后把VUE的文件放到我的项目文件中，再进行引入VUE文件。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script src="../js/vue.js"></script>
</html>

引入之后呢，创建实例控制的区域，也就是DOM元素和实例化VUE的对象。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="NC"></div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {},
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

这样就可以使用VUE基本的语法了。

首先，我们先实现把数据输出在页面上。在这里要注意的是，在原本的HTML语法中，我们是直接把字符串或者数值直接是写在DOM元素的标签里的，没有任何的包裹，直接就是写入，然后在页面显示。而在VUE中，有略微的不同，vue使用的是插值语法，它的数据是写在vue对象中的data属性中的，在DOM元素中是需要将属性用两个大括号包裹起来的（{{属性}}），不然是无法输出里面的数据内容的。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="NC">
    	<!-- 原生的HTML写法 -->
        <p>我叫张三。</p>
    	<!-- VUE的插值写法 -->
        <p>我叫{{name}}</p>
    	<!-- 两种写法的结果都是一样的 -->
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            name: "张三",
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

数据的写法：自定义的属性名: “值”，用法：{{属性名}}

多个数据就用逗号隔开，

要注意的是：

符号必须都是英文状态下的符号。
要在控制区域内使用。
{{属性名}}，括号里只能是属性名，可以存在空格，但是不可以存在属性名之外的字段。括号外可以有。
{{属性名}}，这种只能是在DOM元素的开始标签和结束标签的中间使用，不可以在行内使用。

想要在行内使用的话，就需要借助vue的指令：v-bind 简写 : 。冒号就是它的简写形式。

使用这个指令之后，数据是不需要再用大括号去包裹的。直接就是属性名。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="NC">
        <input type="text" v-bind:value="num"/>
        <!-- 页面显示num的数据 18 -->
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            num: "18",
        },
        // 存放方法的地方
        methods: {},
    })
</script>

</html>

使用v-bind就可以在属性使用数据了。

接下来再说一个是如何使用方法。

首先就是写好一个方法，再去调用这个方法。

// 实例化Vue对象
new Vue({
    // 控制区域
    el: "",
    // 存放数据的地方
    data: {},
    // 存放方法的地方
    methods: {
        fn(){}
    },
})

在上面的代码中，我们就新写了一个方法。这里要注意的：如果在方法中使用data属性里面的数据的情况，需要使用 this.数据属性名。

// 实例化Vue对象
new Vue({
    // 控制区域
    el: "",
    // 存放数据的地方
    data: {
        name: "张三",
    },
    // 存放方法的地方
    methods: {
        fn(){
            this.name = "李四",
        }
    },
})

如何在方法中获取数据就是这样了。接下来就是如何去调用这个方法。

调用方法呢其实也很简单，使用v-on的指令就可以了。

格式：v-on:click=“函数名()”/@click=“函数名()”；这里的click只是演示使用,不表示只能使用click,也可以使用其他的事件.

注意点：

这是在Model的methods中查找是否存在这样的一个函数。
调用方法的时候的括号可以省略不写

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="NC">
        <input type="text" v-bind:value="name"/>
        <button v-on:click="fn()">更改</button>
        <button @click="fn">更改</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 控制区域
        el: "#NC",
        // 存放数据的地方
        data: {
            name: "张三",
        },
        // 存放方法的地方
        methods: {
          fn(){
            this.name = "李四",
          }
        },
    })
</script>

</html>

两个按钮的演示效果是一样的，都是可以把数据修改成功。

文章仅供参考。

陈小同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何简单使用vue

如何简单使用vue这次就来说说如何使用VUE。首先是吧，肯定得有项目文件，就先创建一个新的项目文件。然后把VUE的文件放到我的项目文件中，再进行引入VUE文件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫