Hello,大家好!今天给大家带来一款十分好用的框架——vue.js!

Vue.js是一套构建用户界面的渐进式框架。它 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

什么是双向绑定??
Vue框架 很核心的功能就是双向数据绑定。双向是指:HTML标签数据绑定到Vue对象,另外反方向数据也是绑定的。
通俗点说就是,Vue对象的改变会直接影响到HTML标签的变化,而且标签的变化也会反过来影响Vue对象属性的变化。
 
【 Vue构造函数 】
① 选项el属性,element缩写。当前Vue对象挂载到那个标签上的语法,支持CSS选择器或者DOM对象,一般用ID选择器 选择当前标签。
② data 是自定义数据。Vue会把自定义数据与HTML 模板进行绑定。
③ 数据绑定方式就是用双大括号{{}} ,类似于Angular。
 
一、 声明式渲染

二、动态绑定标题提示

三、显示与隐藏

四、遍历数组

五、双向数据绑定

【 VueJs 的实例化 】

当一个vue实例被创建时,它向vue的响应式系统中加入了其data对象所能找到的所有属性。当这些属性的值发生改变时,视图会产生"响应",即匹配更新为新的值。
 
【vue实例的生命周期】
  每个 Vue 实例在被创建之前都要经过一系列的初始化过程。
  例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
 
【 Vue.js 的表达式 】

 
  1、Vue.js 中使用{{}} 绑定表达式,用于将表达式的内容输出到页面中。
  2、表达式中可以是文字、运算符、变量等,也可以在表达式中进行运算输出结果。
  3、如果vue.js文件放在页面下方,在页面涮新瞬间会看到{{}}表达式的原样,所以可以使用 v-cloak 指令代替表达式。
    在CSS中设置 [v-cloak]{display:none;} 或者 v-html = "message" 

【vue.JS中的指令】—— 模板语法

指令是扩展的 HTML属性,带有前缀v-。
    v-bind:动态绑定数据。是专门用来绑定属性的 ,主要用来操作元素的 class 列表和它的内联样式.简写为“:” 。=> 以后的:class="{red:boolean}"
    v-cloak :隐藏未编译的Mustache语法,在css中设置[v-cloak]{display:none;}
    v-text :更新数据,会覆盖已有结构。类似{{ msg }} ;
    v-once :只渲染一次,随后数据更新也不重新渲染;
    v-html : 解析HTML标签 v-html = "message"
 
    v-show :根据值的真假,切换元素的display属性;
    v-if :根据值的真假,切换元素会被销毁、重建; => 在dom中已消失
    v-else-if :多条件判断,为真则渲染;
    v-else :条件都不符合时渲染;
    v-for :基于源数据多次渲染元素或模块;
 
    v-model :在表单控件元素(input等)上创建双向数据绑定(数据源);跟Angular中 ng-model 用法一样。
    v-pre :跳过元素和子元素的编译过程;
    v-on :绑定时间监听器。简写为“@”,例:@click="xxx";
 
六、条件语句
 
【 区别 v-if v-show v-else v-else-if 】
  v-if :根据值的真假,切换元素会被销毁、重建; => 在dom中已消失
  v-show :根据值的真假,切换元素的display属性;
  v-else :条件都不符合时渲染;
  v-else-if :多条件判断,为真则渲染;
【 v-show v-if 的使用与比较 】
  ① v-show :根据值的真假,切换元素的display属性;
    v-show是控制隐藏或显示。元素会始终渲染并保持在dom中。
    v-show不支持template标签

  ② v-if是控制DOM节点的生成和销毁。 是真实的条件渲染,因为它会确保条件块在切换当中适当的销毁与重建条件块内的事件监听器和子组件。
  ③ v-if 有更高的切换消耗,而v-show有更高的初始渲染消耗。
    如果需要频繁切换使用,v-show更好。如果运行时条件不大可能改变,用v-if较好。
 
七、循环语句 v-for  
  ① 语法:v-for = "x in items" x 是 索引:items是数组,这样进行遍历
② v-for循环是不断创建新的标签,标签里的内容,我们决定,一般都是放在数组里,然后遍历显示出来。也可以放对象 ,遍历对象。
③ 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

八、v-bind 数据绑定
  ① v-bind作用:v-bind 是专门用来 绑定属性的,主要用来操作元素的class列表和它的内联样式
  ② 用法:和JS操作DOM一样,但是更简单
  ③ 语法:
    :class = "{className : 表达式}"
    表达式 值为 true,添加 className(add)
    表达式 值为 false,不添加 className(remove)

