学习Vue3

搭建环境

1.vue的脚手架创建

准备工作安装nodejs

npm init vue@latest
npm install
npm run dev

2.了解目录分析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

• assets: 放置一些图片，如logo等。
• components: 目录里面放了一个组件文件，可以不用。
• App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
• main.js: 项目的核心文件。
• index.css: 样式文件。 |
  | static | 静态资源目录，如图片、字体等。 |
  | public | 公共资源目录。 |
  | test | 初始测试目录，可删除 |
  | .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
  | index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
  | package.json | 项目配置文件。 |
  | README.md | 项目的说明文档，markdown 格式 |
  | dist | 使用 npm run build 命令打包后会生成该目录 |

3.vue语法

Vue指令会根据不同的指令，针对标签实现不同的功能
指令带有v-前缀的特殊标签属性

3.1 v-html

作用：设置元素的innerHtml
语法：v-html=”表达式”

<div id="app">
       <div>{{msg}}</div>
       <div v-html="html"></div>
   </div>
   <script>
       const app = new Vue({
           el:'#app',
           data:{
               msg:'aaa',
               html:`
               <a>hello</a>
               `
           }
       })
   </script>

3.2 v-show,v-if

1.v-show
作用：控制元素的显示和隐藏
语法：v-show="表达式" 表达式值true显示 false隐藏
2.v-if
作用：控制元素显示隐藏（条件）
语法：v-show="表达式" 表达式值true显示 false隐藏
区别在于v-show 只是针对于元素的display属性而v-if的话是根据表达式来判断元素是否存在

<!-- 
    v-show：切换元素的css的display:none;来控制显示隐藏
    v-if：根据判断条件来控制元素的创建和移除
-->
    <div id="app">
       <div v-show="flag" class="box">我是v-show控制的盒子</div>
       <div v-if="flag" class="box">我是v-if控制的盒子</div>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                flag:false
            }
        })
    </script>

3.3 v-else,v-else-if

v-else和v-else-if不能单独使用必须是在v-if后面组合使用

<div id="app">
    helloworld
    <hr>
 <p v-if="gender === 1">男</p>
 <p v-else>女</p>
 <hr>
 <p v-if="score>=90">成绩大于90为A</p>
 <p v-else-if="score>=80 && score<=90">成绩大于80小于90为B</p>
 <p v-else-if="score>=60 && score <=80">成绩大于60小于80为C</p>
 <p v-else>成绩小于60为D</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            gender:1,
            score:88
        }
    })
</script>

3.4 v-on和v-for

3.4.1 v-on

1.作用：注册事件 = 添加事件+提供处理逻辑
2.语法

• v-on:事件名 =”内联语句”
• v-on:事件名 =”method中的函数”

  <div id="app">
       <button @click="count++">内联语法</button>
       <button v-on:click="add">函数</button>
       <button v-on:click="add1(2)">传参数+2</button>
       {{count}}
     </div>
     <script>
         const app = new Vue({
             el:'#app',
             data:{
                 count:0
             },
             methods:{
                 add(){
                     this.count++;
                 }
                 add1(num){
                     this.count+=num;
                 }
             }
         })
     </script>

  v-for 遍历list

  <tr class="tr_class" v-for="item in list1" :key="item.id">
       <td class="td_class">{{item.id}}</td>
       <td class="td_class">{{item.name}}</td>
       <td class="td_class">{{item.age}}</td>
       <td class="td_class">
         <slot :row="item"></slot>
       </td>
     </tr>

3.5.插值语法

使用符号来插入标签内的值

3.6.v-bind 用于给标签属性进行绑定值

v-bind可以简写==>:href

<div id="root">
    <h1>hello world</h1>
   <a :href="url">点我去百度</a>
   <!--:href等同于v-bind,当加了这个指令的时候vue就会把属性中的值转化成表达式，可以用作与任何属性上-->
</div>
<script type="text/javascript">
 Vue.config.productionTip = false
 const vm = new Vue({
 el:'#root',
 data:{
 url:'www.baidu.com'
 }
 })
</script>

3.7.双向数据绑定

