vue中常用的指令

vue中常用的指令

/* 
     v-model='xx':一般是用在表单元素上,input框内容发生改变,所有用到这个变量的地方都会自动更新
     v-text='xx':相当于 innerText,不能识别结构
     v-html='xx':相当于 innerHTML,能识别结构

     v-cloak:专门用来提供解决小胡子的显示问题,需要搭配css使用
              当vue编译完成之后,会把这个属性删掉,这是css样式就不起作用了
     v-once:有这个指令的标签只会编译一次,后期数据再变,它也不会变
     v-pre:有这个指令的标签及其后代元素,vue都不做处理(不经过vue处理),可以用来提升vue的编译效率

     v-if='true/false':控制元素或者组件是否加载,有比较大的切换开销
     v-else:跟 v-if 或者 v-eles-if 搭配只用,且中间不能插入其他无关标签或者组件
     v-show=true/false:用来控制元素或者组件显示不显示(控制diaplay的属性),有比较大的初始加载开销

     v-for='xx in yy':用来循环的,可以循环数组、数字、字符串、对象等。与v-if同时使用的时候,v-for的优先级要高于v-if的
        key 对vue来说,是元素的身份标识,有利于vue的diff计算
        key 在同一个for中不能重复。同一个页面或组件中想要使用相同的key值,那么key值所处的v-for不能为兄弟元素

     v-bind:prop='value':用来处理行内属性的一个指令,简写是一个冒号 :
        行内属性中 class 和 style 是经常操作的属性,所以vue对这两个属性专门做了加强
        :class='{类名1:布尔值,类名2:布尔值,...}' 只有值为true的类才会加上
        :style="{css属性名:css属性值}"

     v-on:事件名='方法名':专门用来绑定事件的指令,简写是:@
    */

<html>

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style>
    [v-cloak] {
      /* 透明度设置为 0 */
      opacity: 0;
    }
  style>
head>

<body>
  <div id="app" v-cloak>
    <h1 v-once>{{name}}h1>
    <h1>{{name}}h1>
    <input type="text" v-model="name">
    
    <ul v-pre>
      <li>{{name}}li>
      <li>{{name}}li>
      <li>{{name}}li>
    ul>

    <h4 v-if='1'>{{name}}h4>
    
    <h4 v-else>我没有h4>

    <div>
      <p v-for="(item, index) in arr" :key="index">
        <span>{{index}}: {{item}}span>
      p>
      
     
    div>
    <div>
      <p v-for="(item, index) in arr" :key="index">
        <span>{{index}}: {{item}}span>
      p>
    div>
    
    <p v-bind:name='name'>测试v-bindp>
    <p :name='name'>测试v-bindp> 

    <h3 :class="{box:0, box1:1, box2:3}">测试classh3>
    <div :style="{height: he}">{{he}}div>
    
    <div v-bind="obj">{{name}}div>
  div>
  <script src="../node_modules/vue/dist/vue.js">script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: '测试',
        arr: [1,2,3,4,5,6],
        he: '30px',
      obj: {color: 'red', id:111, 'font-size': '20px'}
      },
    });
  script>
body>

html>

你可能感兴趣的:(vue,vue.js,前端)