2020-11-17 Vue的语法、事件及表单

1、数据渲染

• 基本数据渲染{{}}
• 条件数据渲染
• 循环数据渲染

<div id="app">
        <!-- 使用双大括号进行渲染 基本数据渲染 -->
        {{msg}}
        <!-- 条件数据渲染 -->
        <div v-if='isShow'>我是对的</div>
        <div v-else>我是错的</div>
        <!-- 循环渲染 -->
        <ul>
            <!-- key 保证数据的唯一性
                     可以防止重复渲染 -->
            <li v-for='item in arr':key='item.id'>{{item.name}} / {{item.age}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                arr:[{
                    id:1,
                    name:'tom',
                    age:12
                },
                {
                    id:2,
                    name:'zs',
                    age:13
                },
                {
                    id:3,
                    name:'ww',
                    age:15
                }],
                isShow:true,    //布尔类型
                msg:[1,2,3,4,5],
            },
            
        })
    </script>

2、v-text、v-html

v-text 单纯的识别渲染文本
v-html 会解析HTML标签，然后再渲染数据

<div id="app">
        <!-- v-text，用于文本在模板中的渲染 -->
        <span v-text='msg'></span>
        <!-- v-html -->
        <div v-html='msg'></div>
        <!-- {{msg}} -->
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'<h1> Hello World </h1>'
            },
        })
    </script>

3、v-if、v-show

v-if
根据条件判断，控制当前节点是否显示到页面中，如果不符合条件，那么不会显示，并且节点不会进行挂载
v-show
根据条件判断，控制当前节点是否显示到页面中，如果不符合条件，那么不会显示，但是节点会挂载到DOM树上，只是添加了一个display:none

4、v-bind

绑定属性
简写形式是 :
属性是动态的
绑定行内样式 :style
取值：{}，obj，[obj1,obj2]
绑定类名 :class

<div id="app">
        <div :style='[obj,obj1]'></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{height:"200px",background:"red"},
                obj1:{width:"200px"}
            },
            methods:{
                
            }
        })
    </script>

5、v-on

绑定事件
简写形式：@
事件类型为动态值
事件修饰符：
        .once 代表当前时间只执行一次
        .stop 代表阻止冒泡行为
        .prevent 阻止默认行为

<div id="app">
        <!-- <button @click='load'>点击</button> -->
        <div @click='outer'>
            <div @click='inner' class="inner"></div>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{

            },
            methods:{
                load(){
                    alert('1111')
                },
                inner(){
                    console.log('inner')
                },
                outer(){
                    console.log('outer')
                }
            }
        })
    </script>

6、v-model

用v-model指令在表单、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

<div id="app">
       <form v-model='form'>
           {{form}}
            <!-- 单行文本框 -->
            <div>姓名：<input type="text" v-model.trim='form.username'></div>
            <!-- 多行文本框 -->
            <div>简介：<textarea cols='30' rows='10' v-model='form.desc'></textarea></div>
            <!-- 复选框 -->
            <input type="checkbox" value="吃饭" v-model='form.hobby'>吃饭
            <input type="checkbox" value="睡觉" v-model='form.hobby'>睡觉
            <input type="checkbox" value="打游戏" v-model='form.hobby'>打游戏
            <!-- 单选按钮 -->
            <div>
                性别：
                <input type="radio" value="1" v-model='form.gender'>男
                <input type="radio" value="0" v-model='form.gender'>女
            </div>
            <!-- 下拉框 -->
            <div>
                地址：
                <select multiple v-model='form.address'>
                    <option value="">请选择</option>
                    <option value="山西">山西</option>
                    <option value="江西">江西</option>
                    <option value="广西">广西</option>
                    <option value="江苏">江苏</option>
                </select>
            </div>
       </form>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                form:{
                    username:'',
                    desc:'',
                    hobby:[],
                    gender:'',
                    address:''
                }
                
            },
            methods:{
                
            }
        })
    </script>

修饰符：

1. lazy
   默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步
2. number
   如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
3. trim
   如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符