Vue 笔记

vue2 基础知识

我使用最多的特点就是vue的渲染和组件方法了。

模板语法

vue通过模板语法支持对html组件的渲染。

<p>
    {{message}}
</p>

在标签属性中使用v-

<div v-if="show">
    this is only shown when show=true
</div>

在JavaScript中，用id查找页面中的元素，并为其添加控制逻辑：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
/*
<div id="app">
  {{ message }}
</div>
could be used
*/

文档查阅：vue2 官方文档

组件特性

组件的基础定义方式

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

上面代码生成了一个button-container组件，可以直接这样使用

<button-container></button-container>

这些组件

• 可复用
• 有相应的生命周期和函数

vue-cli

vue脚手架是一套十分方便的工具，但是对于刚刚接触vue的人（比如我）或许不太友好。

在vue-cli中使用模块化编程。

在终端输入

vue create my-app

这就使用脚手架自动搭建了一个项目。

cd my-app
npm run serve

可以在这个项目下看到，node为我们启动了一个服务器。

src/App.vue & components/*.vue

以vue为后缀的文件，可以自动被识别。vue文件主要结构为

<template>
<div>
    <!-- root template -->    
</div>
</template>

<script>
export default {
    name: "name",
    components : {
        
    },
    props: {
        
    },
    methods: {
        
    },
    data: function () {
        return {}
    }
}
</script>

<style scoped>
</style>

• template用于声明组件内容，包括绑定内容、属性、参数和函数调用等。
• script中可以像JavaScript中那样对组件进行流程控制，由于模块化编程，所以任何需要使用的函数方法都需要重新引用。具体见组件基础中除template以外的属性。
• style可用于设计组件样式。最好加scoped以设置单个组件而不影响父组件。

public/index.html

public文件夹下的所有资源都可以直接通过浏览器访问。

index.html是我们的单页应用的节面，事先在这里使用需要的css/script。

main.js

这是程序的入口，app也是在这里挂载到index.html上去的。

vue.config.js

用于设置虚拟数据，包括端口号与路由等，具体原理还不懂，待更。

vue-cli3 project

下面实现了一个从后端获取数据的最小vue应用。

注册my-but组件

首先创建一个组件，当点击按钮时，我们就会向后端获取一次数据。

<template>
    <div>
        <button @click="handle_click" type="button" class="btn btn-info">submit</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: "my-btn",
    methods: {
        handle_click: function() {
            axios.get("/api/main", {}).then(function (response) {
                console.log(response);
            });
        }
    }
}
</script>

/api/main是服务器提供虚拟数据的接口，下面会提到。从这里看，get请求访问这里的时候我们就能得到数据。

应用按钮

现在，我们将刚刚写好的按钮组件添加到App.vue中，因为这个最后app才是被调用的最大的组件。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <mybut></mybut>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import mybut from './components/my_but.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    mybut
  }
}
</script>

<style>
</style>

mock data

然后创建虚拟数据。这里一律使用静态的数据。

1. 新建mock/data.json，里面存放我们要get的数据。

我觉得最好还是json格式吧，不仅方便编写，也容易传输解释。

2. 根目录下创建vue.config.js。

   const mockData = require("./mock/data.json");
   
   module.exports = {
       //...  
       devServer: {
           open: true,
           port: 8081,
           before(app) {
               app.get("/api/main", (req, res) => {
                   res.json(mockData);
               });
           }
       }
   };
   

   app.get的参数就是请求的路由。

后端跨域

我的后端是python语言，flask框架。

后端开发结束后，如果有需要，前端的请求访问改为http://127.0.0.1:3000，即flask服务器的端口，注意这里要设置跨域允许。

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)

@app.route("/", methods=["POST", "GET"])
def index():
    return "Hello from " + request.args.get("msg")

if __name__ == '__main__':
    CORS(app, supports_credentials=True)	# this line
    app.run(debug=True, port=3001)

vue-cli2 project

vue-cli2 vue-cli3在目录上的差别还是很明显的，所以我也尝试了vue-cli2的项目。

这里主要记录一下mock data和路由问题。

mock data

在这一版中，直接使用路由访问静态数据有点困难，除了将虚拟数据放在public文件夹下面，来提供直接网页访问之外，我在这里使用了mockjs模块来提供数据。

npm install mockjs

我在src/mock/mock.js中写入

const Mock = require("mockjs");

Mock.mock("/api/data", (req) => {
    console.log(req);
    return {
        name: "data",
        request: req,
        content: 1
    }
});

并且在main.js中记得要引用它：

require("./mock/mock.js")

这样就可以在/api/data中访问到数据了。

路由

由于我没能在vue-cli3中成功配置路由（不知道是不是vue模块换了，node中无法找到Vue构造方法），所以写在这里。

我们首先在html中为每个路由渲染的不同组件规定一个位置

<router-view></router-view>

这个标签出现的位置，即路由渲染与退出的位置。

以及一个可以点击至路由的链接

<router-link to="/main">main</router-link>

注意，这都是写在组件App上的。

定义组件，它只在我们访问/main时显示

<template>
    <div>
        <h2>
            This is from main.
        </h2>
    </div>
</template>
<script>
export default {
    name: "main"
}
</script>
<style scoped>
h2 {
    color: green;
}
</style>

router/index.js，定义路由的一些属性

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/main.vue'
import index from '../components/HelloWorld.vue'

Vue.config.productionTip = false;
Vue.use(Router);
export default new Router({
    routes: [{
        path: "/",
        name: "index",
        component: index,
        props: {
            msg: "Hello, Vue!"
        }
    }, {
        path: '/Main',
        name: "Main",
        component: Main
    }]
});

main.js中，将路由渲染到app上

import Vue from 'vue'
import App from './App.vue'
// import Router from 'vue-router'
import router from './router'
// require('./mock/mock.js');

// Vue.use(Router)
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    router
}).$mount('#app')

这就完成了一个简单的路由功能。