一、介绍

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 }}:&nbsp{{ 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框架(一)的更多相关文章

  1. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  2. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  3. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  4. Vue框架axios请求（类似于ajax请求）

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  5. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  6. Vue框架

    Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...

  7. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  8. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  9. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  10. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

随机推荐

  1. Google Chrome v48.0.2564.

    http://www.pcpop.com/doc/1/1819/1819996.shtml 摘要:谷歌浏览器Chrome Stable 稳定版迎来例行升级,新版本号为v48.0.2564.82,上一版 ...

  2. 在ubuntu下安装ns2-allinone-2.35.tar.gz

    1.软件下载 首先先下载ns-allinone-2.35.tar.gz (下载路径http://sourceforge.net/projects/nsnam/files/),将其放到你/home/my ...

  3. makefile使用注意点

    1. 小心空格 变量赋值a:=   b, 不会将b前面的空格赋值给a 大部分函数调用,特别是$(call func, param) 如果参数前面有空格,则会将空格连同参数一起传入.因此要特别小心. 使 ...

  4. linux命名空间详解_转

    转自: Linux的命名空间详解--Linux进程的管理与调度(二) Linux Namespaces机制提供一种资源隔离方案. PID,IPC,Network等系统资源不再是全局性的,而是属于特定的 ...

  5. WebException获取详细内容 记录

    http://bbs.csdn.net/topics/390883361 来自此处. 问题.某个接口.返回错误消息用的是400.所以必须知道具体的内容. using System; using Sys ...

  6. SET ANSI_NULLS ON 在T-SQL中是什么意思

    from:https://www.cnblogs.com/kekong/p/6731321.html Transact-SQL 支持在与空值进行比较时,允许比较运算符返回 TRUE 或 FALSE. ...

  7. zoj2770 Burn the Linked Camp --- 差分约束

    有n个营地,每一个营地至多容纳Ci人.给出m个条件:第i到第j个营地之间至少有k人. 问n个营地总共至少有多少人. 此题显然差分约束.要求最小值.则建立x-y>=z方程组,建图求最长路. 用d[ ...

  8. GUN C中的socket学习（一）

    socket是用于通信的工具. 套接字其实是一个广义上的进程间通信的信道.就像pipe一样,在GUN环境下socket也被用一个文件表示.不同的socket文件可以用于不同的进程间通信,甚至可以用来在 ...

  9. python 基础 10.0 nosql 简介--redis 连接池及管道

    一. NOSQL 数据库简介 NoSQL 泛指非关系型的数据库.非关系型数据库与关系型数据库的差别 非关系型数据库的优势: 1.性能NOSQL 是基于键值对的,可以想象成表中的主键和值的对应关系,而且 ...

  10. 【BZOJ3444】最后的晚餐 乱搞

    [BZOJ3444]最后的晚餐 Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋 ...