Vue基础

为什么 要学习前端流行框架？

1. 提高开发效率
2. 企业来说，时间就是金钱
3. 增强就业竞争力

常用事件：

v-cloak：用于去除表达式闪烁问题<p v-cloak="">，再加入样式[v-cloak]{display:none;}
v-text：可以在里面插入数据<p v-text="">
v-html：可以在里面插入html标签数据<p v-html="">
v-bind：用于绑定元素来获取data数据，还可以连接合法的js表达式，简写方式为：title=" "
v-on：事件绑定，用法：<p v-on:click="func">，简写方式@click，click可替换为其它事件

事件修饰符：

• .stop：阻止冒泡
• .prevent：阻止默认事件
• .capture：添加事件侦听器时使用事件捕获模式
• .self：只当事件在本元素本身触发时（比如子元素）才触发回调
• .once：事件只触发一次

v-model：双向绑定指令

<div id="dv1">
    {{msg}}
<input type="text" name="" id="" v-model="msg">
  </div>

  <script>
    new Vue({
      el:'#dv1',
      data:{
        msg:'ok'
      }
    })
  </script>

v-model只能用在表单元素中

为元素绑定class样式的五种方式：

<h1 :class="['cu','xie','se']">{{msg}}</h1>
<h1 :class="['cu','xie',flag?'se':'']">{{msg}}</h1>
<h1 :class="['cu','xie',{se:cr}]">{{msg}}</h1>
<h1 :class="{cu,true,xie:true,se:true}">{{msg}}</h1>
<h1 :class="style">{{msg}}</h1>
<script>
    new Vue({
      el:'#dv1',
      data:{
        msg:'vue中使用样式',
        flag:true,
       style:{cu,true,xie:true,se:true}
      }
    })
  </script>

 

v-for指令的四种使用方式

循环数组：
<p v-for="(item,i) in list">{{i}}:{{item}}</p>
循环数组对象：
<p v-for="(item,i) in list">{{i}}:{{item.id}}{{item.name}}</p>
 list:[
          {id:1,name:'a1'},
          {id:2,name:'a2'},
          {id:3,name:'a3'},
        ]
循环对象：
<p v-for="(item,v,i) in list">{{i}}---{{item}}--{{v}}</p>
list:{id:1,name:'a1'}
循环数字：
<p v-for="a in 100">{{a}}</p>

 <!--注意：v-for循环的的时候，key属性只能使用number获取string-->

<!--注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key 的值-->

<!--在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型：v-bin:key值<p v-for="item in list" v-bind:key="item.id"></p>-->

 

v-if 和 v-show 能实现同样的效果，

区别点是v-if是移除和插入dom元素：有较高的切换渲染消耗，

而v-show是display显示和隐藏元素：有较高的初始渲染消耗