欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue学习笔记1-初识

程序员文章站 2022-03-29 08:12:00
...

背景介绍

Vue.js是目前最火的一个前端框架

React是目前最流行的一个前端框架,除了可以开发网站,还可以用来开发APP

Vue.js介绍

Vue.js是一套构建用户界面的框架,只关注视图层

特点:

  • 易上手
  • 便于与第三方库或既有项目整合(Vue有配套的第三方库,可以整合起来做大型项目的开发)

为什么要学习流行框架

  • 企业:使用这些框架,对于企业来说可以提高开发效率,提升开发效率的发展历程: 原生的JavaScript由于兼容性问题比较麻烦于是就产生了一些库 - > jQuery 之类的类库 但是渲染页面不是很方便,于是就出现了一些模板引擎 - > 前端模板引擎 主要解决了DOM的操作-> Angular.js/ Vue.js/ React.js 这些框架解决了DOM的一些不必要操作,比如重复渲染,提升了性能与效率;

  • 个人: 提升自身能力,从而提升市场竞争力。

双向数据绑定的概念

出发点:通过框架提供的指令,前端程序员只需要关心数据的业务逻辑,不在关心DOM是如何渲染的了。

框架和库的区别

框架

是一套完整的解决方案,对项目的侵入性交大,项目如果需要更换框架,则需要重新架构整个项目。

库(插件)

提供一个小的功能,对项目的侵入性比较小,如果某个库无法完成某些需求,可以很容易切换到其他库,比如:

  1. 从jQuery切换到Zepto
  2. 从EJS 切换到 art-template

MVC 和MVVM

MVC

MVC是后端的分层开发概念

M - model 处理数据CRUD

V - view 视图层

C - controller 控制层,处理业务逻辑

以Node.js为例:

app.js 是项目的入口模块,一切的请求入口,无路由分发的功能需要调用router.js模块进行路由的分发处理;

controller层:

  • router.js 是路由分发处理模块,只负责路由分发不处理业务逻辑,业务逻辑需要调用controller模块进行处理;

  • Controller 业务逻辑处理层,该模块封装了一些具体业务逻辑处理的操作,只负责处理业务,不处理数据的CRUD,对数据的CRUD需要调用Model层

Model层: 只负责操作数据库,执行sql语句,进行数据的CRUD(create read update delete)

View视图层: 用户界面

MVVM

MVVM是前端视图层的概念,主要是吧每个页面都分成了 M、 V 、VM,VM 是V和M之间的调度者。

M - - 保存的是每个页面中单独的数据(如:ajax访问接口返回的数据);

V - - 就是每个页面的HTML代码;

VM - - 分割了M 和 V ,V层获取和保存数据都要通过VM层做中间处理

MVVM提供了数据的双向绑定,数据的双向绑定是由VM提供的。

