vue框架(一)

一、介绍

1、Vue是什么?

　　Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

2、指令:

通过指令，来给DOM元素赋值或者其它操作：v-text v-html
根据表达式的真假值，动态地插入、移除元素：v-text　　v-html　　v-ifv-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