vue 框架：

--构建虚拟的DOM结构，（内存内改变对象）- 操作数据的变化

框架介绍

	可以独立完成前后端分离式web项目的JavaScript框架

优点：

    三大主流框架之一：Angular React Vue

    先进的前端设计模式：MVVM

    可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

特点：

    单页面web应用

    数据驱动

    数据的双向绑定

    虚拟DOM

使用vue框架：

	下载：https://cn.vuejs.org/v2/guide/installation.html

    	开发版本: 包含完整的警告和调试模式 (.js)

        生产版本: 删除了警告  （min.js）

    引入：

    <script src="https://cdn.jsdelivr.net/npm/vue"></script> 包含了有帮助的命令行警告  或

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   优化了尺寸和速度

官网学习(api):

    https://cn.vuejs.org/v2/api/

基础格式

基本结构：

<script src="js/vue.js"></script>   // 导入vue 环境

<script>

    new Vue({

        el: "#app",

        data: {

            showBtn: true

        },

        methods: {

            handleClick: function() {

                console.log("Clicked!");

            }

        }

    });

</script>

el :  指定dom标签容器的选择器

    Vue就会管理对应的标签及其子标 （body,html除外）

data: 对象或函数类型

    指定初始化状态属性数据的对象

    vm也会自动拥有data中所有属性

    页面中可以直接访问使用

    数据代理: 由vm对象来代理对data中所有属性的操作(读/写)

methods: 包含多个方法的对象

    供页面中的事件指令来绑定回调

    回调函数默认有event参数, 但也可以指定自己的参数

    所有的方法由vue对象来调用, 访问data中的属性直接使用		this.xxx

插值表达式：

-->能够为变量进行简单的运算，字符串方法。（一步能够运算出来）

vue变量：被称为插值表达式　　{{ vue变量 }}

<div id="app">

    <p> {{ msg }}</p>

    <p> {{ num *10 }}</p>

    <p> {{ msg[1] }}</p>

    <p> {{ msg.split('') }}</p>

</div>

<script src="js/vue.js"></script>  

