总结Vue第一天:简单介绍、基本常用知识、辅助函数

vue

总结Vue第一天:简单介绍、基本常用知识、辅助函数

中文官网:https://cn.vuejs.org/v2/guide/syntax.html

遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的优质博文

一、简单介绍:

(1)vue.js :本质就是一个js 核心类库【跟咱使用的其他组件插件而安装他们】:

  ■ 安装方式:

  CDN引入【也是通过js标签的src】

  下载引入 【也是通过js标签的src】

  NPM安装管理

■ 方式一:直接CDN引入

 □ 你可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本,包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本,优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

■方式二:下载和引入

 开发环境 https://vuejs.org/js/vue.js  
生产环境 https://vuejs.org/js/vue.min.js

 ■ 方式三:NPM安装

后续通过webpack和CLI的使用,我们使用该方式。

❀ 学习过程一开始就是通过下载引入:

<script type="text/javascript" src="../js/vue.min.js"></script>

 

(2)小demo了解一下vue.js:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.active{

color: goldenrod;

}

.line{

font-style:italic;

}

</style>

</head>

<body>

<div id="app" >{{message}}

<!-- <button @click="{{message + ''">+文字</button>-->

<a :class="{'active':isActive,'line':isLine }">没毛病</a>

<!-- 封装成一个getClass函数 -->

<!-- <div class="tt" :class="getClass()">谢谢</div>-->

<!-- <button @click="btnActive">变变变</button>-->

<div class="tt" :class="getClass()">哈哈哈</div>

</div>

</body>

<script type="text/javascript" src="../js/vue.min.js"></script>

<script>

let app = new Vue({

el: '#app',

data: {

message:'漂亮',

isActive: true,

isLine: true,

active: 'active',

line: 'line'

},

methods: {

btnActive: function () {

this.isActive = !this.isActive;

},

//对象

// getClass: function () {

// return{active: this.isActive, line: this.line}

// }

//数组

getClass: function () {

return [this.active, this.line];

}

}

});

</script>

</body>

</html>

□  阅读script标签中的代码,会发现创建了一个Vue对象。

   创建Vue对象的时候,传入了一些options:{}

□ {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上

   {}中包含了data属性:该属性中通常会存储一些数据

   这些数据可以是我们直接自定义出来的,也可能是来自网络,从服务器加载的。

 

(3)响应式:

■ “响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码(例如这里的界面的dom元素)。

■ 效果:就是在界面上可以直观的看见-----数据改变,界面变成使用改变过的数据。

■ 原理:可以看一下官网+优质博文分析

(4)简单了解一下vue的生命周期

 

二、基本常用的知识:

■  插值操作 {{ }}   将值插入到我们模板的内容当中

■  绑定属性 v-bind  (简写:)

■  事件监听 v-on  (简写 @)

■  v-if、v-else-if、v-else  【v-show】、v-for

■  v-model 表单的双向绑定

■  条件判断

■  循环遍历

■  计算属性 computed

    原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。

■  监听属性 watch

■  过滤属性 filters

     html 页面的使用:参数 | 过滤函数名

1、绑定属性 v-bind  (简写:)☆ 通过绑定属性(数据可以从vue实例中获取)

(1)举例:我们的图片路径、标签的样式、类选择器等等不希望写死,希望实现动态绑定,从vue实例中获取数据:

(2)v-bind绑定class 

■  绑定class有两种方式:

□  对象语法

□  数组语法

  ● 绑定方式:对象语法

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

(和普通的类同时存在,并不冲突)

□ 我们可以利用v-bind:style来绑定一些CSS内联样式【跟绑定class差不多,只是要记得那种属性有连字符- 要给它加单引号‘’】

 

2,事件监听 v-on  (简写 @):常用的就是监听点击事件【也可以监听自定义事件】

□ 我们可以将事件指向表达式,也可以是一个在methods中定义的函数

● v-on:click可以写成@click

□ 事件指向method 带参数问题:

□ v-on修饰符:① .stop  ② .prevent ③ .native  ④ .once 等

 

3,v-if、v-else-if、v-else  【v-show】

(1) v-if、v-else-if、v-else

----缓存问题:Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。

-----如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。

------解决:加上唯一的key属性:

(2) v-show:

□ 当需要在显示与隐藏之间切片很频繁时,使用v-show (本质上就是使用了cloak)

□ 当只有一次切换时,通过使用v-if

(3)v-for 遍历数组、遍历对象:

语法格式:v-for=(item, index) in items

4,v-model 双向绑定的本质

(① 绑定input回显value属性=message    ② 监听输入事件,同时事件指向表达式【dom中输入的值赋值给message】)

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

<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

 ① v-model:radio

 ② v-model:checkbox (单个勾选框:v-model即为布尔值。当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组)

③v-model:select

■ v-model的修饰符:① lazy  ② number ③ trim

5,计算属性 computed

    原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。【缓存作用】

   --------- 使用计算属性,可以让我们的代码变得更加简洁(将一大串的方法调用,封装到计算属性中去【计算属性本质就是一个对象(省略了setter方法)】)

 

三、❀ 辅助函数

(1-1)响应式函数 (数组更新检测)

□  push()

□  pop()

□  shift()

□  unshift()

□  splice()

□  sort()

□  reverse()

(1-2)(对象更新检测)

□  使用Vue.set(object, propertyName, value) 或者 实例.$set(object, propertyName, value);

例如:Vue.set(this.stu,’love’,’sing’);

□  使用Object.assign( )

例如:this.stu = Object.assign({ }, this.stu, {

name: ‘玉’,

love:‘money’

})

(1-3)js 中的高阶函数 map、filter、reduce:

□  filter:

filter的参数是一个回调函数,回调函数的参数(当前数组的元素),要求回调函数必须返回一个布尔值,为true时,当前回调函数的参数(即当前的元素)添加到内部数组中,为false则过滤掉。

□  map:

map的参数是一个回调函数,回调函数的参数(当前数组的元素),回调函数的返回值作为内部数组的元素。

□  reduce :

reduce实现汇总,参数是一个回调函数(上一次return的值preValue, 当前元素)和一个初始值,回调函数的返回值作为preValue。

 

 

以上是 总结Vue第一天:简单介绍、基本常用知识、辅助函数 的全部内容, 来源链接: utcz.com/z/375446.html

回到顶部