Vue-Basics

时间 2019-12-01

标签 vue basics 繁體版

原文原文链接

初识Vue

vue特性
MVVM

Vue实例和数据绑定

生命周期钩子
文本插值和表达式
过滤器

计算属性

用法
getter和setter
计算属性缓存和方法
computed属性和watch属性

class与style绑定

绑定class的几种语法
绑定内联样式

1、初识Vue

1.Vue是一个轻巧、高性能、可组件化的MVVM库，是一个构建数据驱动的Web界面的库。css

2.Vue是一套构建用户界面的渐进式框架，与其它框架不一样的是，Vue采用自底向上增量开发的设计。Vue的核心只关注图层。html

3.Vue可驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。vue

Vue的特性

1.轻量级的框架git

2.双向数据绑定github

3.指令npm

4.插件化数组

MVVM模式

Model view viewmodel，把MVC中的Controller和MVP中的presenter改为viewmodel。Vue采用的模式就是MVVM的模式，视图层和数据层双向绑定。

view的变更会自动更新给viewmodel，反之亦然。

View是视图层，HTML显示页面；缓存

ViewModel是业务逻辑层（一切js可视业务逻辑，如表单按钮提交，自定义事件的注册和处理逻辑都在viewmodel里面负责监控两边的数据）；服务器

Model是数据层，对数据的处理（增删改查） app

2、Vue实例和数据绑定

//--------HTML--------

<div id = 'app'>
{{msg}}
</div>



//--------JavaScript--------

var app = new Vue({
    el:'#app',
    data:{
    msg:'开始学习啦'
    }

})

1.el即element，用于指定页面中已存在的DOM元素来挂载Vue实例，能够是标签，也能够是css语法，经常使用就是ID。

2.datas声明应用内须要双向绑定的数据，一般全部要用到的数据都在data内声明一下，以避免数据散落在业务逻辑中形成难以维护。也能够指向一个已有的变量。

3.当挂载成功，能够经过app.$el / app.$data 来访问vue实例的属性（访问vue实例的属性都用$开头）

4.Vue自己也代理了data里面的全部属性，能够直接经过app.msg进行访问

生命周期钩子

created------在实例被建立后被调用
mounted----当编译好的HTML被挂载到对应的位置,这个操做完成后触发
updated----当data中的数据改变,而且虚拟DOM从新渲染完成后触发
destroyed----Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
钩子的this 指向调用它的实例

//--------HTML--------

<div id = 'app'>
    {{msg}}
</div>



//--------JavaScript--------

var app = new Vue({
        el: '#app',
        data: {
            msg: '开始学习啦',
        },
        created() {
            alert('vue实例建立完成，可是还未挂载')
        },
        mounted() {
            alert('vue实例建立完成，已经挂载')
        }
    })

注：

父对象与子对象钩子执行顺序：

先生成父对象；

再生成子对象；

子对象挂载到父对象上；

父对象挂载到页面上。

文本插值和表达式

语法：{{}}

<div id='app'>
        {{6+6*3}} --- 进行简单的运算
        {{6>3?Y:N}} --- 三元运算符
        {{if(6>3){}}} --- 报错，文本插值不能是表达式的形式，只支持单个表达式
        {{var a = 1}} --- 报错，var a ; a=1 ,这是个语句
</div>

过滤器

在{{}}插值的尾部添加一个管道符号"|",对数据进行过滤.
经常使用于格式化文本,如首字母大写等.
过滤的规则自定义,经过给Vue实例添加选项filters来设置

{{data|filter1(11,22)}}中的第一个参数和第二个参数,分别对应过滤器的第二个参数和第三个参数,第一个参数始终是要过滤的那个数据.

时间案例

3、理解计算属性

用法1:计算属性运用于复杂逻辑

全部的计算属性都以函数的形式体如今Vue实例的computed选项内,最终返回计算后的结果.
计算属性多运用于复杂逻辑,包括运算\函数等,最终只返回一个结果.

例1:

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{num}}
</div>

new Vue({
  el: '#app', data: { text: '123,456,789' }, computed: { num() { return this.text.split(',').reverse().join(',') } } })

用法2:计算属性依赖多个Vue实例的数据

只要其中任一数据变化,计算属性就会执行,视图也会同步更新.

例2:展现两个bag中的物品总价

