一、介绍

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. Mysql备份工具比较

    Mysql备份工具比较 大 | 中 | 小 [ 2012/12/25 12:10 | by Sonic ] 1. 使用automysqlbackup http://sourceforge.net/pr ...

  2. App打包上架流程(iOS转)

    由于苹果的机制,在非越狱机器上安装应用必须通过官方的Appstore, 开发者开发好应用后上传Appstore,也需要通过审核等环节. AppCan作为一个跨主流平台的一个开发平台,也对ipa包上传A ...

  3. imx6用文件io操作gpio

    具体请参考: http://blog.csdn.net/u014213012/article/details/53140781 这里要注意的是: 要让linux支持文件io方式操作gpio,首先驱动必 ...

  4. git branch merge到master

    使用merge可以合并多个历史记录的流程. 如下图所示,bugfix分支是从master分支分叉出来的. 合并 bugfix分支到master分支时,如果master分支的状态没有被更改过,那么这个合 ...

  5. 自定义实现wcf的用户名密码验证

    目前wcf分为[传输层安全][消息层安全]两种,本身也自带的用户名密码验证的功能,但是ms为了防止用户名密码明文在网络上传输,所以,强制要求一旦使用[用户名密码]校验功能,则必须使用证书,按照常理讲, ...

  6. java SAXReader

    使用SAXReader需要导入dom4j-full.jar包. dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的JavaXML API,具 ...

  7. php的下载

    前言:你的坚持,终将美好! 今天给大家说一下,php的下载,由于php的下载本身就是一个压缩包,解压缩后即可使用.所以,解压缩的过程不再赘述. 第一步:在浏览器的地址栏输入:http://www.ph ...

  8. jquery 插件 起步代码

    /** * Created by W.J.Chang on 2014/6/25. */ ;(function($) { var methods= { check: function() { retur ...

  9. 【BZOJ2199】[Usaco2011 Jan]奶牛议会 2-SAT

    [BZOJ2199][Usaco2011 Jan]奶牛议会 Description 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会.议会以“每头牛 都可以获得自己想要 ...

  10. 将DataTable转换成Json格式

    方法一: 将DataTable数据拼接成json字符串,方法如下: ///<summary> /// dataTable转换成Json格式 ///</summary> ///& ...