vue 基础笔记

https://cn.vuejs.org/v2/guide/
https://pan.baidu.com/s/1EMT0XR72FqTx27Z-oH3g0A

vue基础

标识一个dom的方式有 id="id"和class="class"两种
在vue的挂载点中拿到的方式可以是el:"#id"和el:".class"
一般使用id选择器，因为约定了唯一性

只有双标签才能被vue挂载，除了html和body
一般用div标签挂载是因为它没有样式

@click和v-on:click等价

v-show和v-if的效果等价 show会影响dom的display，影响的是元素的样式 if会在dom树中移除
频繁切换的元素用v-show 反之用v-if

<img v-bind:src="imgSrc" alt="">
v-bind可以省略
<img :src="imgSrc" alt="">

v-model对数据和ui进行双向绑定 一端发生变化另一端实时变化

单文件组件

后缀名是.vue 可以同时编写结构、逻辑、样式
template标签中写结构
script标签中写逻辑
style标签中写样式

使用vue serve #filename 即可开始解析 可在浏览器中访问

注意点

• template中必须有一个根节点
• script中的data写成函数，内部返回一个对象
• 使用写好的样式可以直接import

导入axios等包的方式不再是script标签 而是npm下载
使用的时候import axios as ‘axios’

vue cli

cli 对应的是命令行界面（Command Line Interface for batch scripting）
vue cli一般叫做vue脚手架 在命令行里输入命令即可很方便的创建项目结构

vue router

1. 安装
   在项目根目录下 npm install vue-router
   在main.js中导入、use、创建路由、挂载
2. 配置规则
   通过routes属性配置地址和路由管理的组件的关系
   在main.js中导入组件、routes属性中进行配置关系、path设置地址、component设置组件
3. 路由出口
   希望匹配到的组件显示在哪里就在哪里设置一个router-view的标签
4. 声明式导航
   通过 router-link 标签 设置 to 属性为地址 可以实现点击切换
   最后解析成a标签 href属性进行跳转 同时正在选中的dom有特殊的类名 所以可以直接给对应类名写css样式实现效果
5. 编程式导航
   在跳转条件存在逻辑判断的情况下，声明式导航无法满足要求 使用编程式导航
   组件中通过 this.$router.push(地址) 可以通过代码实现切换
6. 路由传参
   通过 key=value&key2=value 的方式添加参数
   组件中通过 this.$route.query 访问对应的 key 即可获取数据

// 导入 element-ui
import ElementUI from 'element-ui'
// 导入 element-ui 的样式
import 'element-ui/lib/theme-chalk/index.css';
// use一下
Vue.use(ElementUI)