vue基础2

### Vue.js 基础部分

## 一、 Vue.js 简介

### 1. Vue.js 是什么

**Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e

版本: v2.0

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

- 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular、react 类似,其实就是所谓的数据双向绑定

- 数据驱动+组件化的前端开发(核心思想)

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

- 更容易上手、小巧

参考:[官网](https://cn.vuejs.org/)

#### MVVM框架

1.1定义:

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心,它是连接view和model的桥梁。

它有两个方向:

一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。

二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。

实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

Vue就是基于MVVM模式实现的一套框架,

在vue中:

Model:指的是js中的数据,如对象,数组等等。

View:指的是页面视图

viewModel:指的是vue实例化对象

1.2总结:

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。

并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下:

### 2.vue 和 angular 的区别

#### 2.1 angular

- 上手较难

- 指令以 ng-xxx 开头

- 所有属性和方法都存储在\$scope 中

- 由 google 维护

#### 2.2 vue

- 简单、易学、更轻量

- 指令以 v-xxx 开头

- HTML 代码+JSON 数据,再创建一个 vue 实例

- 由个人维护:**尤雨溪**,华人,目前就职于阿里巴巴,2014.2 开源了 vue.js 库

![尤雨溪](https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=d49c7e60ee1190ef15f69a8daf72f673/4afbfbedab64034f29596c8ba6c379310b551da2.jpg)

共同点:`都不兼容低版本IE`,`对 seo 搜索引擎不友好`

对比:GitHub 上 vue(156k) 的 stars 数量大约是 angular(59.6k) 的两倍多

## 二、起步

### 1. 下载核心库 vue.js

npm init --yes

npm install vue --save

版本 v2.6.11 目前最新版本(2020.2.2)

vue2.0和1.0相比,最大的变化就是引入了Virtual DOM(虚拟DOM),页面更新效率更高,速度更快

### 2. Hello World(对比 angular)

#### 2.1 angular 实现

js:

let app=angular.module(‘myApp‘,[]);

app.controller(‘MyController‘,[‘$scope‘,function($scope){

$scope.msg=‘Hello World‘;

}]);

html:

<html ng-app="myApp">

<div ng-controller="MyController">

{{msg}}

</div>

</html>

#### 2.2 vue 实现

js:

new Vue({

el:‘#itapp‘, //指定关联的选择器,进行挂载

data:{ //存储数据

msg:‘Hello World‘,

name:‘tom‘

}

});

html:

<div id="itapp">

{{msg}}

</div>

### 3. 安装 vue-devtools 插件,便于在 chrome 中调试 vue

直接将vue-devtools解压缩,然后将文件夹中的chrome拖放到扩展程序中(更多工具--扩展程序 )

或者直接在浏览器中输入 chrome://extensions/打开

//配置是否允许vue-devtools检查代码,方便调试,生产环境中需要设置为false

Vue.config.devtools=false;

Vue.config.productionTip=false; //阻止vue启动时生成生产消息

## 三、 常用指令

### 1. 什么是指令?

用来扩展html标签的功能

angular中常用的指令:

ng-model

ng-repeat

ng-click

ng-show/ng-hide

ng-if

### 2. vue 中常用的指令

v-model

v-for

v-on

v-show / v-if / v-if v-else

v-bind

v-pre

v-cloak

v-once

- v-model

双向数据绑定,一般用于表单元素

代码演示:02.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>常用指令:v-model</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

new Vue({

// el:‘.itany‘,

el:‘div‘, //vue2.0中不允许将vue实例挂载到<html>或<body>元素,在vue1.0中是可以的

data:{

name:‘‘, //即使没有值,也不能省略,报错

age:21,

flag:true,

nums:[12,4,23,5],

user:{id:9527,name:‘唐伯虎‘}

}

});

}

</script>

</head>

<body>

<!-- <div id="itany"> -->

<!-- <div class="itany"> -->

<div>

用户名:<input type="text" v-model="name">

<br>

{{name}} <br>

{{age}} <br>

{{flag}} <br>

{{nums}} <br>

{{user}}

</div>

</body>

</html>

