1、key的使用

key：只要元素需要循环，必须添加key作为唯一的标识

// 在style中
   .box{
            width: 90%;
            margin: 20px;
            padding: 20px;
            border: 1px solid blue;
        }

// 在body中
 <div id="app">
        <!-- <div class="box" v-for='(item,index) in arr' :key='item.id'> -->
        <div class="box" v-for='(item,index) in arr' :key='index'>
            <span>{{item.id}}</span>
            <span>{{item.name}}</span>
            <button @click='changeName(index)'>修改姓名</button>
        </div>
    </div>

// 在script中
   let vm = new Vue({
        // element 挂载点
        el: '#app',
        data: {
            arr: [
                { id: 1, name: '张三' },
                { id: 2, name: '李四' },
                { id: 3, name: '王五' },
            ]
        },
        methods: {
            // 修改姓名
            changeName(index){
                this.arr[index].name='赵六'
            }
        },

        // key:作用:添加唯一的标识,只要元素需要循环，那么都需要添加一个key作为唯一值(通常情况下会添加id)
    })

2、动态类名

class

　　总结：

:class='变量名' 变量名需要在data中声明,并且值要在style中定义
:class='[index%2==0:"red":"green"]' 只需要在style中声明类名
:class='{red:true,green:true}' 只需要在style中声明即可

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            color: pink;
        }

        .blue {
            background: blue;
        }
        .red{
            background: red;
        }
        .green {
            background: green;
        }

        .yellow {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 2.创建元素 -->
    <div id="app">
        <!-- 这是第一种绑定样式 -->
        <p class="p1">我是P标签</p>
        <!--  -->
        <button @click="changeColor('green')">green</button> <button @click="changeColor('yellow')">yellow</button>
        <p class="p1" :class='change'>我是P标签修改后的</p>

        <hr>
        <!-- 0:green 1:yellow 2:green 3:yellow 4:green 5:yellow 
        :class='[index%2==0?"green":"yellow"]'
        -->
        <div v-for='(item,index) in arr' :key='item.id' :class='[index%2==0?"green":"yellow"]'>{{item.name}}</div>

        <hr>
        <!-- {0:red,1:green,2:yellow 3:red,4:green，5:yellow} -->
        <!-- 三行改变颜色 :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'-->
        <div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3,green:index%3,yellow:index%3}'>{{item.name}}</div>

        <hr>
        <hr>
        <div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'>{{item.name}}</div>
        
        <!-- <div :class='{blue:false,green:true,yellow:false}'>我是测试用的</div> -->
    </div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // el,data,methods ...都叫做vue的配置项
    let vm = new Vue({
        // element 挂载点
        el: '#app',
        data: {
            change: 'blue',
            arr: [
                { id: 1, name: '苹果' },
                { id: 2, name: '香蕉' },
                { id: 3, name: '橘子' },
                { id: 4, name: '橙子' },
                { id: 5, name: '柚子' },
                { id: 6, name: '葡萄' },
            ]
        },
        methods: {
            // 修改背景色
            changeColor(color) {
                this.change = color
            }
        },
    })
</script>

</html>

style

　　总结:

:style='变量名' 必须要在data中声明对应样式属性有连字符的需要换为驼峰写法
:style='[变量名1,变量名2]'

<!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>
    <!-- 2.创建元素 -->
    <div id="app">
        <p style="background: red;">我是用来测试行内绑定样式</p>
        <hr>
        <p :style="bg">我是用来测试行内绑定样式</p>
        <hr>
        <hr>
        <p :style="[bg,color]">我是用来测试行内绑定样式</p>
    </div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // el,data,methods ...都叫做vue的配置项
    let vm  = new Vue({
        // element 挂载点
        el:'#app',
        data:{
            bg:{
                background:'blue'
            },
            color:{
                color:'yellow',
                fontSize:'40px'
            }
        },
        methods: {
            
        },
    })
</script>
</html>

3、表单的使用

总结：

radio：会把value值赋值给你定义的变量
checkbox：会把value值赋值给你定义的变量
multiple：实现下拉框的多选

