Vue官方文档学习

骑猪看日落 2021-06-24 16:11 530阅读 0赞

使用工具：webstorm 2016.3.5；  
先配置下vue环境：[vue开发环境搭建][vue]  
验证环境搭建好了，执行下（npm run dev）:

![2789632-e0d6ffc9c791f090.png][]

vue环境搭建

接下来就可以好好学习了：

![2789632-12f0e11d2fe00c4b.png][]

大致看了下里面的内容，index.html负责页面的展示，相当于一个页面的大框架吧，app.vue是放在index.html里的部分内容，由这个来看，app里的就是放在index里的全部内容，其次是index.js就是负责控制路由的功能，然后本来想看看为什么rooter-view会包含hello，于是新建了一个head，起初不显示，后来把hello删了就显示了。这个在之后看路由的时候再做了解吧，先看看vue的用法。

## 第一章 介绍 ##

#### 1.1 申明式渲染 ####

![2789632-50d79e48622a828e.png][]

教程显示

<template>
      <div id="hello">
        <p>{
        { msg }}</p>
      </div>
    </template>
    <script>
      export default {
        name: 'head',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        }
      }
    </script>

![2789632-1ba67f6f1c5dc6b9.png][]

运行结果

这么看来，vue绑定数据的方式也真的是很方便。  
v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。

![2789632-832ab9a2c520d5ae.png][]

绑定title

使用函数的方式：

<p>{
        { message }}</p>
          <button v-on:click="reverseMessage">逆转消息</button>

![2789632-46a7febe77373f4c.png][]

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

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

![2789632-5893205858929281.png][]

## 第二章 Vue实例 ##

[vue]: https://www.jianshu.com/p/de410cefd788
[2789632-e0d6ffc9c791f090.png]: /images/20210615/8d6068db77ee4b7493e6d115e52fd519.png
[2789632-12f0e11d2fe00c4b.png]: /images/20210615/0a368ea4883b43b4bbf832d8d78b0594.png
[2789632-50d79e48622a828e.png]: /images/20210615/97e33719853b42748f3ddc5ac49556d1.png
[2789632-1ba67f6f1c5dc6b9.png]: /images/20210615/994396b3cc5a4f6a8ec832584f633a54.png
[2789632-832ab9a2c520d5ae.png]: /images/20210615/f7e8ccd0ef3140a6a3772abc5950bfb4.png
[2789632-46a7febe77373f4c.png]: /images/20210615/8a3dfed74caf43f392c9fc1819aa92a2.png
[2789632-5893205858929281.png]: /images/20210615/8c690200a6ec459a9c3bacdee4749667.png