```

- v-for

对数组或对象进行循环操作,使用的是 v-for,不是 v-repeat

注:在 vue1.0 中提供了隐式变量,如$index、$key

在 vue2.0 中去除了隐式变量,已被废除

代码演示 代码演示:03.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>常用指令:v-for</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

new Vue({

el:‘#itany‘,

data:{

arr:[12,4,5,34,2,11],

user:{id:9527,name:‘唐伯虎‘,age:25},

arr2:[12,4,5,34,2,11,12],

users:[

{id:9527,name:‘唐伯虎‘,age:25},

{id:1001,name:‘秋香‘,age:22},

{id:1002,name:‘石榴姐‘,age:24}

]

}

});

}

</script>

</head>

<body>

<div id="itany">

<!-- {{arr}} -->

<ul>

<!-- 普通循环 -->

<!-- <li v-for="value in arr">{{value}}</li> -->

<!-- <li v-for="value in user">{{value}}</li> -->

<!-- 键值循环 -->

<!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->

<!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> -->

<!-- 可以直接循环包含重复数据的集合,可以通过指定:key属性绑定唯一key,当更新元素时可重用元素,提高效率,类似于vue1.0中track-by -->

<!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->

<li v-for="(user,index) in users">

{{index+1}},{{user.id}},{{user.name}},{{user.age}}

</li>

</ul>

</div>

</body>

</html>

```

- v-on

用来绑定事件,用法:v-on:事件="函数"

代码演示:04.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>常用指令:v-on</title>

<!-- 事件简写和事件对象$event -->

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

data:{  //存储数据

arr:[12,34,45,23,5]

},

methods:{ //存储方法

show:function(){

console.log(‘show方法‘);

},

add(){

// console.log(this); //this表示当前vue实例

// console.log(this===vm); //true

this.arr.push(666); //使用this访问当前实例中的成员

// this.show();

},

print(e){

// console.log(e);

console.log(e.target.innerHTML); //DOM对象

console.log(this);

}

}

});

}

</script>

</head>

<body>

<div id="itany">

<!-- <button onclick="show()">点我</button> -->

<button v-on:click="show">点我</button>

<button v-on:click="add()">向数组中添加一个元素</button>

<br>

{{arr}}

<hr>

<button @click="print($event)">Click Me</button>

<button v-on:mouseover="show">鼠标经过</button>

<button v-on:dblclick="show">鼠标双击</button>

</div>

</body>

</html>

```

- v-show/v-if

用来显示或隐藏元素,v-show 是通过 display 实现,v-if 是每次删除后再重新创建,与 angular 中类似

代码演示:05.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>常用指令:v-show</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

data:{

flag:true

},

methods:{

change(){

this.flag=!this.flag;

}

}

});

}

</script>

</head>

<body>

<div id="itany">

<!-- <button v-on:click="change">隐藏</button> -->

<button v-on:click="flag=!flag">隐藏</button>

<hr>

<div style="width: 100px;height: 100px; red" v-if="flag">欢迎来到武汉软谋</div>

</div>

</body>

</html>

```

## 四、 练习:用户管理

使用BootStrap+Vue.js

js部分

window.onload=function(){

let vm=new Vue({

el:‘.container‘,

data:{

users:[

{name:‘tom‘,age:24,email:‘[email protected]‘},

{name:‘jack‘,age:23,email:‘[email protected]‘}

],

user:{},

nowIndex:-1 //当前要删除项的索引

},

methods:{

addUser(){

this.users.push(this.user);

this.user={};

},

deleteUser(){

if(this.nowIndex===-1){ //删除所有

this.users=[];

}else{

this.users.splice(this.nowIndex,1); //从指定索引位置开始删除,删除一个

}

}

}

});

}

## 五、 事件和属性

### 1. 事件

#### 1.1 事件简写

v-on:click=""

简写方式 @click=""

#### 1.2 事件对象\$event

包含事件相关信息,如事件源、事件类型、偏移量

target、type、offsetx

代码演示:07.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件简写和事件对象$event</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

methods:{

show(){

console.log(111);

},

print(e){

// console.log(e);

console.log(e.target.innerHTML); //DOM对象

console.log(this);

}

}

});

}

</script>

</head>

<body>

<div id="itany">

<button v-on:click="show">点我</button>

<button @click="show">点我</button>

<hr>

<button @click="print($event)">Click Me</button>

</div>

</body>

</html>

```

#### 1.3 事件冒泡

阻止事件冒泡:

a)原生js方式,依赖于事件对象  stopPropagation

b)vue方式,不依赖于事件对象

@click.stop

#### 1.4 事件默认行为

阻止默认行为:

a)原生js方式,依赖于事件对象 preventDefault

b)vue方式,不依赖于事件对象

@click.prevent

代码演示:08.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件冒泡和默认行为</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

methods:{

show(){

console.log(111);

// e.stopPropagation();

},

print(){

console.log(222);

},

write(){

console.log(333);

},

study(){

console.log(444);

// e.preventDefault();

}

}

});

}

</script>

</head>

<body>

<div id="itany">

<div @click="write">

<p @click="print">

<!-- <button @click="show($event)">点我</button> -->

<button @click.stop="show">点我</button>

</p>

</div>

<hr>

<!-- <a href="#" @click="study($event)">俺是链接</a> -->

<a href="#" @click.prevent="study">俺是链接</a>

</div>

</body>

</html>

```

