vue框架(一)
一、介绍
1、Vue是什么?
Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
2、指令:
通过指令，来给DOM元素赋值或者其它操作：v-text v-html
根据表达式的真假值，动态地插入、移除元素：v-text v-html v-if\v-else
根据表达式的真假值，动态地显示、隐藏元素：v-show
根据数值渲染元素列表：v-for
绑定元素的属性，可以动态改变：v-bind
根据命令监听且执行事件：v-on
v-model：数据双向绑定
它是把视图和数据进行双向绑定，通过视图可以改变数据，也可以通过数据改变视图
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的
el:
类型：string | HTMLElement
限制：只在由 new 创建的实例中遵守。
详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
例如：el: "#app" data：
类型：Object
定义数据，例如： data:{n:1,m:2} methods
类型：Object
包含函数
例如：methods:{fun:function(){}}
因此在文档中经常会使用vm (ViewModel 的简称) 这个变量名表示 Vue 实例。
当创建一个 Vue 实例时，你可以传入一个选项对象。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
vue指令示例：
#声明式渲染：Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}) #条件：控制切换一个元素的显示也相当简单：
#v-if
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
# v-show
<div id="app-3">
<p v-show="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
#v-if 与v-show的区别是：为false的情况下，v-show 的标签还在文档树中，属性改为display-none，而v-if不在文档树中 #循环
#v-for指令可以绑定数据到数据来渲染一个列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}) #绑定：v-bind 指令可以更新 HTML 属性
#在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定
<div id="app">
<a v-bind:href="url">baidu</a>
</div>
var app = new Vue({
el: '#app',
data: {
url: '"http://www.baidu.com"'
}
})
#缩写：<a :href="url">...</a> #数据双向绑定
# v-model
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select> <div id="output">
选择的网站是: {{selected}}
</div>
</div> <script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script> #事件绑定
#v-on
<body>
<div id="v_model">
<input type="text" v-model="show_temp">
<p>{{ show_temp }}</p>
<input type="button" value="click me" v-on:click="show_button">
<select v-model="show_select" >
<option value="111" selected>111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
</div> </body>
<script>
var vm = new Vue({
el: "#v_model",
data: {
show_temp: "",
show_select:"111"
},
methods:{
show_button:function () {
alert(this.show_select)
}
}
})
</script>
3、数据发送
1、axios.get
<body>
<div id="vue_axios">
<input type="button" value="click me" v-on:click="show_click">
<ul>
<li v-for="item in city_list">
{{ item.cityName }}: {{ item.cityCode }}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#vue_axios",
data: {
city_list: []
},
methods: {
show_click: function () {
url = "hotcity.json";
var self = this; axios.get(url)
.then(function (response) {
self.city_list = response.data.data.hotCity;
console.log(response.data.data.hotCity)
})
.catch(function (err) { })
}
}
})
</script>
axios.get
2、axios.post
<body>
<div id="axios_post">
<input type="text" >
<input type="password">
<input type="button" value="login" v-on:click="login">
</div> </body>
<script>
var vm = new Vue({
el:"#axios_post",
data:{
name:"",
pass:""
},
methods:{
login:function () {
url = "hotcity.json";
axios.post(url,
{
name:this.name,
password:this.pass
},
{"headers":{"Content-Type":"application/x-www-form-urlencoded"}})
.then(function (response) {
console.log(response)
}).catch(function (err) { })
}
}
})
</script>
axios.post
vue框架(一)的更多相关文章
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...
- Vue框架下的node.js安装教程
Vue框架下的node.js安装教程 python服务器.php ->aphche.java ->tomcat. iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...
- Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- Vue框架
Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- zombie process
僵尸进程:子进程退出后,父进程还没有回收子进程的资源,那么这个子进程就处于僵尸状态.Q1:“资源”是些什么?Q2:父进程如何回收子进程的资源? 内核为每个终止子进程保存了一定量的信息,所以当终止进程的 ...
- android-studio于java相关
1.安装和配置 在安装完成android-studio后,启动,配置project structure.包括SDK.JDK等,此开发工具需要自行下好,软件无自带. 配置完成后,通过:File--& ...
- Xcode7中你一定要知道的炸裂调试神技【转载】
Xcode7中苹果为我们增加了两个重要的debug相关功能.了解之后觉得非常实用,介绍给大家. 1.Address Sanitizer: 妈妈再也不用担心 EXC_BAD_ACCESS EXC_BAD ...
- 机器人的运动范围 剑指offer66题
include "stdafx.h" #include<vector> #include<algorithm> #include<string> ...
- PCB焊接工艺
1. 有铅焊接工艺 240~260℃. 2. BGA焊盘直径为球径80%.
- 深度历险：Redis 内存模型详解
https://mp.weixin.qq.com/s/Gp6Ur7omGY6ZqDWygU2meQ Redis 是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说 Redi ...
- SSH框架解析
当也许能够说是与你的初恋.妙龄的少女開始有些羞涩.是时候说说SHH的故事了.SHH是指Spring+Struts+Hibernate.还记研究生复试那天的面试,老师说了一句话Spring的核心是控制反 ...
- .NET 单点登录解决方案
这里指的单点,泛指在WEB服务端,一个账户同一时刻只能存在一个票据! 大家开发中可能都碰到的一个问题,怎么使同一个用户,在同一时间内只允许登录一次. 很多人都会想到在数据库中用一个标识字段,登录进去置 ...
- Ionic 取消自带动画效果
$ionicConfigProvider.views.transition('none'); 或: <ion-view view-title="个人中心" animation ...
- 数据库的SQL模式
1.定义:何为MySQL的严格模式,简单来说就是MySQL自身对数据进行严格的校验(格式.长度.类型等),比如一个整型字段我们写入一个字符串类型的数据,在非严格模式下MySQL不会报错,同样如果定义了 ...