Vue-Basics

初识Vue

vue特性
MVVM

Vue实例和数据绑定

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

计算属性

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

class与style绑定

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

一、初识Vue

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

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

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

Vue的特性

1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

MVVM模式

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

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

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

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

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

二、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)}}中的第一个参数和第二个参数,分别对应过滤器的第二个参数和第三个参数,第一个参数始终是要过滤的那个数据.

时间案例

三、理解计算属性

用法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 = '寸金难买寸光阴'
    }
  }
})

四、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

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

posted @ 2019-08-22 10:22 BUBU_Sourire 阅读(153) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

BUBU_Sourire

Hi！