Vue2重要知识点总结（一）

Vue.js基础语法

1.Vue.js的特点

可复用的组件
前端路由技术(vue-router)
状态管理(vuex)
虚拟DOM
解耦视图和数据

2.Vue.js的安装

方式一:cdn引入
方式二:npm包下载
方式三:下载引入

3.Vue中的MVVM

MVVM:即M-Model(数据层),v-VIEW(视图层),VM-ViewModel(视图模型层)View层-->通常就是DOM层,给用户展示各种信息Model层-->数据层,存放的数据，可能是固定的，也可能是从网络上请求来的ViewModel层-->视图模型层，是View和Model沟通的桥梁,一方面它实现了数据绑定，将MOdel的改变实时的反映到View中,另一方面实现了DOM监听，当DOM发生一些事件，可以监听到，并在需要的时候改变对应的data(创建的Vue实例，实际上就是ViewModel)
MVVM的实现原理:响应式，模板解析，渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ED6dBRzZ-1637047433979)(D:\前端\帮助\img\20190218151600647.jpeg)]

4.Vue的生命周期

    通俗点来说，vue的生命周期就是从Vue实例从创建到销毁的过程。Vue实例和每一个组件都有一个完整的生命周期，分为三个阶段：初始化，运行中，销毁。实例，组件通过new Vue()创建出来后会初始化事件和数据，-->然后执行beforeCreat()钩子函数，这个时候还没有挂载,只是一个空壳，无法访问到数据，一般不作操作挂载数据，绑定事件等等-->然后执行created()函数，这个时候已经可以使用到数据，也可以更改数据不会触发其它钩子函数,一般在这里初始化数据的获取-->接下来开始找组件对应的模板(el),编译模板为虚拟DOM放入到render函数中准备渲染，-->然后执行beforemount()钩子函数,在这个函数中虚拟DOM已经创建完成,马上就要渲染，在这里可以进行渲染前的最后一次的数据更改,不会触发其它钩子函数，-->接下来开始render,渲染出真正的DOM,-->然后执行mounted()函数，此时，组件已经出现在页面中，数据，真实DOM都已经处理好，事件也挂载完毕，在页面中可以操作dom,-->在组件或实例的数据更改之后，执行beforeUpdate()钩子函数,Vue的虚拟DOM机制会重新构建虚拟DOM与上一次的虚拟DOM树利用diff算法进行对比之后重新渲染，-->然后执行updated()函数,数据已经更新完成，DOM也重新渲染render完毕，可以操作更新后的虚拟DOM，-->当通过某种途径调用$destory之后，立即执行beforeDestory()钩子函数，做一些清除指令，事件等，去掉后只剩下DOM空壳，-->这个时候执行destoryed(),在这里做善后处理。

5.插值操作

1.mustache语法(大括号法):{{data或者computed或者methods}}
2.v-once:该指定后不需要跟任何值，它会使该元素的组件只渲染一次，不会随着数据的改变而改变
3.v-html:该指令会将html格式的代码进行解析，并显示对应内容   <h2 v-html="url"></h2>data: {message: '你好啊',url: '<a href="http://www.baidu.com">百度一下</a>'}
4.v-text:该指令和mustache语法类似，但是它只接受一个字符串
5.v-pre:它会使对应的Mustache语法中的内容是显示原本的mustache语法

6.绑定属性