Vue的使用方法

  1. 下载Vue.js 并引入

    <script scr="vue-x.x.x.js"></script>
    
  2. 创建页面中需要Vue控制的区域,然后创建Vue实例

    <body>
    <div id="app">
      <p>
        {{msg}}
      </p>
    </div>
    
    <script>
      //这里的vm就是MVVM 中的VM调度者  上面的区域就是 V
    var vm = new Vue({
      el: '#app',//el 是element  当前Vue实例要控制页面上的区域  id
      data: { // 存放的是 el中需要要用到的数据  这里 的data 就是当前页面的数据 (M)
        msg: 'hello Vue' // 通过Vue提供的指令,就能渲染到页面上,不再手动操作DOM元素了,只需要在上面的p标签中写{{msg}}就可以了
      
    })
    </script>
    
      
    </body>
    
    

1.v-cloak

v-cloak 主要是解决插值表达式的闪烁问题(网速比较慢时上面代码{{msg}}会出现在页面上,只有网络请求完成时才会消失,也就是插值表达式占位问题)注:这条学习视频是2017年10月的,现在是2020年5月试了一下不加v-cloak也不会出现闪烁,不知道是不是最新版的vue.js解决了该问题

使用方法:

<style>
  [v-cloak] {/*在此处设置display 设置为none*/
    display: none;
  }
</style>

<body>
<div id = "app">
  <p v-cloak><!-- 此处增加v-cloak属性-->
    {{msg}}
  </p>
</div>  

<script>
	var vm = new Vue({
    el: "#app",
    data: {
      msg: "hello Arvin"
    }
  });  
</script>  
  
  
</body>

2.v-text

v-text 和 {{}} 插值表达式展示效果一样,只是v-text是作为元素的属性使用,且v-text不会出现闪烁(上述占位)的问题

<p v-text="msg">
</p>
<!-- 这里的效果跟上面的插值表达式一样,只是网速比较慢时,不会出现闪烁的问题-->

但是v-text会覆盖掉元素标签包裹的内容,比如:

<p v-text="msg">
  sdgasdgadsgasdgads <!-- 加载完后 此处的信息会被替换成msg的数据-->
</p>
<p>
  sdgasdga{{msg}}sdgasdg <!-- 则不会覆盖两边的数据-->
</p>

v-text和插值表达式 渲染时,只会按照字符串的方式原样渲染,比如说数据为"

hello h1

",渲染时并不是一级标题,页面展示还是"

hello h1

"

3.v-html

有上述的v-text和插值表达式不能渲染html标签元素,所以如果想渲染html元素的话,就需要使用v-html属性,比如:

<div v-html="msg2">
  
</div>
vue 实例的data中有如下一个字段:
msg2: "<h1>Hello h1</h1>"
此时页面渲染展示的是一级标题Hello h1

v-html和v-text一样也会覆盖掉当前元素包裹的文字信息

4.v-bind Vue提供的属性绑定机制,缩写为":"

v-bind是Vue中提供的用于绑定属性的指令,它后面跟的内容可以是一个合法的js表达式。比如给一个按钮设置title值,button的title属性是鼠标悬停在按钮上的提示语内容:

<input type="button" value="按钮" v-bind:title="mytitle"/>

<script>
var vm = new Vue({
  el: "#app",
  data: {
    mytitle: "我是自定title"
  }
}); 
</script>

通过给input标签的title属性前加上 v-bind: 后就实现了 title属性跟 mytitle变量值之间的一个绑定,会把等号后面的内容当做一个js表达式来执行的,比如 v-bind:title = “mytitle+‘Hello’”。鼠标悬停的时候会出现提示“我是自定titleHello”

上面的书写方式可以简写,简写方式:v-bind:title 可以写为 :title , 因此‘’v-bind:属性名称‘’只需要一个冒号紧跟着需要绑定的属性名称就搞定了。

5.v-on 事件绑定 vue提供的事件绑定机制,缩写为 “@”

Vue中使用v-on实现事件的绑定机制,后面跟的是你需要调用的方法的方法名称,一点击事件click为例

<input type="button" value="按钮" v-on:click="show">

<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123',
    msg2: 'sdgasd'
  },
  methods: {//Vue 对象中的methods属性中定义了Vue实例所有可以调用的方法
    show:function(){
      alert("Hello myshow")
    }
  }
});
</script>


当然还可以添加其他的常用事件如mouseover等等。v-on:可以缩写为@ 比如 v-on:click 缩写为@click

事件修饰符

  • .stop 阻止冒泡 使用方式 ,例如点击事件 @click.stop 这样就阻止了事件冒泡
  • .prevent 阻止默认事件 比如阻止a标签的跳转行为,只触发点击事件不跳转,可以设置 @click.prevent=“linkClick”
  • .capture 添加事件侦听器时使用事件捕获模式 ,作用是从外向内捕获,比如点击外层div想触发内部按钮的点击事件,只需要将div的点击事件设置为 @click.capture 这样,div点击事件触发后,也会触发其包裹的按钮的事件了。
  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ,作用是只有触发了自己的事件才会执行,不管冒泡和捕获都不执行, 比如给div加了@click.self 这时点击没有做阻止冒泡修饰的按钮时,不会发生div的事件被触发的事情,也就是说,该修饰符,实现了对当前元素阻止冒泡和阻止捕获的行为。
  • .once 事件只触发一次 使用该修饰符,只会触发一次事件处理函数,事件修饰符是可以串联的,比如上面的a标签可以设置只有一次触发事件函数时是阻止默认事件的@click.prevent.once,这样第一次点击时触发事件处理函数且不跳转,再点击时就不触发事件处理函数,且跳转到指定链接了。

6.vue 示例中的属性和方法调用

如果想在vue示例中获取data的数据或者methos中的方法,必须通过this.属性名或方法名才能访问到,这里的this就是new出来的Vue实例对象。

vm实例会见厅自己的data中所有数据的改变,如果数据发生改变就会自动把最新的数据同步到页面中去,无需考虑手动dom操作来渲染页面。

<div id="app">
    <input type="button" value="开始" @click="start">
    <input type="button" value="停止">
    <h4>{{msg}}</h4>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '跑马灯效果的文字。。。!',
        intervalId: null//在data中定义定时器的id
      },
      methods: {
        start() {
          if (this.intervalId != null) {
            return;
          }
          this.intervalId = setInterval(() => {//箭头函数可以改变this的指向,让内部的函数的this指向外部的this
            var sta = this.msg.substring(0, 1);
            var end = this.msg.substring(1);
            this.msg = end + sta;
          }, 400);
        },
        stop() {
          if (this.intervalId != null)
            clearInterval(this.intervalId);
          this.intervalId = null;
        }
      }
    });

  </script>

Vue指令之v-model 双向数据绑定

v-bind 只能实现数据的单向绑定,v-bind:value=“msg” ,从M自动绑定到V ,无法实现数据的双向绑定

