vue框架(一)

一、介绍

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

巴特西