Vue2 插值语法 v-属性键盘事件

mustang

    <style>
        [v-cloak]{
            display: none;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .boxBg{
            background-color: aqua;
        }
    </style>
   
    <div class="app">
        <h1>{{context}}</h1>							<!-- 不解析html标签,网速慢时会显示未解析的差值语法 -->
        <!-- 只渲染一次，修改data后不会改变 -->
        <h1 v-once>{{context}}</h1>
        <h1 v-html="context1"></h1>
        <h1 v-text="context1"></h1>
        <!-- vue实例未创建时该标签存在v-cloak属性，实例创建后清除v-cloak属性，用于解决屏幕闪动 -->
        <h1 v-cloak>{{context}}</h1>
        <pre>
            该标签属于h5相关内容
            保留标签内文本布局输出
        </pre>
        <!-- 无法被vue解析 -->
        <h1 v-pre>{{context}}</h1>
		
		<!-- 数据单向绑定，数据只能通过data修改，input无法修改data属性 -->
		<input type="text" v-bind:value="context">
		<input type="text" :value="context">					<!-- 简写（语法糖形式） -->
		<a v-bind:href="url">百度一下</a>						<!-- 动态绑定属性 -->
		<div :class="{box:isbox}"></div>											<!-- 动态绑定类名,对象形式 -->
		<div :class="['box','boxBg']"></div>											<!-- 动态绑定类名,数组形式 （数组元素为字符串，并且要与类名、data内的元素一一对应）-->

		<ul>
            <li v-for="(item,index) in arr" :key="index" :class="{boxBg}">
                {{index}}:{{item}}
            </li>

			<li v-for="(item,index) in arr2" :key="index" :class="{boxBg:arrIndex==index}" v-on:click="btn(item,index)">
                {{index}}:{{item}}
            </li>
        </ul>
		
		<a :style="{color,fontSize:fs}" href="#">百度一下</a>						<!-- 动态绑定样式 -->
		<a :style="[style1,style2]" href="#">百度一下</a>
    </div>

    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                context: '我是一段文本',
                context1:'<a href="">我是a标签</a>',,
                url:'https://www.baidu.com'
                isbox:true,
                box:true,
                hasBg:true,
                arr:['华为','OPPO','小米'],
                arrIndex:-1
				
				color:red,
				fs:"12px"
				style1:{color:"aqua"},
				style2:{fontSize:"12px"}
            },
            methods: {
                btn(item,index){
                    console.log(index);
                    console.log(item);

                    this.arrIndex=index
                }
            }
        })
    </script>

v-if

    <div class="app">
        <h1 v-if="score<50">不及格</h1>
        <h1 v-else-if="score>50&&score<80">及格</h1>
        <h1 v-else-if="score>80&&score<90">中等</h1>
        <h1 v-else-if="score>90&&score<99">优秀</h1>
        <h1 v-else>100昏</h1>
    </div>

    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                score: 80
            }
        })
    </script>

v-show 以及它与v-if区别

<div class="app">
        <!-- v-show 对应值为fasle，h1加行内样式display：none -->
        <h1 v-show="flag">我是h1</h1>
        <!-- v-if 对应值为fasle，h1从dom树中删除 -->
        <h1 v-if="flag">我是h1</h1>
        <button @click="changeType">改变状态</button>
    </div>

    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                flag: true
            },
            methods: {
                changeType(){
                    this.flag=!this.flag
                }
            },
        })
    </script>

修饰符

<!-- 挂载点（vue容器） -->
    <div class="app">
        <div @click="btnF">
            <!-- 解决冒泡方法二：在子级用vue的.stop属性 -->
            <button @click.stop="btnC($event)">点我冒泡</button>
            <!-- 解决默认行为方法二 -->
            <a href="http://www.baidu.com" @click.prevent="link">百度</a>
            <!-- 键盘事件方法一 -->
            <input type="text" @keyup="inputKey1">
            <!-- 键盘事件方法二 -->
            <input type="text" @keyup.Enter="inputKey2">
            <!-- 键盘事件方法二(别名) -->
            <input type="text" @keyup.Up="inputKey3">
            <input type="text" @keydown.tab="inputKey4">
            <!-- .once只触发一次 -->
            <button @click.once="btnC($event)">点我冒泡</button>
        </div>
    </div>

    <script>
        // 创建vue实例
        const vm = new Vue({            //vm Vue{}
            el:'.app',
           methods:{
                btnF(){
                    console.log('触发了父级点击事件');
                },
                btnC(e){
                    console.log('触发了子级点击事件');
                    // 解决冒泡方法一：在子级用es6的e.stopPropagation();方法
                    // e.stopPropagation();
                },
                link(e){
                    // 解决默认事件方法一
                    e.preventDefault();
                },
                inputKey1(e){
                    if(e.key=='Enter'){
                        console.log('回车1');
                    }
                },
                inputKey2(e){
                    console.log('回车2');
                },
                inputKey3(e){
                    console.log('上');
                },
                inputKey4(e){
                    console.log('tab');
                }
            },
            
        })
    </script>

v-for 为什么要加:key

没有绑定key，默认绑定index，即dom元素的索引
如果在dom元素前添加一个元素，第二个元素（添加前的第一个元素）所保存的值，会先提出，当元素添加后，再次根据索引（添加的新元素）将值赋给新元素

如果绑定了data数组对象中某一元素的唯一标识，添加元素前，会将元素保存的值与该标识进行绑定，元素添加后，寻找data数组对象中唯一标识所绑定的值，将其渲染到浏览器上，没有绑定的标识，他的值赋为空，

由于值与唯一标识的绑定，vue便忽略了该dom元素，将更多的资源用于新元素添加的操作上