vue学习笔记1——vue相关概念、相关操作

最新推荐文章于 2022-09-19 17:20:13 发布

苏云南雁

最新推荐文章于 2022-09-19 17:20:13 发布

阅读量756

点赞数

分类专栏： vue 前端框架 js 文章标签： vue 前端框架

本文链接：https://blog.csdn.net/qq_22059611/article/details/84563247

版权

js 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

前端框架

2 篇文章 0 订阅

订阅专栏

（2）创建vue实例，我们new出来的vue就是vm

代码请参考我的github：

https://github.com/masterzz/vue-learn

一、相关概念

Vue是最火的一个框架，React是最流行的一个框架（React可以开发网站和手机app；Vue也是可以进行PC和APP端开发）

Vue、Angular、React并称为前端三大框架，Vue只关注视图层，并且便于和第三方库进行整合。

1，为什么要用框架？

就是为了提升开发效率，时间就是金钱。

提升开发效率的发展历程：原生JS（兼容性问题）——>JQuery（解决兼容性问题，生成dom元素的拼接问题）——>前端模板引擎（解决dom生成问题）——>vue、react、angular（解决dom过多渲染问题，提高渲染效率；双向dom绑定；解决程序员不用关心dom元素，专心于业务逻辑）

在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

2，框架和库的区别

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

库（插件）：提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

3，后端的MVC与前端的MVVM

MVC是后端的分层开发概念

MVVM是前端视图层的概念，视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel

二、相关操作

1，如何使用vue

（1）导入vue包

（2）创建vue实例，我们new出来的vue就是vm

对其中几个地方进行说明：

el表示我们new出来的vue对象控制的是页面上的哪个区域；
data中存放的是el要用到的数据；
通过vue提供的指令就能很方便的将数据渲染到页面上，前端vue框架不提倡我们手动去操作dom

var vm = new Vue({

el: '#vue_det',

data: {

site: "菜鸟教程",

url: "www.runoob.com",

alexa: "10000",

message:'zhubr is a genius',

class1: false

methods: {

details: function() {

return this.site + " - 学的不仅是技术，更是梦想！";

}

});

（3）在页面中使用vue

<h1>message : {{message}}</h1>

<h1>{{details()}}</h1>

</div>

可以看出，页面中是不用调用dom，可以直接指定相关dom进行操作。以上内容，分别对应mvvm三个部分：<div id="vue_det">对应v部分，new Vue()则对应vm部分，在vue中的data则对应m。

2，解决时延显示问题

<h1>message : {{message}}</h1>

<h1>{{details()}}</h1>

</div>

如果引入js在代码之后，可能在渲染之前显示出site : {{site}}之类的内容，可以做如下修改，加入一个样式：

<style>

[v-cloak] {

display:none;

}

</style>

在修改div：

另外，默认v-text也没有闪烁问题

3，v-text、v-html

data中数据存在如下数据：

message:'zhubr is a genius',

v-text使用：

如果data中的数据是html标签：

msg2:'<h1>我是一个h1</h1>'

输出时想要输出成html标签，则需要用到如下语法：

4，v-bind

v-bind提供了绑定属性的功能:

data中存在：

mytitle:'这是我定义的一个按钮'

按钮：

这样就可以把button的title属性变更为mytitle中的内容了。

v-bind会将""内的内容当作表达式来执行。

注意：

也可以这么写：

则title属性为：这是我定义的一个按钮123

v-bind里可以定义合法的表达式

v-bind的缩写是 :

5，v-on 绑定事件

以button为例：

v-on:click="show"表示，在单击按钮时，调用show方法：

在new Vue({})中添加method：

methods: {

show:function() {

alert('click');

}

这样就能实现单击按钮后显示 click。

当然v-on也可以绑定其他时间，比如 v-on:mouseover 之类

v-on的简写是 @

所以这段话：

可以改成：

6，事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

示例代码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.inner {

height: 150px;

background-color: darkcyan;

}

.outer {

padding: 40px;

background-color: red;

}

</style>

</head>

<body>

<!-- <div class="inner" @click="div1Handler">

</div> -->

<!-- <div class="inner" @click.capture="div1Handler">

</div> -->

<!-- <div class="inner" @click="div1Handler">

</div> -->

<!-- <div class="outer" @click="div2Handler">

</div>

</div> -->

<!-- <div class="outer" @click="div2Handler">

</div>

</div> -->

</div>

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {},

methods: {

div1Handler() {

console.log('这是触发了 inner div 的点击事件')

btnHandler() {

console.log('这是触发了 btn 按钮的点击事件')

linkClick() {

console.log('触发了连接的点击事件')

div2Handler() {

console.log('这是触发了 outer div 的点击事件')

}

});

</script>

</body>

</html>

7，v-model

v-model是唯一一个实现数据双向绑定的标签

而v-model则可以实现数据的双向绑定，不仅可以从M到V，而且可以从V到M

像input、select、checkbox、textarea都可以使用v-model

8，使用class样式

（1）数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

（2）数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

（3）数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

（4）直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

9，使用内联样式

1. 直接在元素上通过 `:style` 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中

在data上定义样式：

data: {

h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }

}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象

在data上定义样式：

data: {

h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },

h1StyleObj2: { fontStyle: 'italic' }

}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

10，v-for

（1）遍历数组

data中有一个数组：list:['a','b','c','d','e']

遍历：

要想加上索引：

（2）遍历数组对象

list:[

{id:1, name: 'zs1'},

{id:2, name: 'zs2'},

{id:3, name: 'zs3'},

{id:4, name: 'zs4'}

]

遍历的语法：

要加索引时：

（3）遍历对象

要获取list键值对：

list:{

name:'Micheal',

gender:'male',

hobby:'sleep'

}

遍历：

加入索引：

另外，count可以记录是第几次循环

11，v-for中key的使用

通过这个key可以指定相关添加对象的id

<div>

<label>Id:

</label>

<label>Name:

</label>

</div>

<input type="checkbox">{{item.id}} --- {{item.name}}

</p>

</div>

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

id: '',

name: '',

list: [

{ id: 1, name: '李斯' },

{ id: 2, name: '嬴政' },

{ id: 3, name: '赵高' },

{ id: 4, name: '韩非' },

{ id: 5, name: '荀子' }

]

methods: {

add() { // 添加方法

this.list.unshift({ id: this.id, name: this.name })

}

});

</script>

12,v-if

v-if实现隐藏或者显示：

data中数据：

flag:true,

13,v-show

一个div是否显示，可以用v-show来控制：

data中定义：

flag:false,

div中定义：

<h3 v-show="flag">v-show测试</h3>

那么这个div就不会显示了。

v-if和v-show的区别在于，v-if里的代码完全不会显现，而v-show相当于display:none；

v-if有较高的切换消耗，v-show有较高的渲染消耗。

如果涉及频繁的切换，不要用v-if；但是被显示的可能性较小，则用v-if

苏云南雁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
vue学习笔记1——vue相关概念、相关操作

目录一、相关概念1，为什么要用框架？2，框架和库的区别3，后端的MVC与前端的MVVM二、相关操作1，如何使用vue（1）导入vue包（2）创建vue实例，我们new出来的vue就是vm（3）在页面中使用vue2，解决时延显示问题3，v-text、v-html4，v-bind5，v-on 绑定事件6，事件修饰符7，v-model...
复制链接

扫一扫