<!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>
    <!-- 2.创建元素 -->
    <div id="app">
        <h2>添加学员</h2>
        <div>姓名: <input type="text" v-model='user.name'> </div>
        <!-- 对于单选框来说,会把value的值赋值给你定义的变量(user.sex) -->
        <div>性别: <input type="radio" name='sex' value="0" v-model='user.sex'>男
            <input type="radio" name='sex' value="1" v-model='user.sex'>女
        </div>
        <div>
            电话: <input type="number" v-model='user.tel'>
        </div>
        <div>
            密码: <input type="password" v-model='user.pass'>
        </div>
        <div>
            确认密码: <input type="password" v-model='confirm'>
        </div>
        <div>
            爱好: <input type="checkbox" value="sing" v-model='user.hobby'>唱歌
            <input type="checkbox" value="dancing" v-model='user.hobby'>跳舞
            <input type="checkbox" value="playing" v-model='user.hobby'> 打游戏
            <input type="checkbox" value="codding" v-model='user.hobby'>写代码
        </div>
        <div>
            专业:
            <!-- 下拉框:下拉框中的选中的那一项的value值会赋值为select -->
            <select name="" id="" v-model='user.job'>
                <option value="java">java工程师</option>
                <option value="web">web工程师</option>
                <option value="php">php工程师</option>
            </select>
        </div>
        <div>
            证书:
            <!-- multiple 实现多选 -->
            <select name="" id="" v-model='user.cert' multiple>
                <option value="erji">计算机二级</option>
                <option value="siji">英语四级</option>
                <option value="liuji">英语6级</option>
            </select>
        </div>
        <div>
            备注:
            <textarea name="" id="" cols="30" rows="10" v-model='user.des'></textarea>
        </div>
        <div>
            <input type="checkbox" v-model='user.isAgree'>是否同意
        </div>
        <div>
            <button @click='submit()' :disabled='!user.isAgree'>提交</button>
        </div>
    </div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // el,data,methods ...都叫做vue的配置项
    // 姓名 name eg:"张三"
    // 性别 sex  eg:"0"   说明：男-0 女-1 
    // 电话 tel  eg:"15747474747"
    // 密码 pass eg:"123"
    // 爱好 hobby eg:["codding","playing"] 说明：唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding 
    // 专业 job eg:"web"  说明：java工程师-java web工程师-web php工程师-php 
    // 证书 cert eg:["erji","siji"] eg:计算机二级-erji 英语四级-siji 英语6级-liuji 
    // 备注 des eg:"他是一个党员"
    // 是否同意 isAgree eg:true  同意-true 不同意-false

    let vm = new Vue({
        // element 挂载点
        el: '#app',
        data: {
            confirm: '',
            user: {
                name: 'zs',
                sex: '1',
                tel: '110',
                pass: '123',
                hobby: ['sing','playing'],
                job: 'web',
                cert: ['liuji'],
                des: '是个好人',
                isAgree: false
            }
        },
        methods: {
            // 提交
            submit() {
                console.log(this.user)
                if(this.confirm==this.user.pass){
                    console.log('发送请求')
                }else{
                    console.log('密码不一致')
                }
            }
        },
    })
</script>

</html>

4、事件使用

-如何绑定事件

　　v-on:click

-事件传参

隐式传参方法名不添加小括号：默认会有event对象，直接在方法中获取即可
传参实参必须是$event，方法中正常获取event即可

<body>
    <!-- 2.创建元素 -->
    <div id="app">
        {{num}}
        <!-- <button @click = 'add()'>点击增加</button> -->
        <!-- <button @click = 'add(5)'>点击增加5</button> -->
        <!-- 默认不传参 不加括号的情况叫做隐式传参 -->
        <button @click = 'add2'>点击增加</button>

        <!-- 需要传递参数的时候务必使用$event获取  -->
        <button @click = 'add3($event)'>点击增加</button>
        <hr>

        <button @click = 'num+=2'>点击增加2</button>
    </div>
</body>
<script>
    // el,data,methods ...都叫做vue的配置项
    let vm  = new Vue({
        // element 挂载点
        el:'#app',
        data:{
            num:0
        },
        methods: {
            // add(n){
            //     this.num+=n
            // }
            add2(e){
                console.log(e)
            },
            add3(e){
                console.log(e) 
            }
        },
    })
</script>

5、修饰符

事件修饰符

　　-冒泡stopPropagation

@click.stop

<div id="app">
        <div class="box" @click='box'>
            我是大盒子
            <div class="outer"  @click='outer'>
                我是外层盒子
                <div class="inner"  @click.stop='inner'>我是里层盒子</div>
            </div>
        </div>
    </div>

　　-捕获capture

@click.capture
  <!-- capture:给谁添加谁先触发，之后会按照冒泡来触发 -->
    <div id="app">
        <div class="box" @click='box'>
            我是大盒子
            <div class="outer"  @click.capture='outer'>
                我是外层盒子
                <div class="inner"  @click='inner'>我是里层盒子</div>
            </div>
        </div>
    </div>

　　-once　　

