Vue基础-1_在vue中响应更新html的指令-CSDN博客

本文链接：https://blog.csdn.net/qq_40338278/article/details/109003656

Vue基础-1

1.指令

1.v-cloak：防止页面加载时出现闪烁问题
2.v-text：用于减数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
3.v-html：有安全问题，一般只在可信任内容上使用v-html,永不用在用户提交的内容上
4.v-pre：显示原始信息跳过编译过程，跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编译加这个指令可以加快渲染。
5.v-once：执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

2.双向数据绑定

1.v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用
2.v-on用来绑定事件的,形式如：v-on:click 缩写为 @click;
3.v-on事件函数中传入参数

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>

4.事件修饰符
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

5.按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })

</script>

6.v-bind 指令被用来响应地更新 HTML 属性
可绑定属性、对象和数组
7.分支结构

v-if 多个元素通过条件判断展示或者隐藏某个元素，或者多个元素
进行两个视图之间的切换

8.v-show 和 v-if的区别

v-show本质就是标签display设置为none，控制隐藏。v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素。v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

9.循环结构
v-for用于循环的数组里面的值可以是对象，也可以是普通元素

<ul id="example-1">
   <!-- 循环结构-遍历数组  
	item 是我们自己定义的一个名字  代表数组里面的每一项  
	items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>

key 的作用