vue实例讲解

最新推荐文章于 2022-03-18 09:22:11 发布

闲人不梦卿

最新推荐文章于 2022-03-18 09:22:11 发布

阅读量795

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/107420122

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

vue实例

1.vue实例创建语法

var app= new Vue(
            {
             
            }
        )

2. el

vue实例中必不可少的一个选项就是 el。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button  v-on:click="handleClick" >按钮</button>
    </div>

    <script src="vue.js">

    </script>
    <script>
        var app = new Vue(
            {
               el:"#app",
               data:{
                   msg:'hehe'
               },
               methods:{
                handleClick: function()
                   {
                       alert('你好世界');
                   }
               }
               
            }
        )

     
        
      

    </script>

</body>
</html>

3. data

通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。
绑定数据有三种方式，一种是插值，也就是{{name}}的形式，一种是v-bind，还有一种是v-model

3.1 插值{{name}}

在{{}}中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">

        <h1>{{name}}</h1>
        <h1>{{okFlag ? '11':'22'}}</h1>
        <h1>{{text.split(',').reverse()}}</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    name:"你好",
                    okFlag:false,
                    text:'123,456'

                }
            }
        )
    </script>
</body>
</html>

在这里插入图片描述

3.2 v-bind

v-bind主要使用于绑定属性如title，src，value等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <input type ="text" v-bind:value="message">

    </div>

    <script src="vue.js">


    </script>
    <script>
         let app = new Vue(
            {
               el:'#app',
               data:{message:"你好"}
            }
         )
        

    </script>
</body>
</html>

在这里插入图片描述

3.3 v-module

v-module使用在表单,如input,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <input type ="text" v-model:value="message">
            <h1>{{message}}</h1>
    </div>
    <script src="vue.js">

    </script>
    <script>
        var app = new Vue(
        {
            el:'#app',
            data: { message:''}   
        }
        )
    </script>
</body>
</html>

在这里插入图片描述

闲人不梦卿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue实例讲解

vue实例1.vue实例创建语法var app= new Vue( { } )2. el vue实例中必不可少的一个选项就是 el。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器.<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫

专栏目录