vue基础

vue基础

一、vue基础指令

1、数据渲染

1：插值表达式

​ 插值表达式：数据绑定【插值表达式中一般指定变量，也可以指定表达式……】

示例代码如下：

<span>Message: {
  { msg }}</span>
<span>Message: {
  { 1+1 }}</span>

注意一：

插值闪烁：当数据不是预定义的时候，而是通过网络进行获取，那么当网络延迟加载的时候，页面中会显示插值表达式的语法，等网络加载完毕后，数据进行渲染，这种现象称之为——插值闪烁

测试代码如下：

<div id="app">
    {
  {username}}
</div>
<script>
   /* 利用定时器模拟一些网络延迟加载导致的插值闪烁现 */
    setInterval(()=>{
     
        new Vue({
     
            el:"#app",
            data:{
     
                username:"橙子的代码世界"
            }
        });
    },5000);
</script>

注意二：

插值表达式不能作用在HTML的attribute（属性）上，应该使用v-bind指令

2：v-text和v-html

2.1、v-text

v-text ： 更新元素的文本内容 ，解决插值闪烁的问题

示例代码如下：

<span v-text='msg'></span>
<span>{
  {msg}}</span>

2.2、v-html

v-html：可以解析渲染标签，解决插值闪烁的问题

示例代码如下：

<div v-html='html'></div>
<script>
new Vue({
     
    el:'#app',
    data:{
     
        html:'<h1>v-html指令</h1>'
    }
})
</script>

2、条件渲染

1：v-if

​ v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 在切换时元素及它的数据绑定 / 组件被销毁并重建。 (DOM元素的删除和添加)

v-if相当于JavaScript中的if(){}语句；
v-else-if 相当于JavaScript中的 else if(){}语句； 前一兄弟元素必须有 v-if 或 v-else-if。
v-else 相当于JavaScript中的 else{}语句 ；不需要表达式， 前一兄弟元素必须有 v-if 或 v-else-if。

示例代码如下：

<div id='app'>
    <div v-if="type === 'A'"> A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        type:'A'
    }
})
</script>

2：v-show

​ v-show 指令用于根据条件展示元素，与v-if不同的是，带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show只是根据表达式之真假值，简单地切换元素的 CSS 的display 属性。

示例代码【简单导航切换】如下：

 <div id='app'>
     <ul>
         <li v-for='(item,index) in navs' @mouseenter='isActive=index' @mouseleave="isActive=-1"><span v-text='item.name'></span>
             <ol>
                 <li v-show='isActive==index' v-text='j_navs'></li>  
             </ol>
         </li>
     </ul>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        isActive:-1,
        navs:[{id:1,name:'美妆',j_navs:['口红','面膜']},{id:2,name:'衣服',j_navs:['男装','女装']},{id:3,name:'家电',j_navs:['电视','电饭煲']}]
    }
})
</script>

3：v-if 和v-show的区别（面试要点）

1、v-if

• 如果条件成立，那么创建该标签，如果条件不成立，那么销毁该标签【创建销毁】
• 创建和销毁，是直接操作DOM进行的
• 运行时，不经常切换或者条件不经常更改，则使用v-if

2、v-show

• 如果条件成立，那么显示该标签，如果条件不成立，那么隐藏该标签【显示隐藏】
• 显示和隐藏，是通过css属性设置
• 运行时，频繁切换，则使用v-show

3、注意：

• v-if只有当条件成立，才会创建标签，v-show不管条件成立不成立，第一次都会创建该标签

3、列表渲染

1：v-for

​ v-for 指令基于源数据多次渲染元素或模板块 。v-for 指令的值需要使用 alias in expression 形式的特殊语法，为当前遍历元素提供别名

1、v-for遍历数组

1：v-for=‘item in array’ item 保存的是数组中的数据，array是数据的名称

2：v-for=‘(item,index) in array’ item 保存的是数组中的数据，index是数组的索引，array是数据的名称

示例代码如下：

<div id='app'>
  <ul>
        <li v-for="(item,index) in array">数据：{
  {item.name}}>>>下标：{
  {index}}</li>
  </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            array:[{id:1001,name:'衣服',price:'1200'},{id:1002,name:'鞋子',price:'1100'},{id:1003,name:'美妆',price:'800'}]
        }
    });
</script>

2、v-for遍历对象

1：v-for=‘o1 in obj’ o1保存的是对象的属性值，obj是对象的名字

2：v-for=‘(o1,o2) in obj’ o1保存的是对象的属性值，o2保存的是属性名，obj是对象的名字

3：v-for=‘(o1,o2,o3) in obj’ o1保存的是对象的属性值，o2保存的是属性名，o3保存的是下标，obj是对象的名字

示例代码如下：

<div id="app">
    <ul>
        <li v-for="(o1,o2,o3) in obj">o1++++o2+++o3</li>
    </ul>
</div>
   <script>

    new Vue({
        el:"#app",
        data:{
            obj:{
               code：200,
               msg:'查询成功',
               data:[{id:1001,name:'张三',password:'c12345'}]
              }
        }
    });
</script>

2：v-for要点：避免v-if和v-for一起使用（面试会出）

注意：

永远不要把 v-if 和 v-for 同时用在同一个元素上。因为当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，哪怕我们只渲染出一小部分的元素，也得在每次重渲染的时候遍历整个列表，效率低

解决方法一：

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 列表的 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

解决方法二： 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users”

v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

4、属性渲染

1：v-bind

v-bind指令负责渲染数据到属性中【更改属性值】

示例代码如下：

    <input type="text" v-bind:value="message">
    <!--    简写方式-->
    <input type="text" :value="message">

通过v-bind更改属性值为对象

示例代码如下：

<div id="app">

    <h1 :class="{red:className,green:!className}">解封了</h1>

    <button @click