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是如何渲染的了。

框架和库的区别

框架

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

库（插件）

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

从jQuery切换到Zepto
从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的使用方法

下载Vue.js 并引入
```
<script scr="vue-x.x.x.js"></script>
```

创建页面中需要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属性进行绑定

数组：数组中元素是类名，必须要用双引号包裹数组，数组元素是类名，类名要用单引号

<h1 :class="['red','thin']">H1</h1>

数组中使用三元表达式：

<h1 :class="['red',falg?'active':'']"></h1>  判断flag为true的时候使用active样式，false的时候不用,是空

数组中嵌套对象代替三元表达式，增强可读性

上面的三元表达式方式还可以写成对象的方式，如下面的方式：
在数组中使用对象来代替三元表达式：
<h1 :class="['red',{'active':flag}]"></h1>判断flag为true的时候使用active样式

直接使用对象

<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.使用内联样式

直接在元素上通过:style(即v-bind:style) 的形式属性样式对象，注意如果属性名称里有短横线，该属性一定要加单引号，为了防止出错，就都加单引号就好了。

<h1 :style="{'color':'red','font-size':'24px','font-weight':'200'}">
  This H1
</h1>

将样式队形，定义到data中直接使用:style进行应用即可：

在data中定义样式对象

data: {
	styleObj: {{'color':'red','font-size':'24px','font-weight':'200'}}
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="styleObj">Hello H1</h1>
```

在 :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学习笔记1-初识

背景介绍

Vue.js介绍

特点：

为什么要学习流行框架

双向数据绑定的概念

框架和库的区别

框架

库（插件）

MVC 和MVVM

MVC

MVVM

Vue的使用方法

1.v-cloak

2.v-text

hello h1

hello h1

3.v-html

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

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

事件修饰符

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

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

在Vue中使用样式

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

2.使用内联样式

v-for指令

1.v-for 遍历普通数组

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

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

4.v-for 迭代数字

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

v-if 和 v-show

html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

vue.js学习笔记之绑定style样式和class列表

vue ssr 实现方式(学习笔记)

Vue2学习笔记之请求数据交互vue-resource

Vue2.5学习笔记之如何在项目中使用和配置Vue

JavaScript的MVVM库Vue.js入门学习笔记

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

Vue.js学习笔记之 helloworld

vue.js源代码core scedule.js学习笔记

详解Vue2.x-directive的学习笔记