九、计算属性 【computed 和 methods】
  1、写法上的区别:
    computed 计算属性在使用时,不用加(),而methods在使用时,要向方法一样去用,必须加();
  2、利用 computed 计算属性时,是将content和message绑定,只有当message发生变化时,才会触发content
    而 methods 方方式,每次进入页面时,都要执行该方法。
 

十、组件
【什么是组件】
  1、组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,
    同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。
  2、高内聚性,组件功能必须是完整的。(如我要实现下拉菜单功能,那在下拉菜单这个组件中,
    就把下拉菜单所需要的所有功能全部实现)。
  3、低耦合性。(较低的耦合便于单元测试和重复利用)
  4、每一个组件都有自己清晰的职责,完整的功能。
 
【vue中的组件】
  Vue 中的组件是一个自定义的标签(元素),vue.js的编译器会为它添加特殊功能
  Vue中的组件也可以拓展原生的HTML元素,封装可重用的代码。
 
【组件的基本组成】
  样式结构 行为逻辑 数据
【注】
  起名:在JS中使用驼峰,在HTML中就要使用 myCom => <my-com></my-com>
 
【 全局组件 】
1、全局组件必须写在vue实例创建之前,才会在根元素下面生效
2、模板里面第一级 只能有一个标签,不能并行
eg.
// 全局组件
    Vue.component("myCom",{
      template : "<h1 style = 'color:blue'>vue组件<p>hahaha</p></h1>" // p在h1里面
    })
 
【 局部组件 】
  1、局部组件直接在vue实例里,使用 components 注册。
  2、建议将模板定义在一个全局变量里。
 
更加详细的内容请参考资料:http://www.runoob.com/vue2/vue-routing.html
谢谢大家!
 

一款很便捷很实用的框架——vue.js的更多相关文章

  1. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  2. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  3. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  4. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  5. 前端三大框架 Vue.js、AngularJS、React 的区别

    Vue.js Vue.js 是一种构建数据驱动的Web界面的渐进式框架,Vue.js 采用自底向上增量开发的设计. Vue.js 轻量高效,数据双向绑定(响应式数据绑定), 它会自动响应数据的变化情况 ...

  6. 前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

    本项目利用  VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...

  7. 前端框架 Vue.js 概述

    Vue.js 是什么 图片 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视 ...

  8. python django框架+vue.js前后端分离

    本文用于学习django+vue.js实现web前后端分离协作开发.以一个添加和删除数据库书籍应用为实例. django框架官方地址:https://www.djangoproject.com/ vu ...

  9. 前台框架vue.js中怎样嵌入 Echarts 组件?

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

随机推荐

  1. 项目常见函数封装,基于Jquery

    /// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mC ...

  2. (10.16)java小作业!

    相信大家刚刚学习java多多少少都会写一些java的基础编程来练练手感,我也不例外!今天想和大家分享一下我最近所接触到的比较有趣的java小编程! 已知a已被赋值,b已被赋值,请编写java程序实现a ...

  3. SAP 月结F.19与GR/IR

    http://blog.sina.com.cn/s/blog_3eeba40101008v75.html 为什么要做月结?月结究竟都结些啥? 月结的目的和手段都不知道,只知道一部分.月结,为了出资产负 ...

  4. MS-DOS命令dir命令详细解析

    DOS命令窗口打开方式为Win+R键,打开运行命令,输入 cmd 即可:特殊情况我们要用管理员身份运行DOS,此时就可以在开始菜单-附件-DOS命令,鼠标右键单击命令提示符以管理员身份运行.如果是wi ...

  5. Python基础2 编码和逻辑运算符

    编码: AscII码 :标准ASCII码是采用7位二进制码来编码的,当用1个字节(8位二进制码)来表示ASCII码时,就在最高位添加1个0. 一个英文字母占一个字节 8位(bit)==一个字节(byt ...

  6. BootStrap教程完整版

    http://www.runoob.com/bootstrap/bootstrap-navbar.html

  7. python学习之第三课时--基本数据类型及区别,变量

    基本数据类型及区别 1. 数字类型(int) 数字型--变量值直接是数字,没有双引号""   整数 2. 浮点数(float) 肤浅理解小数点后有有效数字  1.55  0.22 ...

  8. C++const使用(06)

    可以在类中使用const关键字定义数据成员和成员函数或修饰一个对象.一个const对象只能访问const成员函数,否则将产生编译错误. 常量成员 常量成员包括常量数据成员.静态常数据成员和常引用.静态 ...

  9. linux root修改密码失败

    问题: 当使用root修改密码时,报错passwd:Authentication token manipulation error 解决: 1.查看是否权限问题, /etc/passwd /etc/s ...

  10. 谈一谈原生JS中的【面向对象思想】

           [重点提前说:面向对象的思想很重要!]         最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...