vue基本命令使用说明

分手后的思念是犯贱 2023-07-13 10:48 1阅读 0赞

## 前言 ##

--------------------

写此文章的目的主要是为了记录一下自己的学习过程便于日后用来查漏补缺  
也希望能够帮助到一部分,如果在浏览的过程中您发现了错误希望您的及时帮忙改正，在此感谢！

## vue的基本语法 ##

本文是基于vue.js的方法来记录,首先做的是创建一个js文件夹，引入vue.js文件,[点此下载][Link 1](提取码:tfgn)

##### 一、vue实例 #####

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue实例</title>
    </head>
    <body>
        <div id="app">
            
        </div>    
    </body>
    
    <script src="../js/vue.js"></script>  
    <script>
        // 声明一个vue实例，vue的使用鼓励使用数据处理,不提倡操作dom
        var vm = new Vue({  
            el:"#app",   //el 挂载点,让vue实例接管着标签,与id为app的元素做绑定,也就是用此实例在#app内部生效
            data:{    //data vue里存放数据的地方,咱们先从data说起。
            }
        })
    </script>
    </html>

##### 二、v-text与v-html和插值表达式\{ \{ \}\} #####

将这三个放在一块是因为功能相似，容易分清不同的地方

> 先来看一个运行结果

--------------------

![在这里插入图片描述][20200311155229144.jpg]

##### 三、v-if与v-show #####

> 看运行结果

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70]

##### 四、v-bind #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edg">
        <title>v-bind</title>
        <script src="../js/vue.js"></script>
    </head>
    <style>
        .red{ 
            color:#0a99ff;
        }
        .thin{ 
            font-weight: 200;
        }
        .italic{ 
            font-style: italic;
        }
        .active { 
            letter-spacing: 0.5em;
        }
    </style>
    <body>
        <div id="app">
            
             
            
           <h1 class="red thin italic">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
           
           <h1 v-bind:class="['red','thin','italic']">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
           
           <h1 v-bind:class="['red','thin',flag ? 'active':'']">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
           
           <h1  v-bind:class="['red','thin',{'active':flag}]">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
           
           <h1  v-bind:class="classObj">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
           
           <h1 v-bind:style="[styleObj1,styleObj2]">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
        </div>
    </body>
    <script>
        var vm = new Vue({ 
            el:"#app",
            data:{ 
                flag:true,
                classObj: { 'red':true, thin:true, italic:false,active:false},
                styleObj1:{ color:'red', 'font-weight':200},
                styleObj2:{ 'font-style':'italic'}
            },
        })
    </script>
    </html>

##### 五、v-model #####

##### 六、v-for #####

##### 七、v-on #####

[Link 1]: https://pan.baidu.com/s/1kuXk7N-P73YJ5K8aY67C6g
[20200311155229144.jpg]: https://img-blog.csdnimg.cn/20200311155229144.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311155734190.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw,size_16,color_FFFFFF,t_70