一、介绍

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. SQL——使用游标进行遍历

    前两天一个同事大叔问了这样一个问题,他要对表做个类似foreach的效果,问我怎么搞.我想了想,就拿游标回答他,当时事实上也没用过数据库中的游标,可是曾经用过ADO里面的,感觉应该几乎相同. 今天闲下 ...

  2. 动态设置spring配置PropertyPlaceholderConfigurer location的路径

    在spring中经常将常用的属性放在properties文件中,然后再spring的配置文件中使用PropertyPlaceholderConfigurer引用properties文件.对于web项目 ...

  3. UML类图详解_关联关系_多对多

    在关联关系中,很多情况下我们的多重性并不是多对一或者一对多的,而是多对多的. 不过因为我们要考虑里面的导航性,如果直接搞的话就是需要去维护两群对象之间多对多的互指链接,这就十分繁杂且易错.那么我们怎么 ...

  4. 21. Merge Two Sorted Lists【easy】

    21. Merge Two Sorted Lists[easy] Merge two sorted linked lists and return it as a new list. The new ...

  5. jQuery导入代码片段并绑定事件

    a.html <div> <button class="button" >点我达</button> </div> b.html &l ...

  6. 密码学hash函数-SHA256-512

    [latexpage] Hash函数又称哈希函数.散列函数.杂凑函数.它是一种单向密码体制,即从一个从明文到密文的不可逆映射,只有加密过程,没有解密过程. Hash函数H将可变长度的数据块M作为输入, ...

  7. LeetCode207. Course Schedule

    Description There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses m ...

  8. K - Large Division 判断a是否是b的倍数。 a (-10^200 ≤ a ≤ 10^200) and b (|b| > 0, b fits into a 32 bit signed integer). 思路：取余；

    /** 题目:K - Large Division 链接:https://vjudge.net/contest/154246#problem/K 题意:判断a是否是b的倍数. a (-10^200 ≤ ...

  9. jQuery 库 - 特性

    jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTM ...

  10. TCP和UDP 协议发送数据包的大小

    在进行UDP编程的时候,我们最容易想到的问题就是,一次发送多少bytes好? 当然,这个没有唯一答案,相对于不同的系统,不同的要求,其得到的答案是不一样的,这里仅对像ICQ一类的发送聊天消息的情况作分 ...