Vue.js知识总结 (一)
来源:互联网 发布:sql备份 编辑:程序博客网 时间:2024/06/04 20:00
Vue.js框架是什么以及核心内容
Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue
生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
这句话有两个关键词:数据绑定 和 视图组件。
Vue的数据驱动:数据改变驱动了视图的自动更新,传统的做法你得手动改变DOM来改变视图,vuejs只需要改变数据,就会自动改变视图,一个字:爽。再也不用你去操心DOM的更新了,这就是MVVM思想的实现。
视图组件化:把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。
Vue.js的优点
- 简易安装(vue.js是一个js库,直接在外部引入即可)
- 数据驱动视图
- 数据双向绑定(Vue.js还提供了方便的语法指令,实现视图和数据的双向绑定)
- 组件化(组件化就是把页面中特定的区块独立抽出来,并封装成一个可方便复用的组件。)
创建一个Vue实例
第一步:创建语法
<script> let vm = new Vue({});</script>
通过关键语句 new Vue( )我们就可以创建一个Vue实例:vm了。我们注意到了我们给Vue( )传了一个参数选项,是一个空对象。
第二步:设置数据
let vm = new Vue({ //实例vm的数据 data:{ name: "张三", age : 21 } });
写法也很简单,参数对象不再是一个空对象,它包含一个属性:data,而data的值也是一个对象,这个对象就是我们给实例vm设置的数据了。比如:name为张三,age为21等等。
第三步:挂载元素
视图view部分:
<div id="app"></div>
视图(html部分)上我们有一个id为”app”的div元素。
let vm = new Vue({ //挂载元素 el:'#app', //实例vm的数据 data:{ name: "张三", age : 21 } });
参数中我们不但有属性“data”,还多了个属性:“el”,el参数提供一个在页面上已经存在的DOM元素,作为我们实例vm的挂载目标。表示我们的实例vm和id为“app”的DOM节点就关联起来了。
第四步:渲染
实例vm创建好了,数据data有了,DOM节点也关联起来了,最后一步,就是把vm的数据绑定到指定的视图上了,也就是数据渲染。
<div id="app"> 我是{{ name }},今年{{ age }}岁</div>
我们只需要用一个双大括号:{{ }} 即可,你可以留意到,{{ name }} 和 {{ age }} 就是我们给实例vm设置的数据name和age,我们用{{ }}可以直接读取到它们的值。
定义一个vue实例的4个常用选项
filters 过滤器
假设我们有一组数字,都是小数,num1,num2,num3都是Vue实例vm的小数,我们把它展示在视图上。
突然,需求改了,我们不能把小数展示出来,需要把小数转换成整数再显示。这个时候,我们需要把三个小数经过过滤处理后再展示,不能直接展示。这种情况就需要用到Vue的filters过滤器了。
let vm = new Vue({ //挂载元素 el:'#app', //实例vm的数据 data:{ num1:33.141, num2:46.212, num3:78.541 }, //过滤器 filters:{ toInt(value){ return parseInt(value); } } });
相信大家都注意到了,参数对象除了el和data属性之外,还多了一个filters属性,它的值也是一个对象,里面定义了一个叫toInt( )的方法,传入了一个value的参数,函数的作用就是把传入的参数value,简单地转成一个整出并return回去。
定义完filters属性后,我们怎么用呢?
<div id="app"> 数字1:{{ num1 | toInt}}<br> 数字2:{{ num2 | toInt}}<br> 数字3:{{ num3 | toInt}}</div>
也很简单,如上面代码所示,通过管道符 | 把函数toInt 放在变量后面即可,num1,num2,num3会分别作为参数value传入toInt( value )方法进行运算,并返回一个整数。
computed 计算属性
有时候,我们拿到一些数据,需要经过处理计算后得到的结果,才是我们要展示的内容。
比如:我们有三个数,但是需要展示的是三个数字之和。这种情况,就适合用我们的计算属性computed。
let vm = new Vue({ //挂载元素 el:'#app', //实例vm的数据 data:{ num1:1, num2:3, num3:6 }, //计算属性 computed:{ sum(){ return this.num1+this.num2+this.num3 } } });
<div id="app"> 总和:{{ sum }} </div>
计算属性computed用法更简洁,仅需{{ sum }}就能读取到它的计算结果:1+3+6结果应该为10。
需要注意的是,sum的值是依赖data中的数据num1,num2,num3的,一旦它们发生了变化,sum的值也会自动更新。
methods 方法
let vm = new Vue({ //挂载元素 el:'#app', //实例vm的数据 data:{ a:0 }, //方法 methods:{ plus(){ return this.a++; } } });
定义一个plus( )的方法在methods中,下面我们把plus( ) 绑定在按钮的点击事件上:
<div id="app"> {{ a }} <button v-on:click="plus">加1</button> </div>
在Vue中通过v-on:指令来绑定事件(指令后面章节会介绍),我们点击按钮,methods中的方法plus( )就会被调用,实现给a的值加1,并更新视图。
watch 观察
watch选项是Vue提供的用于检测指定的数据发生改变的api。
上面点击按钮a的值加1的例子,不就是数据发生变化了吗?我们就用watch选项来监听数字a是否发生了变化,如果了监听到了变化,我们就在控制台输入以下a的最新值。
在上个例子的代码基础上,我们加上watch部分的代码:
let vm = new Vue({ //挂载元素 el:'#app', //实例vm的数据 data:{ a:0 }, //方法 methods:{ plus(){ return this.a++; } }, //观察 watch:{ a(){ console.log(`有变化了,最新值:`); console.log(this.a); } } });
我们点击按钮的时候,a的值加1发生了变化,而此时watch监听到了它的变化,便在控制台输出了我们指定的内容。
- Vue.js知识总结 (一)
- Vue.js知识总结——生命周期
- Vue.js知识总结——指令
- Vue.js知识总结——组件
- vue.js(一)
- JS知识一:系统知识笔记总结
- Vue.js 学习要点总结(一)
- vue.js学习(一)
- vue.js入门(一)
- vue-router 知识总结
- vue学习知识总结
- Vue学习总结(一)
- Vue.js中Directive知识
- vue.js使用(一):vue-cli的安装
- vue.js开发外卖App项目总结(一)
- js 知识小结(一)
- Js进阶知识(一)
- Vue.js - 学习笔记 (一)
- Eclipse使用技巧小结
- Codeforces Round #428 (Div. 2):D. Winter is here(组合数公式)
- PHP判断手机是IOS还是Android
- hdu 4458 Shoot the Airplane 点在平面内 相对运动
- P1349 广义斐波那契数列
- Vue.js知识总结 (一)
- 图的建立与查找
- leetcode 235. Lowest Common Ancestor of a Binary Search Tree
- 初学俄罗斯方块,完美注释--欢迎指出bug
- ArcGIS中QueryTask,FindTask,IndentifyTask 之间的区别
- 将Java项目打成可执行的jar
- php 图片压缩处理
- java基础—— Collections.sort的两种用法,简单明了 。
- python基础--函数定义、调用