vue2基础

项目搭建

1.手动搭建

1. 第一次搭建下载
    npm install vue@next
    npm install -g @vue/cli
2.创建项目
    vue create demo1     @vue/cli版本在3.0以上使用
    vue init webpack demo1   @vue/cli版本在3.0以下使用
3.启动项目
    npm run serve

2.可视化界面创建

vue ui

项目结构

node_modules 依赖文件夹
public 静态资源，正常编写城西不需要操个文件夹
- favicon.ico 页面图标
- index.html 页面文件所有的页面最终都会编译到这个文件里面并在浏览器打开
src 项目程序文件夹
- assets 静态资源目录
- components 所有组件
  - 规范：所有组件文件名首字母大写
- router 路由
- store vuex 全局状态管理（比如公共变量）
- views 页面文件夹
  - 规范：页面文件名首字母大写
    组件组合到页面，页面组合到主页面
app.vue 项目主页面文件容纳所有组件的容器面组合完毕之后被编译到 public中的index.html
vue是一个单页面的框架
App.vue 就是这个单页面的模版
views文件夹中的页面文件最终都会在App.vue中打开
App.vue最终会转化成public/index.html中的页面代码
main.js 程序主入口文件

.vue文件内结构

页面结构
- 一个根目录下只能有一个template标签，一个template只能有一个子元素（通常都是div，且通常都要设置id），所有的页面在template中写
- tempalte可以在子元素内嵌套tempalte标签非必要不推荐
逻辑代码
- script标签
- 引入文件 import
- 导出页面设置 export default{}
  - name 定义页面名字
  - data(){ return {
    所有页面数据以键值对的形式写在return中
    }}
页面样式
- style标签
- scoped 防止样式穿透（冲突，样式只在本页面生效）
- lang="less" 定义语法规则

编写页面流程

编写组件
编写页面
- 导入当前页面所需要的所有组件
  - 导入 import 首字母大写
  - 注册 components 首字母大写
  - 使用直接将注册的组建名以标签的形式用首字母大写
    单标签 <Test />
    双标签正常写
- 将组件组装成完整的页面
编写路由
- 在路由文件中的routers数组中进行路由设置
  每一个页面路由都是数组内的一个对象
  ｛
  path:'页面路由路径',
  name:'页面名字',
  component:()=>import('页面文件路径')
  ｝

基础语法

data()
是一个有返回值的函数返回值为一个对象
页面中所有用到的数据都以键值对的形式
所以页面数据也称之为 data中的属性
数据绑定
- v-bind 简写为：单项数据绑定，只能用来读取data中的数据
  通常同来设置标签上属性的值
- v-model 双向数据绑定，可以读取，也可以修改data中的数据
  通常同来跟form表单搭配使用
渲染
- {{}}模版语法
  以子元素的形式标签内
  在双括号内可以读取data 或计算属性中的值
  还可以写一些简单的单行表达式(判断。三目运算符)
- v-text
  写在起始标签上
  读取data中的数据并将其写入标签内的文本中
  等同于 innerText
- v-html
  写在起始标签上
  读取data中的数据并将其写入标签内的文本中
  等同于 innerHTML
条件语句
- v-if
- v-else-if
- v-else
  以上三个如果判断不通过则不渲染元素
- v-show
  v-show判断不通过，正常渲染元素但是会给元素加 display:none
循环语句
- v-for
  - 对象：三个参数（参数名可自定义）
    - 第一个参数对象键值对的值
    - 第二个参数对象键值对的键
    - 第三个参数索引值
  - 数组：两个参数
    - 第一个参数数组中的元素
    - 第二个参数元素索引值
      循环对象循环的是对象中的键值对
      注意！！！！
      写v-for的标签内必须写 :key
      :key的值为绝对不会重复的值首选id 次选索引值
事件绑定
- v-on：缩写 @
- 在起始标签上绑定事件及事件所触发的函数
- <p v-on:click="事件函数"></p>
- <p @click="事件函数"></p>
- 事件修饰符
  - once 当前事件只执行一次
    prevent 阻止默认事件
    stop 阻止事件冒泡
    captrue 时间捕获
    <button @click.once="say">事件修饰符</button>
- 事件传参
  <button @click="event_($event)">函数传参</button>
函数
- 所有的函数都写在methods对象里面

计算属性

以函数的形式写在 computed中
使用时直接将函数名当作data中的数据使用
以对象的形式编写时有get函数和set函数
set函数通常用来做数据的操作
- 直接修改计算属性的值时才会触发
get函数通常用来获取及输出最终的值
- 当计算属性的值被修改时触发
- 必须有返回值
- 以函数的形式写计算属性时默认编写的是get函数

侦听器

以函数的形式写在watch对象中
侦听data内数据的变化如果数据被修改则直接触发相应的函数
函数名为侦听的data中的数据名
常用于双向数据绑定（form表单）

计算属性和侦听器的区别

计算属性是数据在使用之前对数据进行处理，使用的是修改之后的数据
侦听器是数据发生变化时（数据已被修改和使用），触发侦听器

父向子传参

1. 子组件内定义一个自定义属性
  父组件内引入自组件并给子组件的自定义属性赋值（父组件中的值）

子向父传参的方法

1. 子组件中调用父组件的方法（通过自定义属性，单向数据绑定），并传入参数
1. $emit
- 在子组件内定义方法，在方法里用 this.$emit('函数名','子组件向父组件传的参数')定义自定义方法
- 在父组件内引入子组件，并在父组件中调用子组件中定义好的自定义函数
- 并定义一个函数，为子组件的方法编写事件函数
  此函数有默认参数，参数为子组件定义的函数传过来的数据
- 在父组件的data中，定义一个变量，用来存子组件传过来的数据
1. $refs
  - 在父组件中引入的子组件标签中设置 ref='名字自定义'(这里存子组件的所有数据)
  - 在父组件中通过 this.$refs.第一步自定义的名字.数据名来获取子组件中的数据

插槽

1. 如果只有一个插槽不具名插槽
  - 在子组件中需要设置插槽处写 <slot></slot>
  - 父组件中

                <子组件名>
                    任意html代码
                </子组件名>

1. 有多个插槽具名插槽
  - 子组件中
    <slot name="插槽名"></slot> 每个都需要写name 不写代码会乱
  - 父组件中
    v-slot：可以简写为#

            <子组件名>
                <template v-slot:插槽名>
                   html代码 
                </template>
                <template v-slot:插槽名>
                   html代码 
                </template>
            </子组件名>

1. 作用域插槽

子组件

 <slot name="插槽名" :属性名（自定义）="子组件data中的数据名"></slot>

父组件

            <子组件名>
                <template #插槽名="{属性名}">
                    <p>{{属性名}}</p>
                </template>
            </子组件名>

路由的嵌套

声命式

    <router-link to="跳转路径"></router-link>
    <router-view></router-view>写在想要页面显示的地方

编程式
$this.push("跳转路径") 可退回历史页面$ this.replace("跳转路径") 不可退回历史页面
$.this.go(1) 前进一个历史页面$ .this.go(-1) 后退一个历史页面