1. Vue 基础语法

Nsir15
162 阅读5分钟

零、声明周期钩子函数

一、插值操作

Mustache语法（也就是大括号语法）。

数据是响应式的。

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

Mustache 不能用在HTML特性上。

// 遇到这种情况应该使用 v-bind 指令
<div v-bind:id="dynamicId"></div>

1、v-once 指令

执行一次性地插值，当数据改变时，插值处的内容不会更新。

2、原始的HTML v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。

  <div id="app">
    <p>{{rawHtml}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        rawHtml:'<span style="color: red">this should be red</span>'
      }
    });
  </script>

显示效果如下：

加上 v-html之后：

<div id="app">
    <!-- <p>{{rawHtml}}</p> -->
    <p><span v-html='rawHtml'></span></p>
</div>

3、v-text

作用和mustache一致。通常情况下，接受一个string类型的值。

4、v-pre

用于跳过这个元素和它子元素的编译过程。直接显示原始的Mustache语法。

5、v-cloak

浏览器在解析数据的时候，代码从上往下解析。会先把Mustache语法直接显示出来，然后数据加载完后替换成真实数据，就会出现一闪的效果。

<div id="app">
    <p>{{title}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    setTimeout(() => {
      const app = new Vue({
        el:'#app',
        data:{
          title:'我是title'
        }
      });
    }, 3000);
</script>

加上 v-cloak就会在数据加载完之后，才会显示UI

<style>
    [v-cloak]{
      display: none
    }
</style>

<div id="app">
    <p v-cloak>{{title}}</p>
</div>

二、绑定属性 v-bind

【作用】： 动态绑定属性。

【缩写】： ：

v-bind 用于绑定一个或者多个属性，或者向另一个组件传递props值（比如父组件向子组件传递数据的时候）。

例子：

开发中通常使用语法糖简写的方式：

1、v-bind绑定class

绑定class有两种方式：

  • 对象语法

  • 数组语法

2、v-bind绑定style

绑定style 也是两种方式：

  • 对象方法

  • 数组方法

三、计算属性

计算属性写在实例的computed选项中。对于任何复杂逻辑，你都应当使用计算属性。

const app = new Vue({
      el:'#app',
      data:{
        firstName:'john',
        lastName:'smith',
      },
      computed:{
        fullName:function(){
          return this.firstName + ' ' + this.lastName;
        }
      }
    });

1、getter 和 setter

计算属性默认只有getter ，就像上面例子的写法。不过在需要的时候也可以使用setter写法。

const app = new Vue({
      el:'#app',
      data:{
        firstName:'john',
        lastName:'smith',
      },
      computed:{
        // fullName:function(){
        //   return this.firstName + ' ' + this.lastName;
        // }
        fullName:{
          get(){
            return this.firstName + ' ' + this.lastName;
          },
          set(newName){
            const names = newName.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          }
        }
      }
});

2、计算属性的缓存

我们可能会思考这么一个问题，就是使用method 和 computed都可以实现同样的功能，为什么还要用计算属性。原因就是计算属性会缓存，多次调用的时候只会被计算一次。

四、事件监听

1、概念

v-on

【作用】： 绑定事件监听器。 【缩写】： @ 【参数】： event

一、如果方法不需要换参数，那么调用的时候后面的()可以不用写。默认会将event参数传递进去。

二、如果需要传参数，同时也需要传递event，可以传递自定义参数最后，通过$event传入事件对象。

2、修饰符

Vue提供了修饰符方便我们处理一些事件：

  • .stop 调用event.stopPropagation()。
  • .prevent 调用event.preventDefault()。
  • .{keyCode | keyAlias} 只有事件是从特定键触发的时候才会触发回调。
  • .native 监听组件根元素的原生事件。
  • .once 只触发一次回调。

五、条件判断

v-if 、 v-else-if 、 v-else

1、概念

v-if后面的值为false时，对应的元素及子元素不会渲染。

例子：登录

<div id="app">
    <div v-if="username">
      <span>username:</span>
      <input placeholder="输入用户名">
    </div>
    <div v-else>
      <span>email:</span>
      <input placeholder="输入邮箱登录">
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el:'#app',
      data:{
        username:true,
      }
    });
</script>

上面的案例引出了一个小问题，就是在右侧修改app.username = false 之后，会切换到与邮箱界面，但是我们之前在input框输入的文字还在。

原因是： Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，因为两个模板使用了相同的元素，<input> 不会被替换掉，仅仅是替换了它的 placeholder。如果我们不想要这样的效果，可以给input 添加一个独一无二的key属性即可。

  <div id="app">
    <div v-if="username">
      <span>username:</span>
      <input placeholder="输入用户名" key='username'>
    </div>
    <div v-else>
      <span>email:</span>
      <input placeholder="输入邮箱登录" key='email'>
    </div>
  </div>

2、v-show

v-show 只是简单的切换元素的display属性。

3、v-show vs v-if

v-if 是真正的条件渲染。因为他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。

