Vue01_Vue基础入门

╰+攻爆jí腚メ 2022-12-02 12:20 314阅读 0赞

### Vue基础入门 ###

*   *   *   *  Vue入门
             *   *  引入 Vue 的 cdn
                 *  Vue入门程序 - 插值表达式
             *  Vue的基础指令
             *   *  v-text 和 v-html
                 *  v-bind 属性绑定
                 *  v-if 和 v-else 判断是否显示
                 *  v-if 、v-else-if 和 v-else 结构
                 *  v-for 遍历数组
                 *  v-on 绑定事件
                 *  v-model 数据双向绑定
                 *  v-once 只渲染元素和组件一次，后续改变将不会在DOM上渲染
             *  自定义指令
             *   *  自定义指令（不带参数）
                 *  自定义指令（带参数）
                 *  自定义局部指令
             *  Vue 计算属性 computed 
             *   *  用法示例
                 *  computed (计算属性) 和 methods 的区别？
             *  Vue 侦听器 watch
             *   *  用法示例
                 *  侦听器应用场景：判断用户名是否可用
             *  Vue 过滤器 filter
             *   *  一次过滤
                 *  多次过滤
                 *  过滤器携带参数
             *  Vue 生命周期
             *  Vue 组件化开发
             *   *  全局组件注册
                 *  局部组件注册
                 *  父组件通过 props 向子组件传值
                 *  子组件通过发起自定义事件 $emit 向父组件传值
                 *  兄弟组件之间通过事件中心传值
                 *  组件插槽 slot
                 *   *  组件插槽基本用法：
                     *  具名插槽用法：
                     *  父组件通过作用域插槽获取子组件的值：
             *  Axios 异步通信
             *  Vue Router 路由
             *   *  使用示例
                 *  嵌套路由
                 *  动态路由匹配
                 *  编程式导航

#### Vue入门 ####

*  ##### 引入 Vue 的 cdn #####

*  ##### Vue入门程序 - 插值表达式 #####

<div id="app">
        {
       {message}}
    </div>

--------------------

#### Vue的基础指令 ####

*  ##### v-text 和 v-html #####

*  ##### v-bind 属性绑定 #####

<div id="app">
        <span v-bind:title="message">鼠标悬停此处查看动态绑定的提示信息</span>
    </div>

*  ##### v-if 和 v-else 判断是否显示 #####

*  ##### v-if 、v-else-if 和 v-else 结构 #####

*  ##### v-for 遍历数组 #####

<div id="app">
        <li v-for="(item, index) in items">
            num: {
       {item.id}} message: {
       {item.message}} index: {
       {index}}
        </li>
    </div>

![在这里插入图片描述][20200830193535760.png_pic_left]

*  ##### v-on 绑定事件 #####

<div id="app">
        <button v-on:click="sayHi">Click Me</button>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center]

*  ##### v-model 数据双向绑定 #####

<div id="app">
        输入的文本：<input type="text" v-model="message"><br>
        {
       {message}}
    </div>

![在这里插入图片描述][20200830194934396.png_pic_left]

*  ##### v-once 只渲染元素和组件一次，后续改变将不会在DOM上渲染 #####

<body>
        <div id="vm" v-once>
            {
       {key}}
        </div>
    </body>
    <script> var vm = new Vue({ el: '#vm', data: { key: 'Hello, Vue' } }) </script>

--------------------

#### 自定义指令 ####

*  ##### 自定义指令（不带参数） #####

**此时，加了自定义指令 v-blu 的输入框在页面一加载时就处于选中（focus）状态**

*  ##### 自定义指令（带参数） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left]  
**指令定义对象的钩子函数：**

**bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。**

**inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。**

*  ##### 自定义局部指令 #####

![在这里插入图片描述][20201124204816136.png_pic_left]

--------------------

#### Vue 计算属性 computed  ####

**将计算出来的结果放入缓存，以节约系统的开销**

*  ##### 用法示例 #####

<div id="app">
    	
        <p>{
       {currentTime1()}}</p>
        
        <p>{
       {currentTime2}}</p>
    </div>

![在这里插入图片描述][20200830214029571.png_pic_left]  
![在这里插入图片描述][20200830214225653.png_pic_left]

*  ##### computed (计算属性) 和 methods 的区别？ #####

当依赖的属性发生改变时，计算属性与方法都会被重新调用，此时二者没有区别。
    当依赖的属性再次调用时，计算属性会自动获取数据的缓存，而不是重新调用计算属性计算过程。
    而无论依赖的属性方法是否发生变化，只要再次调用方法，就会重新执行方法的内容。
    所以计算属性的效率更高

--------------------

#### Vue 侦听器 watch ####

**响应数据的变化**

