1.基础

1.1.简介

JavaScript 框架
简化 Dom 操作
响应式数据驱动

1.2.第一个 vue 程序

导入开发版本的 Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建 Vue 实例对象，设置 el 属性和 data 属性

var app = new Vue({ 
    el: '#app', 
    data: { 
        message: 'Hello Vue!' 
    } 
})

使用模板语法把数据渲染到页面

<div id="app"> 
    {{ message }} 
</div>

1.3.el 挂载点

el 用来设置 vue 实例挂载（管理）的元素。

作用范围 {{ }} 只在 el 选中的选择器中生效。即 vue 会管理 el 命中的元素及其内部的后代元素。
适用的选择器一般都是适用的，但开发中建议使用 id 选择器，保证其唯一性。
适用的 Dom 元素适用于其他的双标签，但不适用与 body 和 html 标签。

1.4.dara 数据对象

vue 中用到的数据定义在 data 中。
data 中可以写复杂类型的数据。
使用复杂类型的数据，根据 js 语法。

2.vue 指令

vue 指令，指以 v- 开头的一组特殊语法。

1.v-text

<div id="app"> 
    <h2 v-text="message">被替换的内容</h2>
    <h2>不被替换的内容 - {{ message }}</h2>
    <h2 v-text="message + ' - 拼接的字符串' ">被替换的内容</h2>
    <h2>{{ message + ' - 拼接的字符串' }}</h2>
</div>

2.v-html

设置标签的 innerHTML

<div id="app"> 
    <!-- 与 js 中的 innerText 与 innerHTML 类似 -->
    <!-- v-text 只会解析为文本 -->
    <!-- v-html 有 htmll 结构会被解析为标签 -->
    <h2 v-text="message">被替换的内容</h2>
    <h2 v-html="message">被替换的内容</h2>
</div>

var app = new Vue({ 
    el: '#app', 
    data: { 
        message: '<a href="#">链接</a>'
    } 
})

3.v-on 绑定事件

为元素绑定事件

<div id="app"> 
    <input type="button" value="事件绑定" v-on:click="方法">
    <input type="button" value="事件绑定" v-on:mouseenter="方法">
    <input type="button" value="事件绑定" v-on:dblclick="方法">
    <!-- 指令可以简写为 @ -->
    <input type="button" value="事件绑定" v-on:click="m">
    <input type="button" value="事件绑定" @click="fun">
    
</div>

var app = new Vue({ 
    el: '#app', 
    data: { 
       message: 'hello'
    },
    //绑定的方法定义在 methods 属性里
    methods: {
        m: function(){
            //方法逻辑
        },
        fun: function(){
            //方法逻辑，使用 this 访问数据
            this.message = "new";
        }
    }
})

4.v-show 元素的显示和隐藏

根据表达式的真假，切换元素的显示和隐藏。原理是修改元素的 display ，根据指令后内容的布尔值。

<div id="app"> 
     <img src="地址" alt="img1" v-show="true">
     <img src="地址" alt="img2" v-show="isShow">
     <img src="地址" alt="img3" v-show="age>=18">
</div>

var app = new Vue({ 
    el: '#app', 
    data: {
        isShow: true,
        age: 20
    }
})

5.v-if 元素的显示和隐藏

根据表达式的真假，切换元素的显示和隐藏。原理是操纵 dom 元素，移出 dom 树，重新添加，消耗较大。

<div id="app"> 
     <img src="地址" alt="img1" v-if="true">
     <img src="地址" alt="img2" v-if="isShow">
     <img src="地址" alt="img3" v-if="age>=18">
</div>

var app = new Vue({ 
    el: '#app', 
    data: {
        isShow: true,
        age: 20
    }
})

6.v-bind 元素的属性

设置元素的属性，如 src，title，class 。简写直接省略 v-bind ,只保留 :属性名。

<div id="app"> 
     <img v-bind:src="imgSrc" alt="img1">
     <img v-bind:title="imgTitle + '!' " alt="img2">
     
     <img v-bind:class=" isActive?'active':'' ">
     <img v-bind:class="{active:isActive}">
</div>

var app = new Vue({ 
    el: '#app', 
    data: {
        imgSrc: "图片地址",
        imgTitle: "",
        isActive: false
    }
})

7.v-for

根据数据生成列表结构。与数组结合使用，语法是 (item，index) in 数据

<div id="app"> 
    <ul>
        <li v-for="item in arr"> {{ item }} </li>
    </ul>
    <ul>
        <li v-for="(item,index) in arr" :title="item">{{ index }} {{ item }} </li>
    </ul>
    <ul>
        <li v-for="(item,index) in objArr">{{ index }} {{ item.name }} </li>
    </ul>
</div>

var app = new Vue({ 
    el: '#app', 
    data: {
        arr: [1,2,3,4,5],
        objArr: [
            {name:"zs"},
            {name:"ls"}
        ]
    }
})

8.v-on 自定义参数与事件修饰符

@keyup.enter 限制触发的按键为回车。还有很多别的事件修饰符文档： cn.vuejs.org/v2/api/#v-o…

<div id="app"> 
    <input type="button" value="点击" @click="todo(123)">
    <input type="text" @keyup.enter="fun">
    
</div>

var app = new Vue({ 
    el: '#app', 
    methods: {
       todo: function(num){
            consle.log(num);
        },
        fun: function(){
            alert('按了enter');
        }
    }
})

9.v-model 表单元素双向数据绑定

获取和设置表单元素的值（双向数据绑定）。更改两边的值，都会同步更新。

<div id="app"> 
    <input type="text" v-model="message"/>
    <p>{{ message }}</p>
</div>

var app = new Vue({ 
    el: '#app', 
    data: {
        message: "hello"
    }
})

3.网络应用

结合网络数据开发应用。

1.axios 网络请求库

导包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

先导入才能使用，使用get 和 post 方法即可发送对应请求。 then方法中的回调函数会在请求成功或请求失败时触发，通过其形参，获取响应内容。

axios.get(地址?key=value&key2=value2).then(function(response){}, function(err){})

axios.post(地址, {key:value, key2:value2}).then(function(response){}, function(err){})

2.axios 结合 vue

var app = new Vue({ 
    el: '#app', 
    data: {
        joke: "笑话"
    },
    methods: {
        getJoke: function(){
            var that = this;
            axios.get("https://autumnfish.cn/api/joke").then(
                function(response){
                    console.log(response.data);
                    console.log(this.joke);  //此时的this已经改变
                        that.joke = response.data; //使用提前保存起来的this。
                }, 
                function(err){}
            )
        }
    }
})

VUE 快速入门