<script>    

	new Vue({

        el: '#app',

        data: {

            num: 10,

            msg: 'message'

        }

文本指令：

指令：

	指令（Directives）是Vue模板中最常用的一项功能，它带有前缀v-，能帮我们快速完成DOM操作、循环渲染、显示影藏

{{ }} ：将内部元素当成纯文本输出

v-text：解析文本，作用与{{}}一样  （原样输出）

v-html：解析html （能够解析html语法）

v-once: 处理的标签只能被解析一次

<body>

    <div id="app">

         <p>{{hello}}</p>

        <p v-text = 'hello'></p>

        <p v-html = 'hello'></p>

    </div>

</body>

<script src="vue.js"></script>

<script>

    new Vue({

        el:'#app',

        data:{

            hello:'<span>hello world</span>'

        }

    })

</script>

事件指令：

<!-- 完整语法 -->

<a v-on:click="xxxx">...</a>

<!-- 缩写 -->

<a @click="xxxx">...</a>

 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法:

　　v-on:事件名='变量名'　实例化Vue里面 methods关键字  为挂载点提供事件的 里面写你的：    变量名：function

<script>

    new Vue({

        el:'#app',

        data:{

            msg:'vue渲染的内容'

        },

        methods:{   //为挂载点提供事件的

            clickAction:function () {

                alert(123)

            }

        }

    })

</script>

属性指令：

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

--元素节点的 style特性和 Vue 实例的 v_style 属性保持一致”

-动态更新HTML元素上的属性

小结：

1.vue通过 v- 指令来控制标签的属性

2.vue通过 变量 数据驱动页面（操作页面内容）

js 补充（面向对象）：

js 函数：

   function f1() {

        console.log('f1 run');

    }

    f1();

箭头函数：

	let f3 = () => {    // 没有参数

        console.log('f3 run');

    };

    f3();

    // 如果箭头函数有多个参数，有返回值

    let f4 = (n1, n2) =>  n1 + n2;

    let res = f4(10, 25);

    console.log(res);

    // 如果箭头函数参数列表只有一个，可以省略()

    let f5 = num => num * 10;

    res = f5(10);

    console.log(res);

定义变量区别：

 d = 45;   //全局变量

 const c = 30 ;   // 常量

 var a = 10 ;

 let b = 20 ;

	let、const定义的变量不能重复定义，且具备块级作用域

    块级作用域： 在一个大括号内(作用范围)

eg:

    if (1) {

        var a = 10;

        let b = 20;

    }

定义类：

	// 构造函数 == 类

    function F2(name) {

        this.name = name;

        this.eat = function (food) {

            console.log(this.name + '在' + food);

        }

    }

    let ff1 = new F2("Bob");

    console.log(ff1.name);

总结：

    function可以作为类，内部会有this

    箭头函数内部没有this

    {}里面出现的函数称之为方法： 方法名(){}

   	在vue 环境内的this : 指父类对象（不是本身对象）

学习vue_01的更多相关文章

  1. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  2. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  3. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  4. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  5. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  8. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  9. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

随机推荐

  1. 《一起学netty》

    o文章摘自 netty 官网(netty.io)   netty 是一个异步的,事件驱动的网络应用通信框架,可以让我们快速编写可靠,高性能,高可扩展的服务端和客户端   样例一:discard ser ...

  2. 【Oracle】 RMAN命令汇总

    RMAN命令汇总 2013年写了关于RMAN命令的汇总,先转换为MD文档,温故而知新. 1.进入RMAN 进入本地数据库 [oracle@oracle-n1 ~]$ rman target / 进入远 ...

  3. bootstrap中的col-md-*

    一句话概括,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式 1.col是column简写:列 2.xs是maxsmall简写:超小, sm是small简写:小,  md是medium简写:中等, ...

  4. Mongodb--内存管理MMAP

    MongoDB使用的是内存映射存储引擎,即Memory Mapped Storage Engine,简称MMAP. MMAP可以把磁盘文件的一部分或全部内容直接映射到内存,这样文件中的信息位置就会在内 ...

  5. 分布式应用的未来 — Distributionless

    作者丨阿里云高级技术专家 至简(李云) 在技术变革推动社会发展这一时代背景下,大量支撑规模化分布式应用的技术创新.创造与创业应用而生,Could Native.Service Mesh.Serverl ...

  6. C#使用splitContainer控件制作收缩展开面板

    C#使用splitContainer控件制作收缩展开面板 原创 2011年07月19日 17:18:02 标签: c# / object / 扩展 / 测试 15690         最近对Squi ...

  7. C# 学习笔记 多态（二）抽象类

    多态是类的三大特性之一,抽象类又是多态的实现方法之一.抽象类是什么呢,如果把虚方法比作一个盛有纯净水的杯子,那么此时的“纯净水”就是事先定义好的方法,我们可以根据不同的需求来改变杯子中所事先盛放的是“ ...

  8. 基于cephfs搭建高可用分布式存储并mount到本地

    原文:https://www.fullstackmemo.com/2018/10/11/cephfs-ha-mount-storage/ 服务器硬件配置及环境 项目 说明 CPU 1核 内存 1GB ...

  9. 在秉火STM32F429挑战者开发板上移植Huawei LiteOS指南

    昨天在B站上突然看到了一个短视频,是在正点原子的战舰V3开发板上移植华为的Huawei LiteOS操作系统,就是这个视频:看完鸿蒙OS发布会,试用华为的物联网操作系统Lite OS(B站),于是呢, ...

  10. canvas的常用功能(电脑版)

    前言: canvas可以单独算为前端的一大知识模块, 今天就研究一下. 先做下前文铺垫: ①创建canvas <canvas id="myCanvas" width=&quo ...