Vue 前端

目录

什么是Vue

什么是渐进式框架？

Node.js  和npm是什么

HTML DOM 教程

Vue 教程

vue $ 作用：

DIV是什么

​

Vue.js 模板语法

HTML 属性中的值应使用 v-bind 指令,v-module。lable for

v-if

v-bind

缩写

v-bind 缩写

v-on 缩写

v-else-if

for 循环

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

就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。没有多做职责之外的事情

Node.js是一个构建在谷歌V8引擎的js运行环境。Node.js的事件驱动、非阻塞IO模型使其轻量、高效。npm是Node.js的包管理系统，是全世界最大的开发库生态系统。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm（node package manager） ：是 JavaScript世界的包管理工具,并且是 Node.js平台的默认包管理工具。通过 npm可以安装、共享、分发代码,管理项目依赖关系。从包管理的角度上来看，npm应该算是类似iOS中的CocoaPods，Java中的Maven。这样看起来就好理解多了。详细使用和原理还待深究。

cnpm，：使用淘宝 NPM 镜像。

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

	

		site : {{site}}
		url : {{url}}
		{{details()}}
	
	
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "菜鸟教程",
				url: "www.runoob.com",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 学的不仅是技术，更是梦想！";
				}
			}
		})
	

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。

通过$访问new vue的属性；

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

　   DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。

　　DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

可定义文档中的分区或节（division/section）。

　　

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

使用 v-html 指令用于输出 html 代码：

    


    

new Vue({
  el: '#app',
  data: {
    message: '菜鸟教程'
  }
})

HTML 属性中的值应使用 v-bind 指令,v-module。lable for

Vue 测试实例 - 菜鸟教程(runoob.com)


.class1{
  background: #444;
  color: #eee;
}





  修改颜色
  
  

    v-bind:class 指令
  

    

new Vue({
    el: '#app',
  data:{
      use: false
  }
});

点击汉字不管用

点击汉字管用

v-if

v-bind

缩写 v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-on 缩写

v-else-if

for 循环

https://www.runoob.com/vue2/vue-loop.html