vue

最新推荐文章于 2024-06-01 16:49:07 发布

全栈开发ck

最新推荐文章于 2024-06-01 16:49:07 发布

阅读量260

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44954172/article/details/101295707

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

vue

什么vue？

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

MVVM是什么？

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

安装vue

下载地址

起步

<!DOCTYPE html>
<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，有那些默认为假？

数字 0
空字符串 ''
null
NaN
undefined
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
  id="box"
  :style="boxStyle"
  v-on:mousedown = "mousedown"
  ></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">Yes</h1>
<h1 v-if="1>2">Yes</h1>

`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 不支持 <template> 元素，也不支持 v-else

`v-if` 和 `v-show` 的区别

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

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

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

全栈开发ck

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue

vue什么vue？它是一套用于构建用户界面的渐进式框架，采用MVVM思想，Vue 的核心库只关注视图层，Vue也完全能够为复杂的单页应用提供驱动。安装vue下载地址起步<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...
复制链接

扫一扫