@click.once  给谁添加，只执行一次
<!-- once；只执行一次 -->
    <div id="app">
        <div class="box" @click='box'>
            我是大盒子
            <div class="outer"  @click.once='outer'>
                我是外层盒子
                <div class="inner"  @click='inner'>我是里层盒子</div>
            </div>
        </div>
    </div>

　　-self

@click.self 只能自己触发自己
 <!-- once；只执行一次 -->
    <div id="app">
        <div class="box" @click='box'>
            我是大盒子
            <div class="outer"  @click.self='outer'>
                我是外层盒子
                <div class="inner"  @click='inner'>我是里层盒子</div>
            </div>
        </div>
    </div>

　　-prevent

@click.prevent 阻止事件的默认行为
<div id="app">
        <!-- prevent 阻止事件的默认行为 -->
        <a href="http://www.ujiuye.com" @click.prevent = 'skip'>点我跳转</a>
        <div @contextmenu.prevent = 'right'>我是右键菜单</div>
       
 </div>

键盘修饰符

　　@keydown.up

　　@keydown.down

　　@keydown.left

　　@keydown.right

　　@keydown.enter

<div id="app">
       <input type="text" @keydown.down='down' placeholder="向下">
       <input type="text" @keydown.up='up' placeholder="向上">
       <input type="text" @keydown.left='left' placeholder="向左">
       <input type="text" @keydown.right='right' placeholder="向右">
    </div>
   <script>
    // el,data,methods ...都叫做vue的配置项
    let vm  = new Vue({
        // element 挂载点
        el:'#app',
        data:{

        },
        methods: {
            down(){
                console.log('down')
            },
            up(){
                console.log('up')
            },
            left(){
                console.log('left')
            },
            right(){
                console.log('right')
            }
        },
    })
</script>

鼠标修饰符

　　@click.left

　　@click.middle

　　@click.right

<div id="app">
      <div @click.left='left'>点击鼠标左键</div>
      <div @click.middle='middle'>点击鼠标中键</div>
      <div @click.right.prevent='right'>点击鼠标右键</div>
    </div>
    <script>
    // el,data,methods ...都叫做vue的配置项
    let vm  = new Vue({
        // element 挂载点
        el:'#app',
        data:{

        },
        methods: {
            left(){
                console.log('left')
            },
            middle(){
                console.log('middle')
            },
            right(){
                console.log('right')
            },
            
        },
    })
</script>

表单修饰符

　　v-model.lazy

layz:失去光标后更新数据
<input type="text" v-model.lazy='msg'>{{msg}}

　　v-model.number

number:判断定义变量的数据类型，只判断第一位
 <input type="text" v-model.number='num'>{{typeof(num)}}

　　v-model.trim

trim:去除用户输入的首尾空格,不能验证初始值
<input type="text" v-model.trim = 'content'>{{content.length}}

6、生命周期

8个钩子函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

具体使用：

<!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>
    <button>点击销毁</button>
    <!-- 2.创建元素 -->
    <div id="app">
        {{msg}}
        <input type="text" v-model='msg'>
    </div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // el,data,methods ...都叫做vue的配置项
    let vm  = new Vue({
        // element 挂载点
        el:'#app',
        data:{
            msg:'张三'
        },
        methods: {
            
        },
        // 以下是生命周期中的8个钩子函数
        // 所有数据都是undefined
        beforeCreate(){
            console.log(this)
            console.log('创建之前')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        // el:undefined data和msg的值已经获取到
        created() {
            console.log('创建完成')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        // 数据都已经拿到，el:找到挂载点但是未解析数据
        beforeMount() {
            console.log('挂载之前')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        // 数据和节点都已经解析完毕
        mounted() {
            console.log('挂载完成')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        // 更新前后数据都是最新的
        beforeUpdate() {
            console.log('更新之前')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        updated() {
            console.log('更新完成')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        beforeDestroy() {
            console.log('销毁之前')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
        destroyed() {
            console.log('销毁完成')
            console.log('el:',this.$el)
            console.log('data:',this.$data)
            console.log('msg:',this.msg)
        },
    })

    // 模拟销毁
    document.querySelector('button').onclick = function(){
        vm.$destroy()
    }
</script>
</html>

总结：

对于生命周期，最常用的是mounted钩子函数，代表挂载完成

posted on 2021-01-05 21:29 三岁惹阅读(100) 评论(0) 收藏举报

刷新页面返回顶部

1、key的使用

2、动态类名

3、表单的使用

4、事件使用

5、修饰符

事件修饰符

键盘修饰符

鼠标修饰符

表单修饰符

6、生命周期

公告