渐进式的前端框架

                vue         react           augular
作者:   尤雨溪 facebook 谷歌公司 

前端框架和库的区别 

功能上的不同:
jquery库:包含DOM(操作DOM)+请求,就是一块功能。 art-template库:模板引擎渲染,高性能的渲染DOM (我们后端的一种模板 跟python 的模板类似) 框架:大而全的概念,简易的DOM体验+请求处理+模板引擎 在KFC的世界里,库就是一个小套餐,框架就是全家桶。 代码上的不同:
一般使用库的代码,是调用某个函数或者直接使用抛出来的对象,我们自己处理库中的 代码。
一般使用框架,其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。 框架的使用:
初始化自身的一些行为
执行你所编写的代码
释放一些资源 

vue的起步

  引包

  创建实例化对象

new Vue({
el:'#app',//目的地
data:{
msg:"hello Vue"
}
});
/*
{{}}: 模板语法插值
{{变量}}
{{1+1}}
{{'hello'}}
{{函数的调用}}
{{1==1?'真的':'假的'}}
*/ 

vue的指令系统

常用
vue-text
vue-html
v-if
v-for
v-show
v-bind
v-on

v-if和v-show的区别 

v-if:是真正的条件渲染,因为它会确保在切换的过程中,条件块内的事件监听器和子组件适当的    被销毁和重建.
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 //保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素  

vue的局部组件使用

打油诗: 1.声子 2.挂子 3.用

//1.声子
var App = {
tempalte:`
<div class='app'></div>`
}; new Vue({
el:"#app",
//3.用子
template:<App />
//2.挂子
components:{
App
} })  

父组件向子组件传递数据:通过prop

1.在子组件自定义特性。props:['自定义的属性1','自定义属性2']

当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样
2.要在父组件中导入的子组件内部 绑定自定义的属性 <Vheader :title = '父组件中data声明的数据属性'/>  

如何从子组件传递数据到父组件

1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit('自定义的事件名','传递的数据'),来向父级组件触发一个自定义的事件.

2.在父组件中的子组件标签中 要绑定自定义的事件,  

vue中全局组件的使用

Vue.component('全局组件的名字',{
跟new Vue() 实例化对象中的options是一样,但是要注意:
不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {}
})  

局部过滤器的使用

 //1.注册局部过滤器 在组件对象中定义
filters:{
'过滤器的名字':function(value){
}
}
//2.使用过滤器 使用管道符 |
{{price | '过滤器的名字'}}  

全局过滤器的使用

// 注册全局的过滤器
//第一个参数是过滤器的名字,第二个参数是执行的操作 Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
}); //使用跟 局部过滤器一样

  

 

 

Vue的基础使用的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. 一个综合实例讲解vue的基础知识点。

    本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:

  4. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. Vue组件基础

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  6. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  7. Vue入门基础(火柴)

    前言 由于个人十分欣赏博友——小火柴的蓝色理想,他的博文我看了大多数,觉得十分的精彩,然而很多都是看后即忘.我想除了没有经常动手敲代码,更可能是在看的时候忽略了很多细节,因此打算把他的博文通通给“抄袭 ...

  8. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  9. vue入门基础知识点测试

    vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...

  10. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

随机推荐

  1. Docker Demo on Docker

    install docker-machine $ curl -L https://github.com/docker/machine/releases/download/v0.10.0/docker- ...

  2. C#运算符的简单使用测试

    在代码中看到的代码中|=,有点不太理解故重新学习了下位运算符. 位运算符在 c# 中的测试用例 [TestMethod] public void TestMethod1() { var a = fal ...

  3. Spring的历史及哲学

    Spring的历史和哲学 1.Spring 历史 时间回到2002年,当时正是 Java EE 和 EJB 大行其道的时候,很多知名公司都是采用此技术方案进行项目开发.这时候有一个美国的小伙子认为 E ...

  4. ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)

    早就听说ASP.NET Core 3.0中引入了gRPC的服务模板,正好趁着家里电脑刚做了新系统,然后装了VS2019的功夫来体验一把.同时记录体验的过程.如果你也想按照本文的步骤体验的话,那你得先安 ...

  5. LindDotNetCore~Aspect面向方面编程

    回到目录 Aspect面向方面编程 面向侧面的程序设计(aspect-oriented programming,AOP,又译作面向方面的程序设计.观点导向编程.剖面导向程序设计)是计算机科学中的一个术 ...

  6. 多元线性回归公式推导及R语言实现

    多元线性回归 多元线性回归模型 实际中有很多问题是一个因变量与多个自变量成线性相关,我们可以用一个多元线性回归方程来表示. 为了方便计算,我们将上式写成矩阵形式: Y = XW 假设自变量维度为N W ...

  7. MongoDB3.2.22快速入门与使用【未完待续】

    1.CentOS的安装和mongodb,UVE的使用 1.1.CentOS7安装 虚拟机CentOS7安装步骤:https://www.cnblogs.com/wyt007/p/10295834.ht ...

  8. 内联汇编获取Kernaer32基址.

    DWORD GetKerner32ImageBase() { DWORD nIMageBase = 0; __asm { xor edx,edx mov ecx, fs:[0x30]; mov ecx ...

  9. 使用EHPC实现“完美并行”的高效批处理方案

    使用EHPC实现“完美并行”的高效批处理方案 在高性能计算场景中,用户一次业务计算可以划分为大量的任务,每个任务的处理逻辑相同,但是输入文件.参数设置和输出文件不同.由于每个任务处理逻辑相似,执行时彼 ...

  10. Spring Boot(六):如何优雅的使用 Mybatis

    *:first-child{margin-top: 0 !important}.markdown-body>*:last-child{margin-bottom: 0 !important}.m ...