只需要将表单元素中设置v-model=“msg” 不要写成:v-model:value="msg"这样就实现了数据的双向绑定,表单元素内容被修改后

所以,通过v-model可以实现表单元素和Model中数据的双向数据绑定。即View中的数据改变会自动改变Model的数据,然而Model的数据会自动更改View中的数据。

注意:v-model智能运用在表单元素中(input(radio,text,address,email…) / select / checkbox / textarea)

在Vue中使用样式

1.使用v-bind对class属性进行绑定

  1. 数组 :数组中元素是类名,必须要用双引号包裹数组,数组元素是类名,类名要用单引号
<h1 :class="['red','thin']">H1</h1>
  1. 数组中使用三元表达式:
<h1 :class="['red',falg?'active':'']"></h1>  判断flag为true的时候使用active样式,false的时候不用,是空
  1. 数组中嵌套对象代替三元表达式,增强可读性
上面的三元表达式方式还可以写成对象的方式,如下面的方式:
在数组中使用对象来代替三元表达式:
<h1 :class="['red',{'active':flag}]"></h1>判断flag为true的时候使用active样式
  1. 直接使用对象
<h1 :class="{red:true,italic:true,active:true,thin:true}"></h1>
使用v-bind绑定对象的时候,对象的属性是类名,由于对象的属性可带引号可不带引号,所以这里就没写引号。属性的值是一个标识符
或者可以写成如下的方式:
<h1 :class="classObject"></h1>
<script>
vue 实例中的data中的数据:
data:{
	classObject = {red:true,italic:true,active:true,thin:true}
}
</script>

2.使用内联样式

  1. 直接在元素上通过:style(即v-bind:style) 的形式属性样式对象,注意如果属性名称里有短横线,该属性一定要加单引号,为了防止出错,就都加单引号就好了。
<h1 :style="{'color':'red','font-size':'24px','font-weight':'200'}">
  This H1
</h1>
  1. 将样式队形,定义到data中直接使用:style进行应用即可:
  • 在data中定义样式对象

    data: {
    	styleObj: {{'color':'red','font-size':'24px','font-weight':'200'}}
    }
    
  • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:

    <h1 :style="styleObj">Hello H1</h1>
    
  1. 在 :style 中通过数组引用多个data上的样式对象:
  • 在data中定义样式:

    data: {
    	styleObj: {'color':'red','font-size':'24px','font-weight':'200'},
      styleObj2: {'font-style':'italic'}
    }
    
  • 在元素中通过属性绑定的形式引用:

    <h1 :style="[styleObj, styleObj2]"> Hello H1</h1>
    

v-for指令

1.v-for 遍历普通数组

<p v-for="item in list"> <!-- 如果需要索引的话,可以改为  "(item, i ) in list"-->
  {{item}}<!-- 索引:{{i}}-->
</p>
<script>
	data:{
    list:[1,2,3,4]
  }
</script>

2.v-for可以遍历对象数组:

<p v-for="(item , i) in list">
  姓名: {{item.name}} , 索引 : {{i}}
</p>
<script>
data:{
  list : [
    {name:'sagda',age:16},{...}
  ]
}
</script>

3.v-for 可以遍历对象:

<p v-for="(val,key) in user"><!--  在遍历对象时括号里还可以有第三个参数索引, (val, key , i)-->
  键:{{key}} ---- 值: {{val}} <!-- 索引 : {{i}}-->
</p>
<script>
	data: {
    user: {
      id: 1,
      name: 'Hesa',
      gender: 'man'
    }
  }
</script>

4.v-for 迭代数字

从上面我们看v-for中的in后面可以是普通数组,对象数组,对象,它后面还可以直接跟数字,表示循环的次数,默认循环开始值为1,不是0:

<p v-for="count in 10">
  这是第{{count}} 次循环<!-- count 从 1 开始 执行到10 -->
</p>

5.v-for 总key使用的注意事项

在2.2.0+ 的版本,当在组件中使用v-for时,key是必须的,主要是为了实现列表项的唯一性标识。

1.v-for 循环的时候,key属性只能使用number 或 string;

2.key在使用的时候必须使用v-bind: 属性绑定 即:key=""

如下:

<p v-for="item in list" :key="item.id">
	<input type="checkbox">{{item.id}} ---- {item.name}
</p>

加上key主要是为了标识列表项的唯一性,比如说多选框错位问题。

v-if 和 v-show

<input type="button" value="显示/隐藏" @click="flag=!flag">
<h3 v-if="flag">v-if H3</h3>
<h3 v-show="flag">v-show H3</h3>
<script>
data: {
  flag:true
}
</script>
  • v-if 每次都会重新删除/创建元素 , 切换性能消耗高,如果元素涉及到频繁的切换,最好不用v-if
  • v-show 不会进行dom的删除和创建操作,只是切换了元素的display:none样式, 有较高的初始渲染消耗。
相关标签: 前端 vue.js