Vue的一些基础命令

script内的数据准备

<script src="./vue.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
    data() {
                return {
        myText: 'hello Green',
    myHtml: `
    <div>
        <button>我是按钮</button>
    </div>`,
    status:1
                }
            }
        })
</script>

1. v-text

• 作用元素的innerText

<div v-text="myText"></div>

2. v-html

• innerHTML 注意防止xss攻击，可以->外部输入的不要用

<div v-html="myHtml"></div>

3. v-if

• 逻辑简单的一层逻辑建议写,复杂的多层逻辑会导致代码难以维护；

<button v-if="status === 1">111</button>
<button v-else-if="status === 2">222</button>

4. v-show

• v-show: 元素隐藏与显示（元素始终被渲染）；
• v-if: 元素的插入与移除 (元素最终需要的某些元素被渲染)；
• 频繁的显示隐藏v-show, 如果判断总范围元素非常多,最终取其一,使用v-if；
• 需要依赖生命周期，用v-if

<button v-show="status !== 1">v-show1</button>
<button v-show="status !== 2">v-show2</button>
<button v-show="status !== 3">v-show3</button>

下面内容新的数据准备

<script>
    let vm = new Vue({
        el:'#app',
    data(){
            return {
        bindText:'Test',
        modelVal:'测试数据'
                }
            }
    })
    function change(ele) {
        console.log(ele.value, '改变了')
        vm.modelVal = ele.value;
    }
</script>

5. v-bind

• js绑定数据到页面（单向）；
• 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式；
• 在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象；

<input type="text" v-bind:value="bindText" v-bind:abc="'常量字符串'" />

5.1 复杂场景应用

• 样式数据准备

<style>
    .red {
        color:red;
        }
    .green {
        background - color: yellowgreen;
        }
    .big {
        font - size: 18px;
        }
</style>

• :style为v-bind:style简写方式

1. 参数为对象格式

<!-- :style为v-bind:style简写方式 -->
// 参数为对象格式
<button :style="{ color:'red','background-color':'yellowgreen',fontStyle:''  }">{}style</button>
   
<button :class="{ red:true,green:false,big:true   }">{}class</button>

2. 参数为三元表达式格式

// 参数为三元表达式格式
<button :style="!true?'color:' + 'red':'color:' + 'skyblue'">{}style</button>

3. 参数为数组格式

// 参数为数组格式 
<button :class="['red','green','big']">{}class</button>

4. 参数为字符串格式 （注意一定要用双引号包单引号）

// 参数为字符串格式 （注意一定要用双引号包单引号）
<button :class="'red green big'">{}class</button>

6. v-model

• 双向数据：js到页面，页面改变影响js

6.1 修饰符

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

<input type="text" v-model="modelVal"/>

• v-model是 绑定value、监听input事件 两个动作的语法糖；

6.2 v-model原理级别实现

• :value绑定value值；
• oninput绑定数据监听事件；

<input type="text" :value="modelVal" oninput="change(this)"/>

• 更底层的封装
• @input绑定数据监听事件；

<input type="text" :value="modelVal" @input="e => modelVal = e.target.value "/>

7. v-on

数据准备

<script>
    let vm = new Vue({
        methods:{
        tm1(event){
        console.log(arguments, '方法执行了')
    },
    tm2(strAbc,event){
        console.log(arguments, '方法执行了')
    },
    tm3(){
        console.log(arguments, '3方法执行了')
    }
            },
    el:'#app',
    data(){
                return {
        bindText:'Test',
    eventtype:'mouseover', // click
                }
            }
        })
</script>

• 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略；

• 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件；

• 普通v-on

<button v-on:click="bindText = '数据丢失啦'">普通v-on</button>
<button v-on:click="tm1">普通v-on</button>

• 传递参数的v-on

<button v-on:click="tm2('abc',$event)">传递参数的v-on</button>

• 简写v-on（@）

<button @click="tm1">普通v-on</button>

• 动态事件v-on，@[事件变量名]

<button @[eventtype]="tm3">普通v-on</button>

7.1 修饰符

• .stop - 调用 event.stopPropagation()；
• .prevent - 调用 event.preventDefault()；
• .capture - 添加事件侦听器时使用 capture 模式；
• .self - 只有当事件是从侦听器绑定的元素本身触发时才触发回调；
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调；
• .native - 监听组件根元素的原生事件；
• .once - 只触发一次回调；
• .left - (2.2.0) 只当点击鼠标左键时触发；
• .right - (2.2.0) 只当点击鼠标右键时触发；
• .middle - (2.2.0) 只当点击鼠标中键时触发；
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器；

8. v-for

• 基于源数据多次渲染元素或模板块；
• 此指令之值，必须使用特定语法 alias in expression；

数据准备

<script>
    let vm = new Vue({
        el: '#app',
    data() {
                return {
        arr: [1, 2, 3,4,5],
        obj: {a: 4, b: 5, c: 6 },
        set: new Set([7, 8, 9]),
        map: new Map([['d', 10], ['e', 11], ['f', 12],['g', 13]])

                }
            }
        })
</script>

1. arr

<ul>
    <li v-for="(item,index) in arr">{{ item }} || {{ index }}</li>
</ul>

2. object

<ul>
    <li v-for="(value,key,index) in obj">{{ value }} || {{ key }} || {{ index }}</li>
</ul>

3. Set

<ul>
    <li v-for="(value,index) in set">{{ value }} || {{ index }}</li>
</ul>

4. Map

<ul>
    <li v-for="(entries,index) in map">{{ entries }} || {{ key }} || {{ index }}</li>
</ul>

<ul>
    <li :key="index" v-for="([key,val],index) in map">{{ val }} || {{ key }} || {{ index }}</li>
</ul >