一切都是浮云..
一切都是浮云..

vue

vue

什么vue？

它是一套用于构建用户界面的渐进式框架，采用MVVM思想，Vue 的核心库只关注视图层，Vue也完全能够为复杂的单页应用提供驱动。

MVVM是什么？

view：视图层。viewModel：vm实例（视图模型层）。model：数据模型层。

安装vue

下载地址

起步


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>起步title>
  <script src="js/vue.js">script>
head>
<body >

<div id="app">
  {{1+2*4}}
div>

<script>
var app = new Vue({
  el:'#app'
})
script>

body>
html>

实例

创建根实例

var app = new Vue({
  el: '#app',
  data: {

  }
})
  • el：目标容器对象
  • data：初始化数据，里面存在一些变量，这些变量是被监测，并且可以响应的。

初始化一些数据

var app = new Vue({
  el:'#app',
  data: {
    show: false,
    price: 60,
    msg: '文本',
    arr: ['首页','关于','联系'],
    obj: {
      name: '张三',
      age: 20
    },
    bool: true
  },

})

也可以使用以下方式初始化一个根实例（new Vue）

<div id="app">div>

<script>
var app = new Vue({
  template: `
  <div>
    <h1>{{msg}}h1>
  div>
  `,
  data: {
    msg: '星期一'
  }
}).$mount('#app');

生命周期钩子函数

var app = new Vue({
  el:'#app',
  data: {
    name: '张三'
  },
  beforeCreate(){
    console.log('创建之前');
  },
  created(){
    console.log('创建之后');
  },
  beforeMount(){
    console.log('挂载之前');
  },
  mounted(){
    console.log('挂载之后');
  },
  beforeUpdate(){
    console.log('更新之前');
  },
  updated(){
    console.log('更新之后');
  },
  beforeDestroy(){
    console.log('销毁之前');
  },
  destroyed(){
    console.log('销毁之后');
  }
})

一打开页面就能执行的生命周期有那些？

  • beforeCreate 创建之前

创建之前不能获取data中的变量值，这样我们可以让loading显示或者检测页面授权。

  • created 创建之后

创建之后可以获取data中的变量，因此我们可以在这里发送http请求接口，从后端拿到数据，然后同步到页面中去。

var app = new Vue({
  el:'#app',
  data: {
    list: []
  },
  created(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () =>{
      if(xhr.readyState==4 && xhr.status==200){
        var info = JSON.parse(xhr.responseText);
        this.list = info;
      }
    }
    xhr.open('GET','http://localhost:8282/list');
    xhr.send();
    console.log('创建之后', this.name);
  }
})
  • beforeMount 挂载之前

挂载之前，模板中的插值{{name}}或者一些指令v-for、v-text等还没有被解析出来（替换），所以如果生成的是一个html代码，那么你无法获取这个dom对象。

  • mounted挂载之后

挂载之后，如果你的节点是动态添加的，那么你至少要在挂载之后才能获取的到。所以此钩子通常用于dom操作

模版语法

  • v-text：相当于{{}}另一种写法，可以防止因为网速慢，加载会有闪烁情况。
  • v-once：执行一次性绑定，接下来不再响应数据
  • v-html：可以让插值处输出html代码，注意此名称存在一定的风险，比如XSS攻击
  • v-bind：动态绑定html特性（比如: class、style、id、checked），特别注意：大胡子语法不能用于html特性上
  • v-on：动态绑定事件
  • {{}}：插值，可以进行运算，但是注意每个绑定都只能包含单个表达式，还要小心造成数据更新死循环
  • v-for: 循环
    布尔特性，它们的存在即暗示为 true，有那些默认为假？
  1. 数字 0
  2. 空字符串 ''
  3. null
  4. NaN
  5. undefined
  6. false

修饰符

修饰符 (Modifiers) 是以半角句号. 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

  • stop：阻止冒泡
  • prevent：阻止默认动作
<div id="app" >
  <p v-on:click="fn">
    <a href="http://www.163.com" v-on:click.stop.prevent="subfn">单击a>
  p>
div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    msg: '文本'
  },
  methods: {
    fn(){
      console.log( 'p',this.msg );
    },
    subfn(){
      console.log( 'a',this.msg );
    }
  }
});
script>

计算属性和侦听器

计算属性

var app = new Vue({
  el:'#app',
  data: {
    xing: '张',
    ming: '三'
  },
  computed:{
    getName(){
      return this.xing + this.ming;
    }
  }
})

计算属性和方法有什么区别？

  • 计算属性调用不需要括号（立即执行函数），方法需要括号
  • 计算属性只是引用值，无法进行参数传递，方法可以传参
  • 计算属性会缓存值，方法不会缓存值
  • 当需要在数据变化时执行异步或开销较大时应该使用计算属性
  • 当需要的数据是实时变化的，那么请使用方法

哪个生命周期最早可以获取计算属性和方法？

答：created()钩子函数

计算属性和侦听器有什么区别？

  • 计算属性需要返回值，并且会缓存
  • 侦听器不需要返回值，并且可以的得到上一个值和最新值
  • 侦听器支持深度监听，而计算属性不可以
<div id="app" >
  <input v-model.lazy="val" type="text"> <br>
  {{val}}
div>
<script>
//计算属性和方法有什么区别？
var app = new Vue({
  el:'#app',
  data: {
    min: 1,
    max: 20,
    val: 1
  },
  watch: {
    val( now, old ){
      if( isNaN(now) || now < this.min || now > this.max){
        this.val = old || 1;
      }
    }
  }
})
script>

