Vue 学习笔记 （一）

目的：本教程将结合flask和vue制作一个前后端分离的网站

1. vue 相关操作指令

//创建vue工程：
vue init webpack {{工程名称}}
//工程根目录下
 npm run dev

2. vue 启动顺序

index.html -> main.js ->App.vue

3. vue 新建组件

//compents目录下
1.新建vue文件（MyCompents.vue 命名规则 一般首字母大写）
2.在需要引用的文件内导入入，（如此时我需要在app.vue下引用MyCompents.vue）
 （1）在<script></script>内写入 import MyCompentsfrom './components/MyCompents'。
 （2）在 export 内 填入
 ｛
    ......
    "mycompents":MyCompents //前者为你要在本文件内引用的名字,注意不可以与当前系统标签冲突，否则无法使用
  ｝
  （3）在<template></template>内写入<mycompents></mycompents>

4. vue css作用域

<style >...</style> //样式内容作用于全局
<style  scoped>...</style> //样式作用为本文件内

5. vue 绑定点击事件

vue中，你可以给任何组件绑定点击事件，绑定的方法如下

<h1 v-on:click="changeTitle">{{title}}</h1>
//在这里，我向h1标签绑定了一个changeTitle的点击事件,
//该事件需要写入当前文件下的methods内：
 ......
 methods:{
        changeTitle:function () {
          console.log("修改title");
        }
      }

.6 vue 侦听器使用

侦听器广泛应用于人机交互标签，用于绑定输入内容和对应变量的值

<input v-model="question">
//这里绑定了该input标签和变量question变量。当input发生变化是，question也会随之变化（这里的question若为数组，并且输入为多选框，则同时会自动添加和删除）

7. vue 条件渲染

<h2 v-show="showH2">我可以隐藏</h2>
//当showH2为true时，显示，反之隐藏

8. vue