*  ##### 用法示例 #####

<div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <p>{
       {fullName}}</p>
    </div>

![在这里插入图片描述][20201124210929709.png_pic_left]

*  ##### 侦听器应用场景：判断用户名是否可用 #####

![在这里插入图片描述][20201124214236805.png_pic_left]  
![在这里插入图片描述][20201124214253344.png_pic_left]  
![在这里插入图片描述][20201124214305179.png_pic_left]

--------------------

#### Vue 过滤器 filter ####

*  ##### 一次过滤 #####

**直接将首字母变成大写**

<div id="app">
        <input type="text" v-model="msg">
        <div>{
       {msg | upper}}</div>
    </div>

![在这里插入图片描述][20201124215132147.png_pic_left]  
![在这里插入图片描述][20201124215210893.png_pic_left]

*  ##### 多次过滤 #####

**先将全部字母变成小写，再将首字母变成大写**

<div id="app">
        <input type="text" v-model="msg">
        <div>{
       {msg | lower | upper}}</div>
    </div>

![在这里插入图片描述][20201124220047537.png_pic_left]

*  ##### 过滤器携带参数 #####

<div id="app">
        <div>{
       {date | format('yyyy-MM-dd')}}</div>
    </div>

![在这里插入图片描述][20201124222812816.png_pic_left]

--------------------

*  **Axios 异步通信**

**1. 引入 Axios 的 cdn**

**2. 准备 json 文件**

{ 
      "name": "BLU",
      "url": "http://www.baidu.com",
      "page": 1,
      "address": { 
        "country": "China",
        "city": "南京",
        "street": "安德门大街"
      }
    }

--------------------

#### Vue 生命周期 ####

**主要阶段：**

*  **挂载**

**beforecreated：el 和 data 并未初始化**  
**created：完成了 data 数据的初始化，el没有**  
**beforeMount：完成了 el 和 data 初始化**  
**mounted：完成挂载**

*  **更新**

**beforeUpdate：数据更新之前**  
**updated：数据更新之后**

*  **销毁**

**beforeDestroy：实例销毁之前**  
**destroyed：实例销毁之后**

![在这里插入图片描述][20200914094618735.png_pic_left]

--------------------

#### Vue 组件化开发 ####

*  ##### 全局组件注册 #####

![在这里插入图片描述][20201124225657582.png_pic_left]

*  ##### 局部组件注册 #####

*  ##### 父组件通过 props 向子组件传值 #####

**注意点1：**  
如果在子组件 **props** 中接收的参数命名为驼峰形式（例如：**menuTitle**）  
则父组件给子组件传递的参数写法必须为短横杠形式（例如：**:menu-title=“xxx”**）  
但如果使用的是字符串模板的形式，则该不存在该限制

**注意点2：**  
如果父组件传递的是 **num=‘12’**，则子组件接收到的是字符串形式的‘12’  
如果父组件传递的是 **:num=‘12’**，则子组件接收到的是数值类型的12  
如果父组件传递的是 **pboo=‘true’**，则子组件接收到的是字符串形式的‘true’  
如果父组件传递的是 **:pboo=‘true’**，则子组件接收到的是布尔类型的true

![在这里插入图片描述][20201125003825528.png_pic_left]

*  ##### 子组件通过发起自定义事件 $emit 向父组件传值 #####

**注：通过 props 传递的值是单向的，虽然可以，但千万不要通过修改 props 传过来的值来直接修改父组件的值**

**Vue 可能会报如下警告：**

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.
    [Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。 而是使用基于属性值的数据或计算属性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left 1]

*  ##### 兄弟组件之间通过事件中心传值 #####

**点击组件A的按钮，组件B的数字加1，点击组件B的按钮，组件A的数字加10，点击父组件的按钮，两个子组件按钮失效：**  
![在这里插入图片描述][20201125215339135.png_pic_left]

*  ##### 组件插槽 slot #####

###### 组件插槽基本用法： ######

<div id="app">
        <blu>404</blu>
        <blu>有一个错误信息</blu>
        <blu></blu>
    </div>

![在这里插入图片描述][20201125220859764.png_pic_left]

###### 具名插槽用法： ######

**指定了 slot 的标签会插入到指定的插槽位置，没有指定的会插入到默认插槽**

![在这里插入图片描述][20201125221814733.png_pic_left]

###### 父组件通过作用域插槽获取子组件的值： ######

<div id="app">
        <blu :list='list'>
            
            <template slot-scope='slotProps'>
                <strong v-if='slotProps.info.id==2' class="current">{
       {slotProps.info.name}}</strong>
                <span v-else>{
       {slotProps.info.name}}</span>
            </template>
        </blu>
    </div>

![在这里插入图片描述][20201125224110269.png_pic_left]

