Vue.js 五天 汤小洋
一、 Vue.js简介
1. Vue.js是什么
Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e 版本：v1.0 v2.0

是一个构建用户界面的框架
是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
数据驱动+组件化的前端开发（核心思想）
通过简单的API实现响应式的数据绑定和组合的视图组件
更容易上手、小巧

参考：官网

2.vue和angular的区别
2.1 angular
上手较难
指令以ng-xxx开头
所有属性和方法都存储在$scope中
由google维护

2.2 vue
简单、易学、更轻量
指令以v-xxx开头
HTML代码+JSON数据，再创建一个vue实例
由个人维护：尤雨溪，华人，目前就职于阿里巴巴，2014.2开源了vue.js库

共同点：都不兼容低版本IE 对比：GitHub上vue的stars数量大约是angular的两倍

二、起步
1. 下载核心库vue.js
bower info vue
npm init --yes
cnpm install vue --save
版本 v2.3.4 目前最新版本(2017.6.29)

vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快

2. Hello World（对比angular）
2.1 angular实现
js:
    let app=angular.module('myApp',[]);
    app.controller('MyController',['$scope',function($scope){
        $scope.msg='Hello World';
    }]);
html:    
    <html ng-app="myApp">
        <div ng-controller="MyController">
            {{msg}}
        </div>
    </html>

2.2 vue实现
js:
    new Vue({
        el:'#itany', //指定关联的选择器
        data:{ //存储数据
            msg:'Hello World',
            name:'tom'
        }
    });
html:
    <div id="itany">
        {{msg}}
    </div>

3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中

//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
    Vue.config.devtools=false;
    Vue.config.productionTip=false; //阻止vue启动时生成生产消息

三、 常用指令
1. 什么是指令？
用来扩展html标签的功能
angular中常用的指令：
    ng-model
    ng-repeat
    ng-click
    ng-show/ng-hide
    ng-if

2. vue中常用的指令
v-model 双向数据绑定，一般用于表单元素

v-for 对数组或对象进行循环操作，使用的是v-for，不是v-repeat 注：在vue1.0中提供了隐式变量，如$index、$key 在vue2.0中去除了隐式变量，已被废除

v-on 用来绑定事件，用法：v-on:事件="函数"

v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似

四、 练习：用户管理
使用BootStrap+Vue.js

五、 事件和属性
1. 事件
1.1 事件简写
v-on:click=""    
简写方式 @click=""

1.2 事件对象$event
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx

1.3 事件冒泡
阻止事件冒泡：
    a)原生js方式，依赖于事件对象
    b)vue方式，不依赖于事件对象
        @click.stop

1.4 事件默认行为
阻止默认行为：
    a)原生js方式，依赖于事件对象

1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

2. 属性
2.1 属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""

属性的简写：
    v-bind:src="" 简写为 :src=""

2.2 class和style属性
绑定class和style属性时语法比较复杂：

六、 模板
1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法

2. 数据绑定的方式
a.双向绑定
    v-model
b.单向绑定    
    方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
    方式2：使用v-text、v-html

3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示

七、 过滤器
1. 简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器
vue1.0中内置许多过滤器，如：
    currency、uppercase、lowercase
    limitBy
    orderBy
    filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
    a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
    b.使用自定义过滤器

3. 自定义过滤器
分类：全局过滤器、局部过滤器

3.l 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)

3.l 自定义局部过滤器

vue学习（一）、Vue.js简介的更多相关文章

  1. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  2. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  3. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  5. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  6. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  7. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  8. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  9. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  10. 【vue学习】vue 2.0版本以上创建项目的的步骤

    一.环境准备 1.vue项目依赖 node.js npm,需要先安装node和npm,先检查本地是否安装node.npm 快捷键win+r   输入cmd  弹出操作框,如果电脑已经安装git,直接右 ...

随机推荐

  1. 【转载】TableLayout表格布局详解

    原文地址:http://www.cnblogs.com/manuosex/p/3584701.html 一.Tablelayout简介 Tablelayout类以行和列的形式对控件进行管理,每一行为一 ...

  2. 用AndroidSDK中的Face Detector实现人脸识别

    很多手机图片管理应用都开始集成人脸识别功能.一提到人脸识别,模式识别,滤波,BlahBlah 一堆复杂的技术名字戳入脑海中,立刻觉得这玩意儿没法碰,太玄乎了.其实Android SDK从1.0版本中( ...

  3. 关于Java的权限修饰符(public,private,protected,默认friendly)

    以前对访问修饰符总是模棱两可,让自己仔细解释也是经常说不很清楚.这次要彻底的搞清楚. 现在总结如下: 一.概括总结 各个访问修饰符对不同包及其子类,非子类的访问权限 Java访问权限修饰符包含四个:p ...

  4. 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层（CSS） && 移动端点击 && 文字不可选择

      在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...

  5. php 判断字符串之间包含关系

    之前常用stristr ,  strpos判断. 因为处理1000W * 1000W级别,循环就是漫长漫长... 在此,对stristr, strpos, explode判断字符串包含关系处理速度对比 ...

  6. 基于libcurl实现REST风格http/https的get和post

    c/c++开发中经常要用到http/https协议,直接使用socket工作量很大,要是使用socket实现https,那更不可思议,开源的c/c++的http客户端框架,libcurl是首选,而且也 ...

  7. python笔记03-----文件操作

    文件操作 创建一个文件名字为filename 内容是 BJSHGDTW 打印文件编码 f = open("filename",'r',encoding="utf-8&qu ...

  8. Linux打开txt文件乱码解决方案

    在ubuntu16.04下打开dic_ec.txt,出现中文乱码. 先输入 gsettings set org.gnome.gedit.preferences.encodings auto-detec ...

  9. C# 之文件拖拽和pixturBox缩放与拖拽

    文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...

  10. digester解析xml文件

    在我们的项目中或多或少会采用xml来做配置文件,你可以采用Java原生支持的sax.DOM或者第三方的dom4j等.虽然提供了各式各样的解析方式,但是解析一个复杂的xml所编写的Java代码是非常麻烦 ...