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)在内写入 import MyCompentsfrom './components/MyCompents'。
 (2)在 export 内 填入
 {
    ......
    "mycompents":MyCompents //前者为你要在本文件内引用的名字,注意不可以与当前系统标签冲突,否则无法使用
  }
  (3)在内写入
4. vue css作用域
 //样式内容作用于全局
 //样式作用为本文件内

5. vue 绑定点击事件

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

{{title}}

//在这里,我向h1标签绑定了一个changeTitle的点击事件, //该事件需要写入当前文件下的methods内: ...... methods:{ changeTitle:function () { console.log("修改title"); } }
.6 vue 侦听器使用

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


//这里绑定了该input标签和变量question变量。当input发生变化是,question也会随之变化(这里的question若为数组,并且输入为多选框,则同时会自动添加和删除)
7. vue 条件渲染

我可以隐藏

//当showH2为true时,显示,反之隐藏
8. vue

你可能感兴趣的:(Vue 学习笔记 (一))