<!--单向双向绑定-->
    <!--
        这种绑定性质你在修改了data中的name 输入框也会跟着变，但是输入框变name属性不会变，4
        因为通过bind是单向的将name绑定在了输入框，并没有将输入框和name绑定在一起，
        这个时候可以使用v-model来将标签值和data进行双向绑定任何一方修改了另外一方能知道
    -->
    <div id="root">
       姓名：<input type="text" :value="name"/>
       <!--使用v-model来进行双向数据绑定-->
       <!--使用v-model只能用于表单类绑定value属性，或者说有输入值的元素中-->
       姓名：<input type="text" v-model:value="name"/>
       <!--简写v-model-->
       姓名：<input type="text" v-model="name"/>
    </div>
    <script type="text/javascript">
     Vue.config.productionTip = false
     const vm = new Vue({
     el:'#root',
     data:{
        name:'faith'
     }
     })
     
    </script>

4.vue的生命周期

• 1.beforeCreate 初始化之前 vm没有_data
• 2.created 初始化后 vm实例化完成
• 3.beforeMount 页面还是最开始的dom
• 4.mounted 页面转化为vue的虚拟dom
• 5.beforeUpdate 数据更新之前 数据是新的 但是页面不是最新的
• 6.updated 数据更新之后 页面和数据都是最新的
• 7.beforeDestroy 销毁之前 所有data method 指令都还是可用状态 一般用于销毁前关闭定时器 取消订阅消息 解绑自定义事件
• 8.Destroy 销毁动作

5. vue组件通信

组件存放目录问题(组件分类)
分类开来更易维护

• src/views文件夹
• 页面组件 - 页面展示 - 配合路由用
• src/components文件夹
• 复用组件 - 展示数据 - 常用于复用
  父子通信使用props
  子父通信使用emit
  除此之外使用eventbus

6.vue 插槽

6.1 概念

插槽：让组件内部的一些结构支持自定义
比如一个弹出框只有中间的操作内容不一致，那么可以使用插槽

<template>
  <div>
    <SlotDemo>
      小明
    </SlotDemo>
    <SlotDemo>
      小红
    </SlotDemo>
  </div>
</template>
<script>
import SlotDemo from './components/SlotDemo.vue';
export default{
  name:'App',
  components:{
    SlotDemo
  }
}
</script>

插槽组件

<template>
  <div>
    你好我是
    <slot></slot>
  </div>
</template>

6.2 插槽的默认值

还可以给插槽一个默认值
默认值
当 内没有插值的时候会使用默认值，有值就会覆盖

6.3 具名插槽

当多个地方有不确定因素的时候，可以使用多插槽,使用template包裹

<SlotDemo>
  <template #stuName>
  小王
  </template>
  <template #age>
  16
  </template>
</SlotDemo>
<br>
<SlotDemo>
</SlotDemo>

7.Vue-Router

vue2使用vue-router步骤

7.1 安装vue-router包

npm install vue-router@2

7.2 引入vue-router

import VueRouter from 'vue-router'
Vue.use(VueRouter)
//配置路由规则
const router = new VueRouter({
  routes:[
    {path:'/',component:Find},

    {path:'/find',component:Find},
    {path:'/Friend',component:Friend},
    {path:'/My',component:My},
    //可以配置自定义类名来指定高亮的css
      linkActiveClass:'active',
      linkExactActiveClass:'exact'
  ]
});
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App页面

<template>
  <div>
    <div id="app">
    <a href="#/find">发现</a>
    <a href="#/my">我的</a>
    <a href="#/friend">我的朋友</a>
  </div>
  <div style="width: 100%;height: 300px;">
    <router-view></router-view>
  </div>
  </div>
</template>

7.3 实现高亮

html页面

<template>
  <div>
    <div id="app">
    <router-link to="/find">发现</router-link>
    <router-link to="/my">我的</router-link>
    <router-link to="/friend">我的朋友</router-link>
  </div>
  <div style="width: 100%;height: 300px;">
    <router-view></router-view>
  </div>
  </div>
</template>

css样式

/* router-link-exact-active 属于是精确匹配 /find路劲那么只能是输入/find */
/* router-link-active 属于是模糊匹配 /find路劲那么输入/find/one /find/two 也能触发高亮 但是不能显示内容 */
#app a.router-link-exact-active{
  background-color: brown;
}