学习笔记,vue学习笔记

作者:计算机知识

Vue.js在统一准备上行使MVVM方式。通过MVVM的格局拆分为视图和数量两部分,并将其分别。由此,你只需关注数据就可以,DOM的业务Vue会帮你活动解决。

一、vue-router

vue:
读音: v-u-e
view

一、vue须求在dom加载成功未来达成实例化

Vue的生命周期钩子相比较常用的有:

1、简介

大家平日利用vue开拓单页面应用程序(SPA)。开垦SPA进程中,路由不能缺少,vue的合法推荐是vue-router。单页面应用程序看起来好像是二个页面,其实是在3个页面中切换差别的html部分,从而完结所谓的单页面,在那切换之中,就必要选用路由来落实区别的页面内容的变现。

vue到底是什么?
    一个mvvm框架(库)、和angular类似
    比较容易上手、小巧
mvc:
    mvp
    mvvm
    mv*
    mvx
官网:http://cn.vuejs.org/ 
手册: http://cn.vuejs.org/api/

eg:

  • created 实例创设完结未来钓鱼,此阶段达成了多少的考查等,但从没挂载,$el还不可用。在急需初阶化管理局地数量时会相比有用
  • mounted el挂载到实例上后调用,一般大家的首先个专门的学业逻辑会在此间初始
  • beforeDestroy 实例销毁在此以前调用。主要解绑一些选取add伊芙ntListener监听的风云等。

贰、基本用法

vue和angular区别?
vue——简单、易学
指令以 v-xxx
一片html代码合作上json,在new出来vue实例
学习笔记,vue学习笔记。个人维护项目

window.onload = function(){
      new Vue({
         el: '#editor',
         data: {
            input: '# hello'
         }
      })
}

angularJS和vue的监测数据变化区别

1, 首先校正误区,Angular并不是周期性触发脏检查。唯有当UI事件,ajax请求或者timeout 延迟事件,才会触发脏检查。Angular并不会遍历成效域的性质,它遍历的是监听器。一旦将数据绑定到UI上,就能够增多一个监听器(watcher )。

angularJS 功能域内的每叁回变动,全数 watcher 都要重复总括。并且,假诺局地 watcher 触发另贰个翻新,脏检查循环(digest cycle)恐怕要运转往往。 Angular 用户时时要使用深奥的本领,以化解脏检查循环的难点。不常未有轻巧的艺术来优化有雅量 watcher 的功效域。

二, Vue.js 则根本未曾那个难点,因为它采取基于借助追踪的侦查系统并且异步列队更新,全数的多少变化都以单身地接触,除非它们中间有鲜明的依赖关系;

 Vue 会在初阶化实例时对品质实施 getter/setter 转化进度(遍历此目的具有的品质,并使用 Object.defineProperty 把这一个属性全体转为 getter/setter),在在那之中它们让 Vue 追踪信赖,在品质被访问和退换时通报变化。每种组件实例都有料理的 watcher 实例对象,它会在组件渲染的经过中把品质记录为借助,之后当注重项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关系的零部件得以更新

并不是兼具情状下,脏检查评定品质都比不上阅览者方式。举例:

