Vue入门：看这一篇就够了

话不多说，直接开干。
先来个官网实栗吧。

官网实栗

    
    

        {{message}}
    

    
    

el挂载点：
1、el是用来设置vue实栗挂载（管理）的元素
2、vue会管理el选项命中的元素及其内部的后代元素
3、可以使用其他的选择器，建议使用ID选择器
4、可以使用其他双标签，除了HTML和BODY

data数据对象：
vue中用到的数据定义在data中
data可以写复杂类型的数据，包括表达式

vue指令

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

v-text: 设置标签的文本值（textContent）

    

        
小白
        
定居在
        
{{address}}定居
    
    
    

v-text指令的作用是设置标签的内容
默认写法会替换全部内容，使用{{}}可以替换指定内容
内部支持表达式

v-html: 设置标签的innerHTML

v-html指令用来设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论什么内容，只会解析为相应文本

v-on: 为元素绑定事件

    
    
    
    
{{write}}

v-on指令为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

事件绑定的方法写出函数调用的形式，可以传入自定义参数
事件后面跟上.修饰符可以对事件进行限制。.enter可以限制触发的按键为回车键
事件修饰符有很多，详细可参考文末链接

v-show：根据表达式的真假切换元素的显示和隐藏

    
    
    
我今年{{age}}岁了
    
    

v-show指令根据真假切换元素的显示状态
原理是修改元素的display，实现显示与隐藏
指令后面的内容最终会被解析成布尔值，值为true时元素显示
数据改变后，相应元素的显示状态也会发生改变

v-if：根据表达式真假，切换元素显示与隐藏

    
    
    
我今年{{age}}岁了
    
    
枕上诗书闲处好
    
门前风景雨来佳
    
朝暮与年岁并往
    
然后与你一同行至天光

v-if指令根据表达式的真假切换元素的显示状态
原理是通过操作DOM元素来切换显示状态
表达式的值为true，元素存在DOM树中，为false则从DOM树中移除
频繁的切换使用v-show，否则使用v-if，因为前者切换消耗更小

v-bind：设置元素的属性

v-bind为元素绑定属性
完整写法是 v-bind:属性名，可以省略v-bind，只保留 :属性名
动态增删class建议使用对象方式

v-for：根据数据生成列表结构

    
    
    

        

            {{index+1}}前端热门技术：{{item}}
        
    
    

        {{item.name}}
    

v-for指令根据数据生成列表结构，语法是(item,index) in 数据
数组经常和v-for结合使用
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-model：获取和设置表单元素的值(双向数据绑定)

    
    
    
{{message}}

v-model指令便捷的设置和获取表单元素的值
绑定的数据和表单元素的值互相关联

网络请求 axios

一路走来，前端发展的过程中诞生了很多优秀的前后端交互的技术。对jQuery Ajax 、fetch 和 axios 三者进行比较，尽管 jQuery 对于现在来讲比较老旧了，但这丝毫不妨碍它是一个优秀的类库，它提供的 Ajax 功能也确实是非常好。而 fetch 后来的替代方案，本身的设计也是可圈可点的，只是现在来讲还过于稚嫩，不适用于我们业务中推广使用。相比之下，axios 可算是当打之年，从设计上、从体积上，都很适用现在的各种前端技术体系，因此，可以进一步的学习和使用这个技术。
想了解更多相关内容的同学可参考axios中文文档

使用axios进行网络交互案例

执行GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

像其他包一样，axios必须先导入才能使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取服务器响应内容或错误信息

小叮当任意门：

Vue.js中文文档

更多事件修饰符

axios中文文档

axios文档GitHub

配套学习视频

感谢点赞