Vue.js实战学习-Vue.js理解及数据绑定

最新推荐文章于 2022-06-17 01:21:47 发布

YKiOS

最新推荐文章于 2022-06-17 01:21:47 发布

阅读量401

点赞数 3

分类专栏： Vue.js 文章标签： Vue

本文链接：https://blog.csdn.net/YKiOS/article/details/84846676

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.Vue.js是什么？

Vue.js是一个渐进式的javaScript框架，在项目中，可以选择从不同的维度去使用它。

2.使用的模式：

MVVM模式：Model-View-ViewModel,当View(视图层)变化时，会自动更新到ViewModel(视图模型)，反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

3.el是什么？

el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器。

4.Vue的生命周期：

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用。

mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例：

      var app = new Vue({
        el:'#app',
        data: {
          name: ''
        },
        created:function (){
          console.log(this.name); //name 的值
        },
        mounted:function () {
          console.log(this.$el); // <div id="app"></div>
        }

5. 插值与表达式

使用双大括号(Mustache语法) “{{ }}” 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>插值与表达式示例</title>
  </head>
  <body>
    <div id="app">
      {{ date }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          date:new Date()
        },
        mounted:function () {
          var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
          this.timer = setInterval(function () {
            _this.date = new Date();  //修改数据date
          }, 1000);
        },
        beforeDestory:function () {
          if (this.timer) {
            clearInterval(this.timer);  //在Vue实例销毁前，清除我们的定时器
          }
        }
      })
    </script>
  </body>
</html>

在{{ }}中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元运算等，示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{}}的其他使用</title>
  </head>
  <body>
    <div id="app">
      {{ number / 10 }}
      {{ isOK ? '确定' : '取消' }}
      {{ text.split(',').reverse().join(',') }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          number: 100,
          isOK: false,
          text: '123,456'
        }
      })
    </script>
  </body>
</html>

显示结果依次为: 10、取消、456，123。

Vue.js只支持单个表达式，不支持语句和流控制。

6. 过滤器

Vue.js支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

过滤器也可以串联，而且可以接收参数，如：

7.语法糖

Vue.js的v-bind和v-on指令提供了语法糖，也就是它们的缩写，如：

v-bind可以直接写一个冒号":"
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src="imgUrl">

v-on可以直接用"@"来缩写：
<button v-on:click="handleClose">点击隐藏</button>
<!-- 缩写为 -->
<button @click="handleClose">点击隐藏</button>