Vue中用v-bind绑定属性，语法糖：':'加上要绑定的属性名<!-- 错误的做法: 这里不可以使用mustache语法--><!--<img src="{{imgURL}}" alt="">--><!-- 正确的做法: 使用v-bind指令 --><img v-bind:src="imgURL" alt=""><a v-bind:href="aHref">百度一下</a><!--语法糖的写法--><img :src="imgURL" alt=""><a :href="aHref">百度一下</a>data: {imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',aHref: 'http://www.baidu.com'}用v-bind动态绑定class和style，有两种方式,对象语法和数组写法，对象写法最常见
用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

7.计算属性

computed:{}//里边定义的是计算属性
当我们需要对数据进行一些处理后在显示，或者需要将多个数据结合起来显示，这个时候我们就可以用计算属性来实现，使用的时候在需要的地方调用即可
//计算属性会进行缓存，如果多次使用，只会被调用一次

8.事件监听

v-on用来绑定事件监听器，语法糖：'@'+事件名称//@click
click中的函数调用写在methods:{}中<div id="app"><!--1.事件调用的方法没有参数 ()可以不添加--><button @click="btn1Click()">按钮1</button><button @click="btn1Click">按钮1</button><!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法--><!--<button @click="btn2Click(123)">按钮2</button>-->   <!--调用时不传入参数,那么参数为undefined--><!--<button @click="btn2Click()">按钮2</button>--><button @click="btn2Click">按钮2</button><!--3.方法定义时, 我们需要event对象, 同时又需要其他参数--><!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event--><button @click="btn3Click(abc, $event)">按钮3</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',abc: 123},methods: {btn1Click() {console.log("btn1Click");},btn2Click(event) {console.log('--------', event);},btn3Click(abc, event) {console.log('++++++++', abc, event);}}})

9.条件判断

v-if、v-else、v-else-if
这三个指令与javascript的条件语句类似
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
当需要在显示与隐藏之间切换很频繁时，使用v-show
当只有一次切换时，通过使用v-if

10.循环遍历

v-for循环遍历数组，对象
v-for='(item,index) in items'--数组
v-for='(value,item,index) in obj'--对象
//注意，在循环遍历的时候一定要给其绑定key,这样可以防止组件的复用性:key='index'，绑定的值还必须是唯一的

11.阶段案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border: 1px solid #333;border-collapse: collapse;}th,td {padding: 8px 16px;text-align: center;border: 1px solid #ccc;}th {background-color: #c5d6e2;}</style>
</head><body><div id="app"><table><thead><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for='(item,index) in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><!-- 价格 保留两位小数 拼接 ￥ --><!-- 法1  总价格那里也需要这个 所以这样写不太好 --><!-- {{item.price.toFixed(2)}} --><!-- 法2 调用方法 --><!-- {{getFinalPrice(item.price)}} --><!-- 法3 过滤器 -->{{item.price | showPrice}}</td><td><!-- v-bind动态绑定属性如果为true就表示有这个属性 v-bind:disabled="true" 渲染出来就是disabled 所以这里只需要一个布尔值就行 --><button @click='subNumber(index)' v-bind:disabled='item.count<=1'>-</button>{{item.count}}<button @click='addNumber(index)'>+</button></td><td><button @click='removeHandle(index)'>删除</button></td></tr></tbody></table><h2>总价格为：{{totalPrice | showPrice}}</h2></div><script src='./js/vue.js'></script><script>const app = new Vue({el: '#app',data: {books: [{id: 1,name: '《算法导论》',date: '2006-9',price: 85.00,count: 1},{id: 2,name: '《UNIX编程艺术》',date: '2006-2',price: 59.00,count: 1},{id: 3,name: '《编程珠玑》',date: '2008-10',price: 39.00,count: 1},{id: 4,name: '《代码大全》',date: '2006-3',price: 128.00,count: 1}]},methods: {addNumber(index) {this.books[index].count++;},subNumber(index) {this.books[index].count--;},removeHandle(index) {this.books.splice(index, 1);}},computed: {// let totalPrice = 0// for (let i = 0; i < this.books.length; i++) {//   totalPrice += this.books[i].price * this.books[i].count// }// return totalPrice// 其他计算总价格方法// for (let i in/of this.books)// reducetotalPrice() {return this.books.reduce((preValue, n) => {return preValue + n.price * n.count;}, 0)}},filters: {showPrice(price) {//参数是你要过滤的东西//toFixed()保留两位小数return '¥' + price.toFixed(2)}}})</script>
</body></html>

12.v-model数据绑定

v-model实现表单与数据的双向绑定
实现原理：v-model的双向数据绑定原理实际上是v-bind与v-on的语法糖
也就是说下面的代码等同于:
<input type="text" v-model="message">
<input type="text" v-bind:value="message" v-on:input="message=$event.target.value"

Vue知识点总结(一)相关推荐

Vue 知识点汇总（下）--附案例代码及项目地址
文章目录 Vue 预备知识与后续知识及项目案例一.简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 2.Vue.js安装二.Vue知识量化三.内容 1.Webpack 详解 ...
前端知识基础之Vue知识点串讲
一.Vue知识点串讲复习一下Vue中的核心知识点. 复习完基本的知识点以后,后面再来看一下其它的面试内容 1.基本使用下面,先来看一段最简单的代码,如下所示: <!DOCTYPE html& ...
熬夜总结50个Vue知识点
这几天发生了很多事(具体是啥我就不说了),这些事,吓得我把我这些年珍藏的Vue知识点都拿出来整理了一遍,巴不得能多总结出一道是一道,我拿出了我的笔记,并且使劲回忆,终于悟出了这50道知识点(咱不要太俗 ...
Vue知识点整理（待更新）
Vue知识点整理(待更新) 参考Vue.js中文官网,Vue 知识点汇总(上)–附案例代码及项目地址,Vue 知识点汇总(下)–附案例代码及项目地址,Vue知识点汇总[持更] 文章目录 Vue知识点整 ...
Vue 知识点：列表排序
Vue 知识点:列表排序 <div id="root"><h2>人员列表</h2><input type="text" ...
Vue项目实战——实现一个任务清单（学以致用，两小时带你巩固和强化Vue知识点）
Vue2.x 项目实战(一) 内容参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现Git ...
【Vue知识点- No4.】vue组件、组件通信、Todo案例
知识点自测 this指向 let obj = {fn: function(){// this指向此函数的调用者},fn () {// this指向当前函数的调用者 (如果都是在vue里, this指向 ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
【Vue知识点- No2.】vue脚手架、基础API
No2.vue脚手架.基础API 必安装-vue-devtools 搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功 vscode-插件补充 v ...

Vue知识点总结(一)

Vue2重要知识点总结（一）

Vue.js基础语法

Vue知识点总结(一)相关推荐

最新文章

热门文章