--------------------

#### Axios 异步通信 ####

*  **1. 引入 Axios 的 js**

*  **2. 准备 json 文件**

*  **3. Axios 异步请求获取数据**

<div id="app" v-clock>
        <div>{
       {info.name}}</div>
        <div>{
       {info.address.country}}</div>
        <div>{
       {info.address.city}}</div>
        <div>{
       {info.address.street}}</div>
        <a v-bind:href="info.url">链接</a>
    </div>

**利用 v-clock 解决闪烁问题**

*  **4. 结果**  
    ![在这里插入图片描述][20200830212111651.png_pic_left]

--------------------

#### Vue Router 路由 ####

*  ##### 使用示例 #####

![在这里插入图片描述][20201126164949796.png_pic_left]

*  ##### 嵌套路由 #####

![在这里插入图片描述][20201126171203165.png_pic_left]

*  ##### 动态路由匹配 #####

![在这里插入图片描述][20201126172157745.png_pic_left]  
**注：使用 $route 进行路由组件传参耦合性高，不灵活，你还可以使用以下方式传参：**

![在这里插入图片描述][20201126173335875.png_pic_left]

*  ##### 编程式导航 #####

![在这里插入图片描述][20201126175248425.png_pic_left]  
![在这里插入图片描述][20201126175317883.png_pic_left]

[20200830193535760.png_pic_left]: /images/20221123/b6529eefa5d64265a30ac5ae4612779d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ab328a5847184b61a624e4406beb500c.png
[20200830194934396.png_pic_left]: /images/20221123/75da3a70a8d240a095e59e0cb1c1663d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/a2f73186a29544b2b446925aa05c6e75.png
[20201124204816136.png_pic_left]: /images/20221123/1e28584567ae4ec9bd309b8a32843254.png
[20200830214029571.png_pic_left]: /images/20221123/a33fcb6f6c784005a9461d20ee64beaf.png
[20200830214225653.png_pic_left]: /images/20221123/03a05a71f6dc4fef97c1c9091cfb9cea.png
[20201124210929709.png_pic_left]: /images/20221123/bdd461c2f4d8471ea7363ce1cf6e0784.png
[20201124214236805.png_pic_left]: /images/20221123/49e50505ddd54f5a92456bd3bd88d413.png
[20201124214253344.png_pic_left]: /images/20221123/b5637a26caef410ab2ffd459a55f94c6.png
[20201124214305179.png_pic_left]: /images/20221123/e08bcd5a1e35427d849369ae55b8a73b.png
[20201124215132147.png_pic_left]: /images/20221123/675181ad01a44294813614a34f45fb65.png
[20201124215210893.png_pic_left]: /images/20221123/fc89536c75e64bb28ca2cc1bbcfdddcd.png
[20201124220047537.png_pic_left]: /images/20221123/6535539e7a6448778a616652818c9946.png
[20201124222812816.png_pic_left]: /images/20221123/1310c6d2848f4bd5a3e711b93178c237.png
[20200914094618735.png_pic_left]: /images/20221123/8f826e48ccfb4970812a352308f2d4c8.png
[20201124225657582.png_pic_left]: /images/20221123/acc03c9b8d5d4fbf8ccbef53effb8b72.png
[20201125003825528.png_pic_left]: /images/20221123/fd3d5ddb8ac94e978e5d3286ae640831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221123/76a909e81e114591b9192f30f72132a5.png
[20201125215339135.png_pic_left]: /images/20221123/3fc44fdf512a4e859c9d6e1aff81f7ec.png
[20201125220859764.png_pic_left]: /images/20221123/97a60917970f49eebff869d32147807e.png
[20201125221814733.png_pic_left]: /images/20221123/a3e5c55b93934b85947eb5076e73488d.png
[20201125224110269.png_pic_left]: /images/20221123/bdb162798d664d58a39a57151c6a299d.png
[20200830212111651.png_pic_left]: /images/20221123/682e142bb8a0490fba95d73d5c4b3e9f.png
[20201126164949796.png_pic_left]: /images/20221123/b1cfe0e37fda4565af2aed68650dd377.png
[20201126171203165.png_pic_left]: /images/20221123/f1e751f7e4f9400c946845c87e337b6f.png
[20201126172157745.png_pic_left]: /images/20221123/f0a5cc9271d84fdea5609e4681217f10.png
[20201126173335875.png_pic_left]: /images/20221123/d0794cae057d4699a52ee9039ac59505.png
[20201126175248425.png_pic_left]: /images/20221123/d4a4cfd95786440db22409e1a4c9f97c.png
[20201126175317883.png_pic_left]: /images/20221123/8427672c7cfb48fbb188742a946a22f7.png