Vue.js核心指令-优快云博客

本文链接：https://blog.youkuaiyun.com/iloadj/article/details/109604878

文章目录

回顾：
mvvm

const vm = new Vue({
  el: '#app', //挂载vue 
  data: { // 放数据  data属性 会直接挂载到实例上
    msg: 'xxx'
  },
  methods: { // 用于放置 实例方法 直接挂载到实例上
    changeMsg (){

    }
  }
})

{{}}
渲染数据
  {{}}
  1,js环境  如果写 变量 去实例上找有没有属性或者方法
  2, 渲染数据 要求 模板中 写表达式
  3，如果是全局变量 白名单里面才能运行

常用指令：
  扩展了 组件 的属性的功能
  <组件 v-指令名="值"/>
  值：是js环境 可以写表达式 会找实例上属性和方法
  v-model
  v-text 不重要
  v-html 渲染富文本

vm.$mount(document.querySelector('#app'))

其他常用指令

v-bind:属性
  将标签（组件），的普通属性的值 变成动态的值
  值：变成js环境 里面可以写表达式、如果有变量 会去找实例上的属性和方法
  简写：
    :属性
    例
    <div id="app">
        <a v-bind:href="href">跳转</a>
    </div>
    const vm= new Vue({
        el:"#app",
        data:{
            href:"https://www.bilibili.com/video/BV12J411m7MG?p=14"
        }
    })
v-on:事件
  将标签 事件 的事件函数 与 这个指令的 值进行绑定
    值：js环境 找 实例上的方法（只找方法）
  简写：
    @事件
注意：
  <button @click="fn">
  <button @click="fn()">
  绑定事件两种方式
    方式1，fn是事件函数  函数的第一个参数就是事件对象（没有兼容）
    方式2，fn不是事件函数 就是普通方法调用
  问题？
    方式2绑定 如何获取事件对象
    Vue提供了一个构造函数Vue的原型上 提供了一个变量 $event
    方式2绑定的使用场景
      这个函数在调用时需要传参
    
  取消冒泡  e.stopPropagation()
  阻止默认事件 e.preventDefault()

  事件修饰符
    .stop 阻止冒泡
    .prevent 阻止默认事件
    .once 只触发一次
    .capture 在捕获阶段就提前触发
    .self   只能由自己触发方法，后代元素无法触发
    可同时使用多个 例如@click.self.stop

条件渲染 v-if v-else-if v-else

v-show 控制元素显示、消失功能和v-if比较类似
异同
相同：都是元素的显示、消失状态值为true显示 false 隐藏
不同：v-show控制元素的display属性 v-if 是移除元素
使用场景：
1，代码块需要频繁切换状态此时应该使用v-show(性能消耗更小)
2，代码块初始不显示且不频繁切换 v-if(v-if是惰性，初始为false情况下，代码块不加载)

else

<div class="box" v-if="isShow">div1</div>
  
<div class="box2" v-else>div2</div>
当 isShow为true时，div1显示 div2消失
      false时 div2显示 div1消失
注意：
  v-else所在的元素 必须是v-if所在元素的下一个兄弟（除了空格）

v-else-if 使用场景不多

    <div class="box" v-if="num%3==0">div1</div>
    <div class="box2" v-else-if="num%3==1">div2</div>
    <div class="box3" v-else>div3</div>
  num++
    注意：
      v-if v-else-if v-else必须是连续兄弟，且中间没有其他兄弟 v-else放在最后一个 if放到第一个

条件与循环例子

v-if:属性

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
/*继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
原理是:整个将这条 <p v-if="seen">现在你看到我了</p> 语句注释了*/

列表渲染循环

    <!-- 
	1.数组的循环中获取的是值，index是下标
	2.对象的循环中获取的值，key是键，index是下标
	3.包含对象的数组遍历的是对象，使用ele.key可以获取值
-->
	<ul>
      <li v-for="el in arr">
        <!-- el作用域是li的内部 -->
        {{ el }}
        <!-- arr要写在data内部，el是值 -->
      </li>
    </ul>

    <ul>
      <li v-for="(el,index) in arr"> 
        <!-- 循环同时得到下标 -->
        <!-- el是值，index是下标 -->
        {{ el }} ==> {{index}}
      </li>
    </ul>

<!--循环的例子-->
<body>
    <div id="app">
        <!--  -->
        <ul>
            <li v-for="(el,index) in objArr">
              <!-- el作用域是li的内部 -->
              {{ el}}
              <!-- el是值，index是下标 -->
            </li>
            <li v-for="a in arr">
                {{a}}
            </li>
            <li v-for="(v,key,index) in obj">
                {{v +"."+key+"."+index}}
            </li>
          </ul>
    </div>
</body>
<script type="text/javascript" src="./vue.js" ></script>
<script type="text/javascript">
    const vm = new Vue({
        el:"#app",
        data:{
            arr:[1,2,3,4,5,6],
            objArr:[{
                name:"jack",
                age:"18"
            },{
                name:"rose",
                age:"20"
            }],
            obj:{
                name:"礼金卡",
                age:18,
            }

        }
    })

:class 类名设置

1.不管是数组还是字符串，都会将值全部取出作为类名
	<div :class="cls1">div1</div>  // 会解析为data中cls1属性的值
    cls:["box1","box2"]  会设置成 
	<div class="box1 box2">div1</div>
2.对象:取决于对象的键(属性)
	<p :class = "cls"></p>
	data:{
            cls:{value:1,
            name:"li"}
        }
	====><p class="value name"></p>
3.对象:取决于对象的属性和值，值为真，类名为属性，值为假，类名为空 
    <div :class="{active:1==1}"></div> // div class = active取决于 对象值是不是真
    <div :class="{active:isActive}"></div>
    <div :class="['box3','box2',cls1,{active:true}]"></div>
4.同样可以使用三元运算
	<p :class = "cls.value==2?cls:'add'"></p>
	data:{
            cls:{value:1}
        }
	<p class="add"></p>
	<!-- 若为真则是键-->