#### 1.5 键盘事件

回车:@keydown.13 或@keydown.enter

上:@keydown.38 或@keydown.up

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

代码演示:09.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>键盘事件</title>

<script src="js/vue.js"></script>

<script>

/**

* 自定义键位别名

*/

Vue.config.keyCodes={

a:65,

f1:112

}

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

methods:{

show(e){

console.log(e.keyCode);

if(e.keyCode==13){

console.log(‘您按了回车‘);

}

},

print(){

// console.log(‘您按了回车‘);

// console.log(‘您按了方向键上‘);

console.log(‘11111‘);

}

}

});

}

</script>

</head>

<body>

<div id="itany">

<!-- 键盘事件:@keydown、@keypress、@keyup -->

<!-- 用户名:<input type="text" @keydown="show($event)"> -->

<!-- 简化按键的判断 -->

<!-- 用户名:<input type="text" @keydown="show($event)"> -->

<!-- 用户名:<input type="text" @keydown.13="print"> -->

<!-- 用户名:<input type="text" @keydown.enter="print"> -->

<!-- 用户名:<input type="text" @keydown.up="print"> -->

用户名:<input type="text" @keydown.f1="print">

<!-- 事件修饰符 -->

<button @click.once="print">只触发一次</button>

</div>

</body>

</html>

```

#### 1.6 事件修饰符

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

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

.once - 只触发一次回调。

### 2. 属性

#### 2.1 属性绑定和属性的简写

v-bind 用于属性绑定, v-bind:属性=""

属性的简写:

v-bind:src="" 简写为 :src=""

代码演示:10.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>属性绑定和属性的简写</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

data:{

url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘,

w:‘200px‘,

h:‘100px‘

}

});

}

</script>

</head>

<body>

<div id="itany">

<!-- <img src="{{url}}"> -->

<!-- 可以直接访问vue中的数据,不需要使用{{}} -->

<!-- <img v-bind:src="url"> -->

<img :src="url" :width="w" :height="h">

</div>

</body>

</html>

```

#### 2.2 class 和 style 属性

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

代码演示:11.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>class和style属性</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

data:{

bb:‘aa‘,

dd:‘cc‘,

flag:true,

num:-2,

hello:{aa:true,cc:true},

xx:{color:‘blue‘,fontSize:‘30px‘},

yy:{backgroundColor:‘#ff7300‘}

}

});

}

</script>

<style>

.aa{

color:red;

font-size:20px;

}

.cc{

background-color:#ccc;

}

</style>

</head>

<body>

<div id="itany">

<!--

class属性

-->

<!-- <p class="aa">武汉软谋</p> -->  <!-- 可以访问,普通css方式 -->

<!-- <p :class="aa">武汉软谋</p> --> <!-- 不可以,Vue的属性绑定时不能直接css样式 -->

<!-- 方式1:变量形式 -->

<!-- <p :class="bb">武汉软谋</p> -->

<!-- 方式2:数组形式,同时引用多个 -->

<!-- <p :class="[bb,dd]">武汉软谋</p> -->

<!-- 方式3:json形式,常用!!! -->

<!-- <p :class="{aa:true,cc:flag}">武汉软谋</p> -->

<!-- <p :class="{aa:num>0}">武汉软谋</p> -->

<!-- 方式4:变量引用json形式 -->

<!-- <p :class="hello">武汉软谋</p> -->

<!--

style属性

-->

<p :style="[xx,yy]">itany</p>

</div>

</body>

</html>

```

## 六、 模板

### 1. 简介

Vue.js使用基于HTML的模板语法,可以将DOM绑定到Vue实例中的数据

模板就是{{}},用来进行数据绑定,显示在页面中

也称为Mustache语法

### 2. 数据绑定的方式

a.双向绑定

v-model

b.单向绑定

方式1:使用两对大括号{{}},可能会出现闪烁的问题,可以使用v-cloak解决

方式2:使用v-text、v-html

### 3. 其他指令

v-once 数据只绑定一次

v-pre 不编译,直接原样显示

代码演示:12.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>模板</title>

<script src="js/vue.js"></script>

<script>

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

data:{

msg:‘welcome to itany‘

},

created:function(){

// alert(111);

}

});

}

</script>

<style>

/* 必须配置css样式,否则不生效 */

[v-cloak]{

display:none;

}

</style>

</head>

<body>

<div id="itany">

<input type="text" v-model="msg">

<h3>aaa<span v-cloak>{{msg}}</span></h3>

<h3 v-text="msg"></h3>

<h3 v-html="msg"></h3>

<h3 v-once>{{msg}}</h3>

<h3 v-pre>{{msg}}</h3>

</div>

</body>

</html>

```

