Vue基础（Vue中使用css样式、模板语法、常用指令、事件处理）

╰+哭是因爲堅強的太久メ 2021-12-07 13:04 228阅读 0赞

## 1、在Vue中使用CSS样式 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <style>
            /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
            [v-cloak]{
                display: none;
            }
            .box{width: 100px;height: 100px;background: #ff0000}
            .fontSize{color: #FFFFFF;size: 20px}
        </style>
    </head>
    <body>
    
    <div id="app" v-cloak>
        <div :class="{box:isShow,fontSize:true}">对象写法</div>
        <button type="button" @click="isShow=!isShow">显示/隐藏</button>
    
        <div :class="['box','fontSize']">数组的写法</div>
    
        <div :style="{width:'100px',height:'100px',backgroundColor:'#00ff00'}">内联样式</div>
    
        <div v-bind:style="[boxStyle, fontStyle]">内联数组对象写法</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            //data方法，为了避免出现相互引用的问题，我们要用方法来初始化数据形成一个作用域，防止各个组件互相引用
            data(){
                return{
                    isShow:true,
                    boxStyle:{
                        width:'100px',
                        height:'100px',
                        backgroundColor:'#F0F000'
                    },
                    fontStyle:{
                        color:'#ffffff',
                        fontSize:'20px'
                    }
                }
            }
            /*//data对象
             data:{
                 name: "张三"
             }*/
        })
    </script>
    </body>
    </html>

## 2、模板语法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板语法</title>
        <style>
            /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
    
    <div id="app" v-cloak>
        {
       {name}}
        <input type="text" v-model="name">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            //data方法，为了避免出现相互引用的问题，我们要用方法来初始化数据形成一个作用域，防止各个组件互相引用
            data(){
                return{
                    name:"张三"
                }
            }
           /*//data对象
            data:{
                name: "张三"
            }*/
        })
    </script>
    </body>
    </html>

## 3、常用指令 ##

v-cloak：防止闪烁解决显示vue标签  
v-model：多用于表单元素实现双向数据绑定  
v-for：列表渲染  
v-show：显示内容  
v-if：显示与隐藏 （dom元素的删除添加默认值为false）  
v-else-if：必须和v-if连用  
v-else：必须和v-if连用 不能单独使用 否则报错 模板编译错误  
v-bind：动态绑定 作用： 及时对页面的数据进行更改，缩写:  
v-html：解析html标签

**具体使用方法：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板语法</title>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
    <div id="app" v-cloak>
        <ul v-show="isShow">
            
            <li v-for="(item,index) in list">{
       {index}}、{
       {item.name}}-{
       {item.age}}
                <template v-if="item.age < 18">[小孩]</template>
                <template v-else-if="item.age >= 18">[成人]</template>
            </li>
        </ul>
        <button type="button" @click="isShow=!isShow">显示/隐藏</button>
        <div v-html="content">
    
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    list:[
                        {id:1,name:"张三",age:18},
                        {id:2,name:"李四",age:24},
                        {id:3,name:"王五",age:31},
                        {id:4,name:"马云",age:26},
                        {id:5,name:"马小云",age:16},
                        {id:6,name:"小马云",age:11}
                    ],
                    isShow:true,
                    content:"<div style = 'font-size：16px;color: #0000ff'>我是v-html标签</div>"
                }
            }
        })
    </script>
    </body>
    </html>

## 4、事件处理 ##

v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面  
v-on:click.stop：阻止冒泡事件  
v-on:click.once：点击事件只允许一次

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <style>
            /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
            [v-cloak]{
                display: none;
            }
            .box{width: 100px;height: 100px;background: #ff0000}
            .fontSize{color: #FFFFFF;size: 20px}
        </style>
    </head>
    <body>
    
    <div id="app" v-cloak>
        <ul>
            <li v-on:click="getName(item.name)" v-for="(item,index) in list">{
       {index}}、{
       {item.name}}-{
       {item.age}}
                <template v-if="item.age < 18">[小孩]</template>
                <template v-else-if="item.age >= 18">[成人]</template><button type="button" @click.stop="del(index)">删除</button>
            </li>
        </ul>
        <button type="button" @click="normalClick">普通点击事件</button>
        <button type="button" @click.once="oneClick">只点击一次事件</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            //data方法，为了避免出现相互引用的问题，我们要用方法来初始化数据形成一个作用域，防止各个组件互相引用
            data(){
                return{
                    list:[
                        {id:1,name:"张三",age:18},
                        {id:2,name:"李四",age:24},
                        {id:3,name:"王五",age:31},
                        {id:4,name:"马云",age:26},
                        {id:5,name:"马小云",age:16},
                        {id:6,name:"小马云",age:11}
                    ],
                }
            },
            //存放自定义的方法
           methods:{
                normalClick(){
                    alert(111);
                },
               oneClick(){
                    alert(333);
               },
               getName(name){
                    alert(name)
               },
               del(index){
                    alert(index);
                    this.list.splice(index,1)
               }
           }
        })