1、下载

查看已安装好的版本

-------渐进式的JS框架---------

vue是什么

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架。

引入vue格式(网址引入):

// 实例化vue对象
new Vue({
el:"#vue-app"
data:{
name:"miss wu"
},
methods:{
},
watch:{
} }); el:element 需要获取的元素,一定是html中的跟容器元素

data:用于数据的存储 methods:用于存储各种方法
watch:{}:数据监听

一个简单的实例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="styles.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
{{job}}
<p>{{greet('today')}}</p>
</div> <script src="app.js">
</script>
</body>
</html>

app.js

  var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
job:'admin'
},
methods:{
greet:function (time) {
return 'Good'+'\n'+time+"!"+'....'+this.job
}
}
});

-----------------------

vue的属性和方法

双击鼠标事件:

模板指令: html和vue对象的粘合剂

数据渲染:v-text、v-html 、{{}}

控制模板 隐藏:v-if、v-show

渲染循环列表:v-for---展现之后第一行是apple,第二行是banana

事件绑定:v-on

属性绑定:v-bind

小结:

v-text="title"等价于{{title}}

前端--vue框架的更多相关文章

  1. 前端vue框架 脚手架

    1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...

  2. 前端VUE框架

    一.什么是VUE?  它是一个构建用户界面的JAVASCRIPt框架  vue不关心你页面上的是什么标签,它操作的是变量或属性 为什么要使用VUE? 在前后端分离的时候,后端只返回json数据,再没有 ...

  3. ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)

    提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...

  4. 前端vue框架 路由的安装及使用

    安装: 1.cmd下输入: npm install vue-router --save //安装路由 2.npm run dev //重新启动 使用: 1.在mian.js下引入路由 import V ...

  5. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  6. 前端vue框架 父组件与子组件之间的相互调用

    子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...

  7. 前端VUE框架-es6

    EMCAScript 6 又叫 es2015 1.常量和变量 常量: const a = "hello" 常量不能修改和重复定义 变量: let:定义一个块级作用域的变量 需要先定 ...

  8. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  9. 前端mv框架下(目前写的是vue),对组件抽象的思考

    前沿: 抽象是门大学问.前端mv框架中,以组件化的概念为主.经常会考虑抽象到组件级别,进行复用.合理的抽象,能提高效率,减少业务逻辑视图的耦合程度.不合理的抽象,则会增加代码的复杂程度. 遇到的问题 ...

随机推荐

  1. JAVA8之函数式接口

    由于JDK8已经发布一段时间了,也开始逐渐稳定,未来使用JAVA语言开发的系统会逐渐升级到JDK8,因为为了以后工作需要,我们有必要了解JAVA8的一些新的特性.JAVA8相对JAVA7最重要的一个突 ...

  2. 第七十九课 最短路径(Floyd)

    程序如下: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPointer.h&q ...

  3. Dilated Convolutions 空洞卷积

    Dilated Convolutions,中文一般称为空洞卷积或者扩张卷积,是一种改进的图像卷积方法. 扩张卷积工作示意图如下: 图a是普通的卷积,感受野是3*3,相当于扩充dilation=0 图b ...

  4. svn同步小脚本

    企业中难免会有使用svn 的怎么给svn做好备份呢 下面是用两个脚本进行同步和监控 同步脚本: #!/bin/bash i=1 while true do if [ $(expr $i % 12) = ...

  5. Python重新安装pip

    1). 下载pip安装工具: curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py 2).执行升级命令: python2.7 get-pip. ...

  6. Arch Linux 的AUR用户软件仓库

    ==== Arch 官方软件仓库, 共10998个(20190325), 使用pacman搜索安装. https://www.archlinux.org/packages/ Core 核心软件包, 2 ...

  7. 学习笔记TF042:TF.Learn、分布式Estimator、深度学习Estimator

    TF.Learn,TensorFlow重要模块,各种类型深度学习及流行机器学习算法.TensorFlow官方Scikit Flow项目迁移,谷歌员工Illia Polosukhin.唐源发起.Scik ...

  8. [转] Linux运维常见故障排查和处理的技巧汇总

    作为linux运维,多多少少会碰见这样那样的问题或故障,从中总结经验,查找问题,汇总并分析故障的原因,这是一个Linux运维工程师良好的习惯.每一次技术的突破,都经历着苦闷,伴随着快乐,可我们还是执着 ...

  9. day053 url反向解析图解 模板渲染

    一.语法 两种特殊符号(语法): {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二.变量 1. 可直接用  {{ 变量名 }} (可调用字符串, 数字 ,列表,字典,对象等) ...

  10. 1.1.10 word2010图片另存为存到图片库里,怎么修改之

    1. 打开一个文档,在图片上右击,图片另存为,在弹出的[保存文件]对话框中. 2.单击左上角的[组织]下拉列表"属性"按钮,在弹出的[图片 属性]对话框中,单击[包含文件夹]按钮, ...