<div id="app">
        {{prices}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue ({ el:'#app', data:{ bag1:[{name:'a',price:100,count:5},{name:'b',price:200,count:3}], bag2:[{name:'c',price:300,count:2},{name:'d',price:600,count:8}] }, computed:{ prices(){ var prices = 0 for(var i = 0;i<this.bag1.length;i++){ prices+=this.bag1[i].price*this.bag1[i].count } for(var j = 0;j<this.bag2.length;j++){ prices+=this.bag2[j].price*this.bag2[j].count } return prices } } }) </script>

getter和setter

每个计算属性都包含了一个getter和setter,计算属性默认都是getter(例1 例2都是getter)

例3:使用getter和setter

<body>
    <div id="app">
        {{fullName}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var ad = new Vue({ el: '#app', data: { firstName: 'xiao', lastName: 'bai' }, computed: { fullName: { get() { return this.firstName + ' ' + this.lastName }, set(newValue) { var names = newValue.split(',') //分隔为数组 this.firstName = names[0] this.lastName = names[1] } } } }) </script> </body>

*计算属性能够依赖其它计算属性

*计算属性能够依赖当前Vue实例的数据,还能够依赖多个Vue实例的数据

计算属性缓存与方法

调用 methods 里的方法也能够与计算属性起到一样的做用。计算属性computed具备缓存，而methods无缓存。

页面中的方法：若是是调用方法，只要页面从新渲染。方法就会从新执行，不须要渲染，则不须要从新执行。

计算属性：无论渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变。

知乎

computed属性与watch属性

watch方法--观察Vue实例上的数据变更,只要指定的数据改变就会执行预约的函数

例：

<div id="app">
  {{msg}}<br>
  是否改变？{{change}}
  <button @click='changeIt'>是时候改变了</button>
</div>

new Vue({
  el: '#app',
  data: {
    msg: '一寸光阴一寸金',
    change: 'NO'
  },
  watch: {
    //只要msg改变，这个方法就会执行
    msg(val, oldval) {
      this.change = 'YES'
    }
  },
  methods: {
    changeIt() {
      this.msg = '寸金难买寸光阴'
    }
  }
})

4、class与style绑定

绑定class的几种语法

绑定class对象语法

---> 键是类名，值是布尔值，值须要定义在data中 {类名，布尔值}

例：

<style>
  .draw1 {
    background-color: skyblue;
  }

  .draw2 {
    color: red
  }

</style>

<div id="app">
  <div :class='{draw1:style1,draw2:style2}'>对象语法</div>
</div>

new Vue({
  el: '#app',
  data: {
    style1: true,
    style2: true
  }
})

计算属性表示：按钮背景颜色切换

<style>
  .draw1 {
    background-color: skyblue;
  }

  .draw2 {
    background-color: yellow;
  }

</style>

<div id="app">
  <input type="button" value='点击' :class='drawing' @click='clickChange'>
</div>

new Vue({
  el: '#app',
  data: {
    style1: false,
    style2: true
  },
  computed: {
    drawing() {
      return {
        draw1: this.style1,
        draw2: this.style2
      }
    }
  },
  methods: {
    clickChange() {
      if (this.style1 === false && this.style2 === true) {
        this.style1 = true
        this.style2 = false
      } else {
        this.style1 = false
        this.style2 = true
      }
    }
  }
})

绑定class数组语法

[对应类名，对应类名]，类名在data中体现

例：

<style>
  .draw1 {
    background-color: skyblue;
  }

  .draw2 {
    color: red;
  }

</style>

<div id="app">
  <div :class='[style1,style2]'>数组语法</div>
</div>

new Vue({
  el: '#app',
  data: {
    style1: 'draw1',
    style2: 'draw2'
  }
})

或者

"['类名','类名']"

<div id="app">
  <div :class="['draw1','draw2']">数组语法</div>
</div>

数组对象语法混用

<style>
  .draw1 {
    background: skyblue;
  }

  .draw2 {
    color: red;
  }

</style>

<div id="app">
  <div :class='[{draw1 : isActive},style2]'>绑定class数组方式</div>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    style1: 'draw1',
    style2: 'draw2'
  }
})
</script>

绑定内联样式

{style属性值，对应的值} 值在data中体现

<div id="app">
  <div :style="{'color':color,'fontSize':fontSize+'px'}">绑定内联</div>
</div>

new Vue({
  el: '#app',
  data: {
    color: 'red',
    fontSize: 28
  }
})

！！注意！！

vue中只要是大写字母，都会转成-加小写字母

如：

fontSize -> font-size

ahyHJKiJ -> ahy-h-j-ki-j

待补充待补充待补充......

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。