一、介绍

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. 蓝桥杯 如何计算 X^X = 10 来求X呢？

    题目中有说道:X的取值范围大于2小于3 高数书上中方程的近似解有讲到到:(同济第六版180页) ln(x^x)- ln(10)=0; x*ln(x) -ln(10)=0; 假设:F(x) =  X*l ...

  2. layui表格的批量删除功能

    // 批量删除功能 // 1.得到table选中行内容 // 2.得到删除需要的唯一值,一般是id; // 3.将所要删除的项加入到数组中: // 4.判断是否选中: // 5.发送ajax请求,并附 ...

  3. iOS开发--用户点击频繁，多个异步网络请求取消问题？

    一.业务环境描述 当一个view同时添加两个tableView为subView的时候,两个tableView分别为mainTable和subTable. 当用户点击mainTable上的某一条数据时, ...

  4. 【藏】使用Entity Framework时要注意的一些性能问题

    这篇文章写的很好: http://diaosbook.com/Post/2012/12/9/performance-issue-in-select-one-or-few-colums-via-enti ...

  5. cpu故障定位 top strace pstack

    一次服务器CPU占用率高的定位分析 推荐   背景:通过性能监控发现上线服务器cpu某核占用率已经达到了100%,而且是由我们的某个核心服务导致的.幸亏由于我们的服务进程由多个相同worker(线程) ...

  6. 【实用】如何在windows下快速截图？

    如何在windows下快速截图? 快速截图是很多人的需求.截图的工具和方案也很多,但是,这里给出一个通用的,被大众认为最高效的一个解决方案. 我们都知道键盘上有一个"prt sc" ...

  7. php对gzip文件或者字符串解压实例参考

    要采集一个网站,目标站采用了gzip压缩传输网页,本来应该只要发送一个http头 Accept-Encoding: identity或者干脆不发送这个头等,就可以使目标站返回没有经过gzip压缩的页面 ...

  8. 【转】Junit初体验

    Junit是用来做测试的,无论是单元测试,还是接口测试,都可以通过调用Junit来验证被调用方法的正确性.当然,要验证一个方法的正确性,还可以采用main方法,通过输出每一个result,人为比对其正 ...

  9. WPF TextBox 验证输入

    //验证输入为数字private void txt_time_KeyDown(object sender, KeyEventArgs e){ if (!((e.Key >= Key.D0 &am ...

  10. ios - 视图 渐变

    // // YViewGradient.m // AoleYou20170907 // // Created by XY IOS on 2018/4/25. // Copyright © 2018年 ...