Angular+Vue+React
    Vue性能最好,Vue最轻
=======================================================
Angular
    入门难,学习成本高
Vue
    简单
=======================================================
Vue
    官网:http://vuejs.org/
    中文:http://cn.vuejs.org/

Vue.js的发展
        1.x
        2.x             √
=================================================
Vue如何玩?
    new Vue({
        el:'元素选择器',
        data:{
            数据
        },
        methods:{
            方法
            方法中:this就是当前new出来的实例
        }
    });

事件
<button v-on:click="方法()">按钮</button>
<button @click="方法()">按钮</button>

指令:
    v-model                 指定数据
    v-for                      循环
        v-for="value in arr"
        v-for="(value,index) in arr"

v-for="(value,key,index) in json"
    v-show                      显示

====================================================
简易留言板

计算属性

{{reverseMessage}}

new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
        computed:{
            reverseMessage(){
                return this.message.split('').reverse().join('');
            }
        }
    });

======================================================
class操作
    :class="{active:true/false}"

style操作
    :style="{width:width+'px'}"

图片    
    :src=""
==================================================
交互
    Vue本身不支持交互
    可以跟任何交互的库配合
        jquery
        axios         交互库
            不支持jsonp,只支持ajax

=======================================    
钩子函数     生命周期
    beforeCreate         创建实例之前
    created             创建实例完成
    beforeMount         挂载之间
    mounted             挂载完成
    beforeUpdate         更新之前
    updated             更新完毕
    beforeDestroy         销毁之前
    destroyed             销毁完毕

如何销毁:
        v.$destroy()

防止闪屏
    [v-clock]{
        display: none;
    }
    <div id="div1" v-clock></div>
================================================
事件
    事件对象
        $event
    @click
    @contextmenu
    @keydown

事件冒泡
        ev.cancelBubble = true;

@click.stop = "show()"

默认事件
        ev.preventDefualt();

@click.prevent = "show()"

事件冒泡和默认事件同时解决
        @click.stop.prevent = "show()"

键盘事件
        @keydown.ctrl/enter

自定义按键
        Vue.config.keyCodes.a = 65;
        @keydown.a = "show()"

=============================================
模板
    {{}}
    v-text
    v-html

-================================================

Vue组件
组件         Component
---------------------------------------------
    定义组件
        公共的组件
        Vue.component('组件的名字',{
            template:'模板',
            data(){
                return {
                    数据
                };
            }
        });
        私有的组件
        new Vue({
            components:{
                '组件的名字':{
                    template:'模板',
                }
            }
        });
    使用组件
        <组件的名字></组件的名字>

template一定要有一个根元素
组件写在template中可读性差
    <template id=""></template>

<script type="x-template" id=""></script>

==============================================
组件之间数据通信
    父级给子级数据
    <test :aaa="xxx"></test>
    Vue.component('test',{
        template:'',
        props:['aaa']
        或者
        props:{
            aaa:String
        }
    });

子级给父级数据
=============================================
Vuex
    http://vuex.vuejs.org/
============================================
Vue             filter         过滤器
============================================
路由        ***
    http://router.vuejs.org/

============================================
vue-cli         脚手架
    # 全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 安装依赖,走你
    $ cd my-project
    $ npm install
    $ npm run dev

vue init webpack 项目名
    vue init webpack-simple 项目名         √
=========================================
引入静态样式资源需要:
    style-loader         
    css-loader
    下载:
    npm install style-loader css-loader --save-dev

配置:
        webpack.config.js
        {
            test: /\.css$/,
            loader: ['style-loader','css-loader']
        }
==================================================
axios                 2.x推荐
vue-resource         1.x推荐
    引入本地图片
        require(url);

前端学习(三十八)vue(笔记)的更多相关文章

  1. 前端学习(三十六)promise(笔记)

    一个页面:  头部.用户信息.新闻列表 jquery ajax:  1.$.ajax({    url:'',    dataType:'json', }).then(res=>{    //r ...

  2. 前端学习(三十九)移动端app(笔记)

    移动端App    开发App的三种方式    Native App         原生        底层语言        java         Android        oc      ...

  3. 前端学习(三十五)模块化es6(笔记)

    RequireJs:一.安装.下载    官网: requirejs.org    Npm:  npm i requirejs二.使用    以前的开发方式的问题:        1).js 是阻塞加 ...

  4. 前端学习(三十四)对象&模块化(笔记)

    人,工人 //类的定义    function Person(name,age){ //构造函数        //工厂模式        //1.原料        //var obj = new ...

  5. 前端学习(三十)es6的一些问题(笔记)

    赋值表达式    document.onclick = document.onmouseover = fn;    var a = b = c = d = 5;             不推荐 逗号表 ...

  6. 前端学习(二十八)es6&ajax(笔记)

    ES6    let    块级作用域    const    解构赋值    字符串拼接    扩展运算符    ------------------------------------------ ...

  7. Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据

    背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...

  8. 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除

    目录 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除 18.1 centos6系统启动过程及相关配置文件 18.1.1 centos6系统启动过程 18.1.2 centos6启 ...

  9. bp(net core)+easyui+efcore实现仓储管理系统——入库管理之二(三十八)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

随机推荐

  1. INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES

    [转] https://www.mobibrw.com/2016/3949 adb install 一个apk错误: INSTALL_FAILED_ALREADY_EXISTS 应用已存在,使用 ad ...

  2. [洛谷P1709] 隐藏的口令

    问题描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<=5,000,000),然后他把S顺时针绕成一个圈,每次取一个做开头字母并 ...

  3. jquery用法第二波

    过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $(“#id”) $("div[title=test]")选取titl ...

  4. 1,Spring MVC 学习总结(一)

    一,什么是MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示 ...

  5. C#中给RICHTEXTBOX加上背景图片

    在系统自带的RichTextBox中是无法给它设置背景图片,但是我们在某些场合可能需要给RichTextBox设置背景图片.那么怎么实现这一想法呢?经过研究发现通过其它巧妙的途径可以给RichText ...

  6. String reduction (poj 3401

    String reduction Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1360   Accepted: 447 D ...

  7. 调试 & 常数优化:我有特别的 debug 技巧

    rxz 的调试技巧(https://www.zhihu.com/question/60719584/answer/179363450): #define DEBUG printf("Pass ...

  8. Centos6.5在线配置安装Java环境与Tomcat环境

        书写此文一来记录环境,以便后期查看使用,Linux环境下配置centos与Java开发环境 本文环境:虚拟机系统centos6.5   链接工具:xshell脚本链接工具 一.安装Java开发 ...

  9. 137、TensorFlow使用TextCNN进行文本分类

    下面是分类的主函数入口 #! /usr/bin/env python import tensorflow as tf import numpy as np import os import time ...

  10. JSP_01

    1.定义局部变量.输出语句 <!doctype html> <html> <head> <title>定义局部变量.输出语句</title> ...