vue学习篇01- 基础介绍

  介绍

  Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

这段话是官网上对vue的介绍,对这句话里的几个关键字解释如下:

   渐进式框架 —— 不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分。

   自底向上逐层应用 —— 由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。

只关注视图层  —— 以往的开发多属于MVC模式,是Model View Controller的缩写,MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。但vue是属于MVVM,是Model-View-ViewModel的简写。它是一种基于前端开发的架构模式,其核心是提供对                                            View 和 Model 的双向数据绑定,这使得Model 的状态改变可以自动传递给 View。Vue.js就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。

   单页面应用 ——  只有一个html文件。在vue里,我们可以把很多页面以组件的方式根据路由的变化来替代,只展示在一个html文件中。

 安装

  https://cn.vuejs.org/v2/guide/installation.html 官网解释。

  声明式渲染

  

    这是官网的例子。

     创建一个vue实例,

    el :提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。如图中的 id 为 app 的 div元素 ,也可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

    data : Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是                             数据 - 不推荐观察拥有状态行为的对象。这里data是一个对象的形式,因为此处只有一个实例。在以后的开发中,会有很多组件,每个组件中可能会存在data,这个时候的data是以函数return形式来返回数据,因为在js里,对象是引用类型,如果写成对象的

        话,在多出引用该组件,修改一个data里的数据,其他引用的位置,也会一起改变。

  指令

  vue中有很多的指令,https://www.jianshu.com/p/c4a87e1b4ef7  这里有介绍,有很多指令可以缩写,比如常用的 v-on 绑定事件,缩写为 ‘@’ 。 v-bind 绑定属性,缩写为 ‘ :’。

计算属性和侦听器

  computed 和 watch , 二者比较 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7 官网有给例子。

    我所理解为,计算属性:它是个对象,里面可以写我们自定义的函数,而这个函数名。可以直接用模板语法使用,如同data里的数据一样。当函数中所依赖的数据发生改变,就会触发这个计算属性,重新计算该函数的并返回值。

          侦听器:也是个对象,里面的函数都是用data里的数据来命名的。即可以理解成监视这个数据,当这个数据发生改变,即触发该函数。

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

    

          

原文地址:https://www.cnblogs.com/wangnothings/p/12364388.html

时间: 2024-10-27 21:22:49

vue学习篇01- 基础介绍的相关文章

JAVA学习篇--JSTL基础

JSTL是什么 JSTL(JSP Standard TagLibrary,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库. 为什么要用JSTL 我们JSP用于开发信息展现页非常方便;也可以嵌入java代码(scriptlet.表达式和声明)代码用来实现相关逻辑控制.看下面程序.但这样做会带来如下问题: jsp维护难度增加;出错提示不明确,不容易调试; 分工不明确;(即jsp开发者是美工,也是程序员); 最终增加程序的开发成本; <% if (session.getAttribute(

vue学习笔记——简单的介绍以及安装(一)

学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html 1.简单的介绍 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版

java基础学习篇01

从事了java2年开发,后来发现自己除了在网上抄袭代码之外就一无是处了,还没有在学校培训的时候那样子还愿意花时间去研究新技术,连最基础不常用的都快忘记了. 所以开始重新从最基础的开始回顾一遍,写一些博客来记录自己的学习过程. java基础语法 1.输出错误与调试信息 System类是一个用final修饰的一个类,不能被继承,没有子类.不能被实例化,因为构造方法是私有的. 包名:java.lang 帮助文档对包的描述是:提供对java编程语言的设计基础课. 全限定类名:java.lang.Obje

vue学习笔记——目录结构介绍(二)

1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里.里面包含了几个目录及文件: assets: 放置一些图片,如logo等. commponents: 目录里面放了一个组件文件,可以不用. App.vue: 项目入口文件,我们也可以直接将组建写这里,而不使用 commpo

Elasticserach学习笔记-01基础概念

本文系本人根据官方文档的翻译,能力有限.水平一般,如果对想学习Elasticsearch的朋友有帮助,将是本人的莫大荣幸. 原文出处:https://www.elastic.co/guide/en/elasticsearch/reference/current/_basic_concepts.html ElasticSearch有几个核心概念,了解它们将有助于我们的整个学习过程. 近乎实时(NRT)Elasticsearch是一个近乎实时的搜索平台.这意味着从你为一个文档建立索引到该文档可被检索

pythonchallenge之C++学习篇-01

前言 最近学习下C++,之前是python的用户,python解释器有诸多实现,其中最出名的要数C实现了,而且很多python的扩展模块可能要用C或者C++来写的,所以很有必要学习下C++了 为了避免学习语法的无聊,把pythonchallenge拿来练练手,什么?不知道这是什么?想想办法吧 我的C++环境:windows mingw中的GCC编译器 代码编辑sublime 第一关: 目的:让计算2的38次方 解决方案: 1 # include <iostream> 2 # include &

【Vue 学习系列 - 01】- 环境搭建(Win7)

1. 根据系统下载Node.js 下载地址:http://nodejs.cn/download 2. 安装Node.js 点击安装Node.js,在安装目录D:\Program Files\nodejs\下新建node_global和node_cache两个文件夹 设置global和cache npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program

汇编学习笔记01(基础知识)

自己在学习C语言的时候, 有的时候碰到自己理解不了的技术点的话, 就无从下手了, 但是这些技术点如果用汇编来理解的话, 可能非常好理解, 也更容易让大家理解, 所以感觉汇编是很强大的, 对我们学习一些其它的高级语言也很有用, 所以希望自己可以对伟大的汇编语言有一定的了解和认知, 对计算机的思维方式也有更进一步的认识, 对自己的编码习惯有一个好的影响或者改变, 同时对自己的能力有些提高吧. 1. 我们首先要知道什么是机器语言? 也就是机器指令的集合, 机器指令也就是一台机器可以正确执行的命令. 机

vue学习笔记01

事件 事件绑定 在vue中,事件绑定用v-on.v-on也可以用@click=""形式 实例1: <div class="container" id="box"> <button class="btn btn-primary" v-on:click="counter+=1">增加1</button> <p>这个按钮被点击了{{counter}}次</p&