vue基础知识 指令

{{插值表达式}}

<h2>{{word}}</h2>
<script>
const vue = new Vue({
        //挂载点
        el: 'h2',
        //数据注入
        data: {
            word: '这是插值'
        }
    });
    </script>

指令：由专门vue实例管理的自定义属性，称之为指令；

v-text==》innerText,textContent；
v-once只渲染一次
v-html==》innerHTML

<p v-text='username'></p>
<p v-once='username'>只渲染一次</p>
<p v-html='username'></p>
<script>
const vm = new Vue({
            el: '.app',
            data: {
                username: 'admin',
                },
            })
</script>

绑定style属性

v-bind: style;简写为：style;

<p v-bind:style='style1' v-text='username'></p>
        <!-- 简写 -->
<p :style='style1' v-text='username'></p>
<script>
const vm = new Vue({
            el: '.app',
            data: {
                username: 'admin',
                style1: 'color:red',
            },
})
</script>

绑定类class属性

v-bind: class,简写为：class

 <style>
        .active {
            color: rosybrown;
        }
        .big {
            font-size: 2rem;
        }
    </style>
    <div class="app">
    <p v-text='username' v-bind:class='class1'></p>
    <p v-text='username' :class='[`active`,`big`]'></p>
    <p v-text='username' :class='{active:isActive,big:isBig}'></p>
    </div>
<script>
const vm = new Vue({
            el: '.app',
            data: {
                username: 'admin',
                style1: 'color:red',
                class1: `active big`,
                isActive: true,
                isBig: false,
            },
    })
</script>

绑定事件

v-on:事件 可以简写为@事件

<p v-on:click='show' v-text='site'></p>
<p @click='show' v-text='site'></p>
<script>
const vm = new Vue({
            el: '.app',
            data: {
                username: 'admin',
                style1: 'color:red',
                class1: `active big`,
                isActive: true,
                isBig: false,
                site: '这是网站'
            },
            methods: {
                show() {
                    //this:就是当前vue实例对象
                    alert(this.site)
                }
            }
        })
</script>

事件修饰符

• prevent:防止元素的默认行为
  <a href="http://www.baidu.com" v-on:click.prevent='show' v-text='site'></a>
• stop 阻止冒泡
  <a href="http://www.baidu.com" v-on:click.prevent.stop='show' v-text='site'></a>

• onece 只允许执行一次
  <a href="http://www.baidu.com" v-on:click.prevent.once.stop='show' v-text='site'></a>

  事件方法的传参

  事件对象的参数么必须是$event

  <button @click.stop='handle($event,100,200)'>click</button>
  <script>
  const vm = new Vue({
           el: '.app',
           data: {
               username: 'admin',
               style1: 'color:red',
               class1: `active big`,
               isActive: true,
               isBig: false,
               site: '这是网站'
           },
           methods: {
               show() {
                   //this:就是当前vue实例对象
                   alert(this.site)
               },
               handle(ev, a, b) {
                   console.log(ev.type, ev.target);
                   console.log('%d+%d=%d', a, b, (a + b));
               }
           }
       })
  </script>

  

  双向绑定

  v-model

   <div class="app">
       <p>{{site}}</p>
       <p><input type="text" :value='site' @input="site=$event.target.value"></p>
       <!-- 语法糖 v-model -->
       <p><input type="text" v-model.lazy='site'></p>
   </div>
  <script>
   //双向绑定
   const vm = new Vue({
       el: '.app',
       data: {
           site: 'admin.com',
       },
       methods: {
       }
   })
  </script>

  

  列表渲染

  使用v-for指令基于一个数组来渲染一个列表，使用 item in items（别名 in 数据源）语法

  <div class="app">
       <!-- key可以干预diff算法
           vue通过稳定且唯一的key值判断这个节点是否需要重新渲染，以提升效率
       -->
       <!-- 数组 -->
       <ul>
           <li v-for="(item,index) in items" :key='index'> {{index}}--{{item}}</li>
       </ul>
       <!-- 对象 -->
       <ul>
           <li v-for="(item,prop,index) in user" :key="prop"> {{index}}-{{prop}}-{{item}}</li>
       </ul>
       <!-- 对象数组 -->
       <ul>
           <li v-for="(item,index) in users" :key="item.id"> {{item.id}}--{{item.name}}--{{item.age}}</li>
       </ul>
       <span v-for="(n,i) in 10" :key='i'>{{n}}</span>
   </div>
  <script>
   const vm = new Vue({
       el: '.app',
       data: {
           items: ['西安', '渭南', '咸阳'],
           user: {
               id: 10,
               name: 'admin',
               age: 22
           },
           users: [{
                   id: 1,
                   name: 'admin',
                   age: 18
               }, {
                   id: 2,
                   name: 'admin1',
                   age: 28
               }, {
                   id: 3,
                   name: 'admin2',
                   age: 38
               },
           ]
       }
   })
  </script>