资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往

首页/文章专栏/Vue学习笔记（一）

Vue学习笔记（一）

baoxl 发布于2019-08-30 13:47 / 538人阅读

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。

一、Vue.js介绍

Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。

Vue有以下特点：

是一个构建用户界面的框架

是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似

数据驱动+组件化的前端开发（核心思想）

通过简单的API实现响应式的数据绑定和组合的视图组件

更容易上手、小巧

参考：官网文档

二、第一个vue程序

 
    {{msg}}  //字符串模板


   //引入vue文件

以上就是一个非常简单的vue程序。绑定元素这里不但可以使用id选择器，我们还可以使用类选择器或者标签选择器。但是，vue2.0中不允许将vue实例挂在到html或者body元素上。

三、常用指令

指令用来扩展HTML功能。vue内置了很多指令。

1、v-model

实现双向数据绑定，实时监控数据变化，一般用于表单。

 
    
    
    
 {{content}}

在这里，使用v-model指令将输入框的值与vue实例中的content进行绑定。此后，二者中的任一值发生变化，另一个值都会跟随变化。

2、v-for

用于遍历数组、对象等。


    
          //遍历数组
            {{item}}
        
    
    
    
           //遍历对象
            {{item}}
        
    
    
          
           //键值循环，数组也适用，注意key在后面
            {{key}}----{{value}}

3、v-on

用于绑定事件，用法：v-on:事件="函数"。

示例：点击事件


        
        

        {{msg}}

this指向当前vue实例，由此可获取实例的其他属性。除了点击事件外还有很多其他事件，具体参考官网API。

4、v-show

用来显示或隐藏元素，v-show是通过display实现。当v-show的值为true时显示，为false时隐藏。

四、事件

之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。

1、事件简写

之前的事件都是这样的写法：v-on:click="showHello()"，vue提供了一种简写方式：
@click="showHello()"

2、事件对象$event

我们可以通过事件对象取得事件相关信息，如事件源、事件类型、偏移量。

下面这个例子通过事件对象取得按钮的值：

 
    
        
 {{msg}}

3、事件冒泡与事件默认行为

这里需要讨论阻止事件冒泡与阻止默认行为，原生js阻止事件冒泡首先得取得事件对象，然后调用事件对象的stopPropagation方法。在vue里，则不需要依赖于事件对象，只需要调用相应的事件修饰符stop即可：

@click.stop = "print()"

阻止事件默认行为和阻止事件冒泡基本一致，在vue里也有十分便利的操作方法：

@click.prevent = "print()"

4、键盘事件

vue里内置了一些键盘事件，便于开发者操作。语法如下：

@keydown.13 = "print()"
@keydown.enter = "print()"

除了回车事件外，还有很多其他键盘事件，例如下：@keydown.38="print()"。还有一些其他键盘事件，具体参考官方文档。

默认没有@keydown.a/b/c...事件，可以全局自定义键盘事件，也称为自定义键码或自定义键位别名：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}

除了stop、prevent、keyCode这些事件修饰符以外，还有一些比较常用：

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

五、属性

vue提供了绑定属性的方法：v-bind:属性名=""，这样我们即可动态的改变属性值。

1、属性简写

属性和事件一样，也有简写方式：:属性名=""

2、class属性和style属性

绑定class和style属性时的语法比较复杂。

（1）变量形式

html部分：

Hello vue.js

对应的vue的data部分：

data:{
    myClass:className
}

（2）数组形式，同时引入多个类

html部分：

Hello vue.js

对应的vue的data部分：

data:{
    myClass1:className1,
    myClass2:className2,
}

（3）json形式（常用）

html部分：

Hello vue.js

（4）变量引用json形式

html部分：

Hello vue.js

对应的vue的data部分：

data:{
    myClass:{
        className:true
    }
}

style的用法和class的用法基本一致，但是不常用。

六、模板

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据。模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法。

1、数据绑定的方式 （1）双向数据绑定

使用v-model指令，前面已经学习过。

（2）单向数据绑定 a.使用两对大括号{{}}

这个在之前也经常使用，但是有一个缺点，就是vue实例需要长时间编译时会在页面中出现{{}}（闪烁现象）。vue提供了一个解决办法：使用v-cloak配合css。

//html内容

  {{msg}}


//css内容
[v-cloak] {
 display: none;
}

b.使用指令v-text、v-html

v-text也可达到与使用v-cloak相同的效果。

//html内容

v-html会将文本中的html解析为html标签，然后渲染到页面中。

//html内容



//vue实例中data部分内容
 data: {
    msg: "hellovue.js"
 },

这里的vue.js会有一个黄色的背景颜色。

七、过滤器

过滤器用来过滤模型数据，在显示之前进行数据处理和筛选。语法：{{ data | filter1(参数) | filter2(参数)}}。

vue1.0中内置了很多过滤器，但是在2.0中全部删除了。使用过滤器我们可以通过使用第三方库：lodash、date-fns日期格式化、accounting.js货币格式化。或者我们可以自定义过滤器。

1、自定义过滤器

过滤器分为全局过滤器和局部过滤器。

（1）全局过滤器

使用全局方法Vue.filter(过滤器ID,过滤器函数)。

示例：

{{8|addZero}}//数据会自动作为传过去

 Vue.filter("addZero", data => {
    return data > 10 ? data : "0" + data;
 });

有时过滤器也要传递自己的参数：

{{12.3456|number(3)}}

 Vue.filter("number", (data,n) => {
    return data.toFixed(n);
 });

（2）局部过滤器

局部过滤器的使用方法与全局过滤器的使用方法一致。

不过过滤器写在vue实例中filters选项中。

new Vue({
    el:"#app",
    data:{},
    filters:{
        number:data => {
            //具体操作
        }
    }
})

未完待续。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115546.html

Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注：本...

DobbyKim 2019-08-21 15:52 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

rollback 2019-08-01 17:49 评论0 收藏0
vue.js学习笔记 - 组件（二）

摘要：当组件给其他人使用时这很有用，因为这些验证要求构成了组件的，确保其他人正确地使用组件。有特性的称为命名。例如，假定我们有一个组件，它的模板为父组件模板渲染结果为一、注册 // 定义 var MyComponent = Vue.extend({ template: A custom component! }); // 注册 Vue.component(my-component, ...

Betta 2019-08-19 17:57 评论0 收藏0
vue.js 学习笔记（一）

摘要：一缩写完整语法缩写完整语法缩写二缩写完整语法缩写三过滤器四条件渲染五列表渲染数组变动检测包装了被观察数组的变异方法，故它们能触发视图更新。一、v-bind 缩写 Button Button 二、v-on 缩写三、过滤器 {{ message | capitalize }} 四、条件渲染 v-if Yes No Sorry Not...

gaosboy 2019-08-19 17:57 评论0 收藏0