for循环中对绑定在scope上的变量做自增操作,在脏检查评定的建制下,会等待到循环推行完成,然后三回革新,应用到分界面上。 不过在依赖setter的建制就惨了,每变动二回就需求创新二次,那样品质就能够相当的低。二种不相同的监督措施,各有其优缺点,最棒的不二诀若是摸底各自行使方法的差距,思量出它们性能的区别所在,在分裂的事业场景中,避开最轻便导致品质瓶颈的用法。(实际看仿效文献 贰

参谋文献:

1,《Vue.js实战》

2,AngularJS 脏检查深入解析

  1. vue官网 深远响应式原理

(一).使用手续

vue-router的为主选拔手续如下:

  • 概念要求切换的零件
  • 安插路由,规定路线到零部件的投射关系
  • 创设路由实例
  • 将路由挂载到vue实例
//1.定义组件,用于路由切换
var Home = {
    template: '<div>我是主页</div>'
}
var News = {
    template: '<div>我是新闻</div>'
}

//2.配置路由
const routes = [{
        path: '/home',
        component: Home
    },{
        path: '/news',
        component: News
    },{ //这一路由配置用于首次访问或者找不到所请求路由,自动跳转home页
        path: '*',
        redirect: '/home'
}];

//3.创建路由实例
var router = new VueRouter({
    routes  //传入配置好的路由信息
});

//4.挂载路由到根组件
new Vue({
    el: '#app',
    router 
});

那般大家就安插好了1个完好无缺的路由。在切换组件的时候会依赖路由加载差异的组件。大家利用类似a标签的<router-link to="url"></router-link>接触组件的切换,to天性存放的是路线。使用<router-view></router-view>来展现所切换组件。

<div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>

    <router-view></router-view>
</div>

诸如此类大家就足以兑现主页和消息组件间的切换。

    适合: 移动端项目,小巧

    vue的发展势头很猛,github上start数量已经超越angular
angular——上手难
    指令以 ng-xxx
    所有属性和方法都挂到$scope身上
    angular由google维护

    合适: pc端项目

共同点: 不兼容低版本IE

  

(二).参数传递

莫不大家供给向所切换组件传递参数。vue提供了三种向组件传递参数的法门。

  • 查询字符串的样式
    • /home?name=dawei&pwd=666
    • 在组件内部采纳{{$route.query}}收到参数
  • rest风格

    • /news/param1/param2
    • 在组件内部使用{{$route.params}}接收参数

(三).路由嵌套

路由还能多层嵌套使用,使用children属性。

{
    path:'/user',
    component:User,
    children:[
        {
            path:'login',  
            component:Login
        },
        {
            path:'regist',
            component:Regist
        }
    ]
}

子路由项路线不要接纳/开头,以 /开班的嵌套路线会被作为根路线。

在组件中就足以动用该路由:

<div>
    <h3>用户信息</h3>
    <ul>
        <router-link to="/user/login">用户登陆</router-link>
        <router-link to="/user/regist">用户注册</router-link>
    </ul>
    <router-view></router-view>
</div>

留意路线的写法。

vue基本雏形:
angular呈现一条基本数据:
var app=angular.module('app',[]);

三、路由实例的主意

此地上学五个路由实例的艺术:router.push()router.replace()

  • router.push():增多路由,功用上与<route-link>相同
  • router.replace(): 替换路由,不发生历史记录
router.push({path:'home'})

router.replace({path:'user'})
    app.controller('xxx',function($scope){  //C
        $scope.msg='welcome'
    })

    html:
    div ng-controller="xxx"
        {{msg}}
vue:
    html:
        <div id="box">
            {{msg}}
        </div>

        var c=new Vue({
            el:'#box',  //选择器  class tagName
            data:{
                msg:'welcome vue'
            }
        });

四、路由整合动画

路由结合动画使用很轻便,我们能够用 <transition> 组件给它加多一些动画效果:

<transition>
  <router-view></router-view>
</transition>

常用命令:
名仕亚洲娱乐 ,angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

2、单文件组件

    $scope.show=function(){}
指令: 扩展html标签功能,属性

v-model 一般表单元素(input)   双向数据绑定

循环:
    v-for="name in arr"
        {{$index}}

    v-for="name in json"
        {{$index}}  {{$key}}

    v-for="(k,v) in json"
事件:
    v-on:click="函数"

    v-on:click/mouseout/mouseover/dblclick/mousedown.....

    new Vue({
        el:'#box',
        data:{ //数据
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
            show:function(){    //方法
                alert(1);
            }
        }
    });
显示隐藏:
    v-show=“true/false”

1、.vue文件

.vue文本称为单文件组件,是Vue.js自定义的1种文件格式,三个.vue文件便是1个独门的组件,在文件内包裹了组件相关的代码:html、css、js代码。

.vue文本由叁有个别构成:<template><style><script>:

<template>
    //html  
</template>

<script>
    //js    
</script>

<style>
    //css      
</style>

bootstrap vue简易留言板(todolist):

2、vue-loader

浏览器本人并不认知.vue文件,此时亟需vue-loader对.vue文件实行加载深入分析,。类似的loader还应该有多数,如:html-loader、css-loader、style-loader、babel-loader等。须要留意的是vue-loader是基于webpack的。

bootstrap: css框架    跟jqueryMobile一样
    只需要给标签 赋予class,角色
    依赖jquery

确认删除?和确认删除全部么?

3、webpack

webpack是一个前端能源模板化加载器和包裹工具,它亦可把各类资源都当做模块来利用和管理。实际上,webpack是透过不相同的loader将那么些能源加载后装进,然后输出打包后文件。轻巧的话,webpack正是一个模块加载器,全体资源都得以作为模块来加载,最后打包输出。


三、vue-cli

事件:
v-on:click/mouseover......

1. 简介

vue-cli是贰个vue脚手架,能够扶持大家神速构造项目组织,减弱开采职员开辟阻力。vue-cli集成了五种本子:

  • simple :相比简单
  • webpack :包涵ESLint代码标准检查和unit单元测试等
  • webpack-simple: 未有代码规范检查和单元测试
  • browserify: 使用的也正如多
  • browserify-simple
简写的:
@click=""       推荐

事件对象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;
        b). @click.stop 推荐
默认行为(默认事件):
    阻止默认行为:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推荐
键盘:
    @keydown    $event  ev.keyCode
    @keyup

    常用键:
        回车
            a). @keyup.13
            b). @keyup.enter
        上、下、左、右
            @keyup/keydown.left
            @keyup/keydown.right
            @keyup/keydown.up
            @keyup/keydown.down
        .....

2.装置、操作步骤

//安装vue-cli,配置vue命令环境 
    cnpm install vue-cli -g
    vue --version
    vue list

// 初始化项目,生成项目模板
    vue init 模板名  项目名

//进入生成的项目目录,安装模块包
    cd vue-cli-demo
    cnpm install

//运行
    npm run dev  //启动测试服务
    npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

三.文书介绍

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue组件
|   |-- store                          // 状态管理
|   |-- App.vue                        // 页面入口vue文件
|   |-- main.js                        // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件
|   |-- data                           
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico                      //网页图标
|-- index.html                       // 入口页面
|-- package.json                     // 项目配置信息
.

此列表拷贝自:https://segmentfault.com/a/1190000007880723

属性:
v-bind:src=""
width/height/title....

本文由bwin必赢发布,转载请注明来源

关键词: 日记本 Vue集结号-... 前端学习