## 七、 过滤器

### 1. 简介

用来过滤模型数据,在显示之前进行数据处理和筛选

语法:{{ data | filter1(参数) | filter2(参数)}}

### 2. 关于内置过滤器

vue1.0中内置许多过滤器,如:

currency、uppercase、lowercase

limitBy

orderBy

filterBy

vue2.0中已经删除了所有内置过滤器,全部被废除

如何解决:

a.使用第三方工具库,如lodash、date-fns日期格式化、accounting.js货币格式化等

b.使用自定义过滤器

### 3. 自定义过滤器

分类:全局过滤器、局部过滤器

#### 3.l 自定义全局过滤器

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

#### 3.l 自定义局部过滤器

代码演示:13.html

```javascript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>自定义过滤器</title>

<script src="js/vue.js"></script>

<script>

/**

* 自定义全局过滤器

*/

Vue.filter(‘addZero‘,function(data){

// console.log(data);

return data<10?‘0‘+data:data;

});

/*Vue.filter(‘number‘,(data,n) => {

// console.log(data,n);

return data.toFixed(n);

});*/

Vue.filter(‘date‘,data => {

let d=new Date(data);

return d.getFullYear()+‘-‘+(d.getMonth()+1)+‘-‘+d.getDate()+‘ ‘+d.getHours()+‘:‘+d.getMinutes()+‘:‘+d.getSeconds();

});

window.onload=function(){

let vm=new Vue({

el:‘#itany‘,

data:{

currentTime:Date.now()

},

filters:{ //局部过滤器

number:(data,n) => {

return data.toFixed(n);

}

}

});

}

</script>

</head>

<body>

<div id="itany">

<!-- <h3>{{3 | addZero}}</h3> -->

<!-- 课后作业:自己实现toFiexed()四舍五入的功能 -->

<h3>{{12.345678 | number(2)}}</h3>

<!-- <h3>{{12.045 | number(2)}}</h3> -->

<h3>{{currentTime | date}}</h3>

</div>

</body>

</html>

```

原文地址:https://www.cnblogs.com/laneyfu/p/12274257.html

时间: 2024-10-14 15:52:26

vue基础2的相关文章

vue基础知识之vue-resource/axios

Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了

vue基础语法

vue基础语法 vue官网链接:https://cn.vuejs.org/  一.Vue简介 Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. Vue.js是一款轻量级的.以数据驱动构建web界面的前端JS框架,它在架构设计上采用了MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一个Vue的实例,而这个实例又作用域页面上的某个HTML元素. 其核心在于通过数据驱动界面的更新

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

千锋教育Vue组件--vue基础的方法

课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue基础的方法</title&

Vue 基础篇

Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + ... 代码上的不同: 一般使用库:调用某个函数,自己可以把控库的代码 一般使用框架:其框架在帮我们运行已编写好的代码 框架:初始化自身的一些行为 执行你所编写的代码 施放一些资源 库:小而精 框架:大而全 ( 框架包含了各种库 ) 二.起步 引包 直接用 <scri

Vue基础学习一

Vue基础一 1.0 前端开发规范 ? 前端开发规范 1.1 vue版本更迭 vue版本 ???-?vue?1.0???2014年 ???-?vue?2.0???2016年 ???-?vue?3.0[?试用版?]?2019年国庆 1.2匿名函数 javascript (function?(形参1,形参2)?{ /?你的代码?/ ?})(实参1,实参2) ???-?好处 ?????-?1.?防止全局作用域 ?????-?2.?防止命名冲突 ?????-?3.?防止一些脚本的攻击 ?????-?4.

前端框架Vue自学之Vue基础语法(二)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue基础语法) 内容:通过官网说明,掌握Vue基础语法. 正文: Vue基础语法 一. 原文地址:https://www.cnblogs.com/xinkuiwu/p/12031107.html

Vue基础篇--5列表渲染v-for

Vue基础篇--5列表渲染v-for 1.用v-for把一个数组对弈为一组元素 我们用v-for指令根据一组数组选项列表进行渲染. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="./vue.js"

Vue基础篇--6事件处理

Vue基础篇--6事件处理 1.监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例 <div id="exp"> <button v-on:click="count +=1">add 1</button> <p>The button above has been clicked {{count}} times.</p> </div> new

Vue基础篇--8组件基础 component

Vue基础篇--8组件基础 component 1.简单示例 <div id='components1'> <button-conter></button-conter> </div> <script> // 定义一个名为button-conter组件 Vue.component("button-conter",{ data:function () { return { count:0 } }, template:`<b