计算属性默认情况下只要getter（取值），如果想要设置值（setter），代码如下：

<div id="app" >
  {{age}} 
  {{xueli}} 
div>

<script>
//计算属性和方法有什么区别？
var app = new Vue({
  el:'#app',
  computed:{
    age(){
      return 20;
    },
    xueli: {
      get(){
        return '本科';
      },
      set(val){
        console.log( val );
      }
    }
  }
})
script>

注意watch默认是浅侦听，如果需要深度监听则需要加上deep:true参数

<div id="app" >
  <input v-model="age" type="text" placeholder="年龄">
  {{age}} <br><br>
  <input v-model="info.xueli" type="text" placeholder="学历">
   {{info.xueli}}
div>
<script>
//计算属性和方法有什么区别？
var app = new Vue({
  el:'#app',
  data: {
    age: 20,
    info: {
      xueli: '本科'
    }
  },
  watch: {
    age( now, old ){
      console.log( '年龄',now );
    },
    info: {
      handler(now, old) {
        console.log( '信息', now );
      },
      immediate: true, //true立即执行，false发生改变后执行
      deep: true //深度监听
    }
  }
})
script>

Class 与 Style 绑定

绑定class

对象语法

<div v-bind:class="{类名:布尔特性}"> div>

例如

<div id="app" >
  <button class="btn" v-bind:class="btnClass">按钮button>
  <button v-on:click="primary=!primary">切换button>
div>

<script>
var app = new Vue({
  el:'#app',
  data:{
    primary: false,
    success: false
  },
  computed:{
    btnClass(){
      return {
        primary: this.primary,
        success: this.success
        }
    }
  }
})
script>

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]">div>

绑定style

对象语法

<div v-bind:style="{属性:值}"> div>

例如：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>

示例：vue拖拽效果

<style>
#box{
  position: fixed;
  background-color: red;
  width: 300px;
  height: 200px;
  left: 150px;
}
style>
<div id="app">
  
div>
div>
<script>
//计算属性和方法有什么区别？
var app = new Vue({
  el:'#app',
  data:{
    left: 20,
    top: 20,
    width: 100,
    height: 100
  },
  created(){
    var box = document.getElementById('box');
    this.left = box.offsetLeft || this.left;
    this.top = box.offsetTop || this.top;
    this.width = box.offsetWidth || this.width;
    this.height = box.offsetHeight || this.height;
  },
  computed:{
    boxStyle(){

      
      return {
        left: this.left+'px',
        top: this.top+'px',
        width: this.width+'px',
        height: this.height+'px'
      }
    }
  },
  methods: {
    mousedown(e){
      
      var startX = e.clientX;
      var startY = e.clientY;
      var startLeft = this.left;
      var startTop = this.top;
      var maxLeft = window.innerWidth - this.width;
      var maxTop = window.innerHeight - this.height;

      document.onmousemove = e => {
        var endX = e.clientX;
        var endY = e.clientY;

        var distX = endX - startX;
        var distY = endY - startY;

        var left = startLeft + distX;
        var top = startTop + distY;

        if(left <=0) left =0;
        if(top <=0) top =0;
        if(left >=maxLeft) left =maxLeft;
        if(top >=maxTop) top =maxTop;

        this.left = left;
        this.top = top;

      }

      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      }

    }
  }
})
script>

数组语法

注意：数组是有序的集合，后面的对象覆盖前面的对象

<div v-bind:style="[baseStyles, overridingStyles]">div>

例如

<div id="app">
  <div :style="[baseStyles, overridingStyles]">div>
div>
<script>
var app = new Vue({
  el:'#app',
  data:{
    baseStyles: {
      color: 'red',
      fontSize: '26px' 
    },
    overridingStyles: {
      color: 'green',
      'line-height': 3
    }
  }
 
})
script>

条件渲染

v-if

在 Vue 中，我们使用 v-if 指令实现同样的功能：

它惰性解析，只有条件为true，才会创建节点，重建事件监听，条件为false，则什么也不错。

<h1 v-if="true">Yesh1>
<h1 v-if="1>2">Yesh1>

v-else 否则

<h1 v-if="1 > 2"> 1大于2 h1>
<h1 v-else> 1小于2 h1>

v-else-if 多条件

<div id="app">

  <p v-if="score < 60">不及格p>
  <p v-else-if="score >= 60  && score < 80">良好p>
  <p v-else-if="score >= 80  && score < 90">优秀p>
  <p v-else>极好p>

div>
<script>
var app = new Vue({
  el:'#app',
  data: {
    score: 100
  }
})
script>

注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

template

template模板标签不会被解析出来，这样就不用被迫额外加一个标签。

<div id="app">

  <template v-if="show">
    你好
  template>

div>
<script>
var app = new Vue({
  el:'#app',
  data: {
    show: true
  }
})
script>

key的意义

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快。

但这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们，那就是定义key。

<div id="app">
  <h1>登录方式h1>

  <button v-on:click="type = 'email'">邮箱button>
  <button v-on:click="type = 'mobile'">手机button> <br><br>

  <input v-if="type=='email'" type="email" placeholder="请使用邮箱登录" key="email">
  <input v-else type="text" placeholder="请使用手机登录" key="mobile">

div>
<script>
var app = new Vue({
  el:'#app',
  data: {
    type: 'email'
  }
})
script>

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

实际上就是控制style.display的值

<h1 v-show="ok">显示h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-show 不支持