v-if是惰性的，如果初始渲染时条件为假，则什么也不做，直到条件第一次变为真的时候，才开始渲染条件块。

v-show 不管初始条件是什么，元素总是会被渲染并保留在DOM中，只是简单的基于CSS display切换。

一般来说v-if有更高的切换开销。v-show有更高的初始渲染开销。所以需要频繁切换的话，使用v-show更好一点。如果运行时条件很少改变，使用v-if比较好。

不推荐v-if和v-show一起使用。

v-if可以用在template上，v-show不支持template 元素，也不支持v-else。

六、循环遍历

v-for遍历数组和对象

格式 v-for = "item in items " 如果需要索引值： v-for = "(item ,index) in items"

遍历对象

1、遍历的时候绑定key 和不绑定key 的区别：

官方推荐在使用v-for的时候，给元素或者组件加上一个:key属性。

原因：

（1）、和Vue虚拟Dom的Diff算法有关。 这里我们借用React’s diff algorithm中的一张图来简单说明一下：

(2)、当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的:即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

(3)、所以我们需要使用key来给每个节点做一个唯一标识

  • Diff算法就可以正确的识别此节点
  • 找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM

2、数组中的哪些方法是响应式的

变异方法

变异方法，顾名思义，会改变调用了这些方法的原始数组。变异方法会触发视图的更新。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

七、阶段案例

八、v-model

1、概念

v-model实现表单元素和数据的双向绑定。

案例：

  <div id="app">
    <input type="text" v-model='message'>
    <h3>{{message}}</h3>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:''
      }
    });
  </script>

当我们在输入框输入内容时，input中的内容会实时传递给message属性，当我们手动改变message的值的时候，input 的内容也跟着发生改变。

2、v-model原理

v-model 实质上是一个语法糖，它本质上包含两个操作： 1、v-bind绑定一个value属性值。 2、v-on 绑定input事件。在事件中更新实例的message值。

  <div id="app">
    <input type="text" 
            :value = 'message'
            @input='typing'>
    <h3>{{message}}</h3>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'初始信息',
      },
      methods:{
        typing(event){
          console.log(event);
          this.message = event.target.value;
        }
      }
    });
  </script>

input 的事件可以简写如下：

@input='message = $event.target.value'

3、多个单选框 radio

  <div id="app">
    <!-- <input type="text" v-model='message'>
    <h3>{{message}}</h3> -->

    <!-- 多个单选框 -->

    <label for="male">
      <input type="radio" id="male" name="gender" v-model='gender' value="male">男
    </label>
    <label for="female">
      <input type="radio" id="female" name="gender" v-model = 'gender' value="female">女
    </label>
    <label for="none">
      <input type="radio" id="none" name="gender" v-model = 'gender' value="none">人妖
    </label>

    <h3>您的性别是：{{gender}}</h3>
  </div>

实例data中可以给默认值，那么默认就会选中该选项：

const app = new Vue({
      el:'#app',
      data:{
        message:'',
        gender:'none'
      }
    });

4、复选框 checkbox

复选框分两种情况：

（1）只有单个复选框，比如用户协议点击是否同意

<label for="private"><input type="checkbox" id="private" v-model='agree'>是否同意我是你爸爸</label>
<h3>I say {{agree}}</h3>

//data的属性是一个布尔值
const app = new Vue({
  el:'#app',
  data:{
    message:'',
    gender:'none',
    agree:true
  }
});

（2）多个复选框

<!-- 多个复选框 -->
<label><input type="checkbox" value="basketball" v-model='hobby'>篮球</label>
<label><input type="checkbox" value="football" v-model='hobby'>足球</label>
<label><input type="checkbox" value="ping-pong" v-model='hobby'>乒乓球</label>
<label><input type="checkbox" value="crystal-ball" v-model='hobby'>玻璃球</label>
<h3>你的爱好是：{{hobby}}</h3>


const app = new Vue({
  el:'#app',
  data:{
    message:'',
    gender:'none',
    agree:true,
    hobby:['crystal-ball']
  }
});

5、select

select也分单选和多选情况：

（1）单选

<select v-model='select'>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>
<h3>你最喜欢的水果是哪个：{{select}}</h3>

const app = new Vue({
      el:'#app',
      data:{
        select:'banana',
      }
    });

（2）多选

<select v-model='selects' multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>
<h3>你喜欢的水果有哪些：{{selects}}</h3>

const app = new Vue({
  el:'#app',
  data:{
    selects:['banana','apple']
  }
});

6、修饰符

#.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。这样方法感觉会调用太频繁了。lazy修饰符可以让input是去焦点或者按下回车时才会更新数据。

<input v-model.lazy="msg" >

#.number

因为默认情况下即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。

<input v-model.number="age" type="number">

#trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

<input v-model.trim="msg">

九、ES6补充

对象的增强写法

filters过滤器

可以看文档：过滤器部分

avatar
文章
阅读
粉丝