Vue网页版-基础篇

Vue网页版–基础篇：

疑难点：

1. vue组件的属性使用和不使用冒号的区别：

   • 加冒号的，说明后面的是一个变量或者表达式；
   • 没加冒号的后面就是对应的字符串字面量！

   <button :disable="true">打开</button>     输出：true 或者 false 值是变量或者Boolean类型
   
   <button disable="true">打开</button>      输出：true  值是String类型
   

2. 子组件标签的位置：将来显示子组件template中的内容

3. 子组件标签中的内容，会放在slot的位置插槽的基本使用

4. 首先：子组件标签中的内容：根据插槽名字对应渲染到slot的位置； 先填slot

   然后：子组件标签的位置：将来显示子组件template中的内容 将template中的内容，

   ​ 放在子组件标签的位置

注意：子组件和父组件是一个相对的概念！A>B>C

​ B相对于A来说是子组件；但是相对于C来说是父组件

常用指令：

1. v-for循环

   把list的每一项当做item进行循环 item : 循环每一项的内容 list : data里面的list

   v-for='item in list' 
   

2. v-on:事件=“函数名”； v-on： 简写为 @

   @click='handleclick'

   v-on:click='handleclick' 
   

   点击按钮的时候,vue实例会自动在methods中找函数名，执行里面的代码

   在vue实例中: methods:{函数名：function(){ }}

3. v-model指数据的双向绑定：

   当输入框里面的内容发生变化的时候，会重新赋值给msg;data:{msg：" "}的值也会发生变化。

   反之也然！ 然后渲染到页面

   v-model="msg"
   

4. 父组件向子组件传递绑定值

   v-bind: v-bind 可以简写为 ：

    v-bind:content="item"  
    
    :content="item"
   

5. 父组件就是vue实例

   1.创建vue实例：var app = new Vue({el:'#app'，data:{ } }) 
     vue实例中的内容：
         元素的挂载位置（值可以是css选择器或者DOM元素）  el: ""
              模型数据（值是一个对象） data: {   }
              函数调用区域：         methods: {   }
              
              
   2. 定义名为 todo-item 全局变量的子组件 
      props: 接收外部传递的内容
      template：子组件的模板   todo-item标签最终会被模板替换
      
     Vue.component('todo-item', {
       props:["content"]
       template: '<li>这是个待办项</li>' 
     })
   
   
   3.定义局部变量：TodoItem 在父组件中通过标签的形式 <todo-item ></todo-item> 使用子组件
    var TodoItem = {
       props: ['content'],
       template: "<li>{{content}}</li>"
    }
   

1.如何理解数据的响应式？

数据发生变化–页面也跟着发生变化；不需要操作DOM

所有的 DOM 操作都由 Vue来处理，编写的代码只需要关注逻辑层面即可。

2. Vue知识点：

2.1 Vue的基本使用步骤:

1. 需要提供标签用于填充数据

2. 引入vue.js库文件

3. 可以使用vue的语法做功能了

4. 把vue提供的数据填充到标签里面

2.2 v-cloak指令的用法 (插值表达式存在的问题：闪动)

1. 提供样式

   <style type="text/css">
      [v-cloak]{
           display: none;
      }
   </style>
   

2. 在插值表达式所在的标签中添加v-cloak指令

3. 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

2.3 数据填充常用的三个指令：

注意：

• {{}} 与 v-text 输出结果相同

• v-html:输出的内容（不做任何解析输出内容）

• v-text:将标签转义输出内容，所以不会有任何html样式的改变 (原样输出；如有html标签也是原样输出，html样式不变)

• 以v-开头的指令，后面的内容都是js表达式；js表达式里面：不仅写变量还可以增加字符串，这样整体来看它还是js表达式

v-text="name + ' Lee '"

1. v-text 指令用于将数据填充到标签中 和 插值表达式{{}}类似。填充纯文本但是没有闪动问题

2. v-html 指令用于将HTML片段填充到标签中，但是可能有安全问题

   适用于：ajax加载数据中包含html内容 我们需要直接显示html内容

3. v-pre用于显示原始信息，跳过编译过程；如页面直接显示 {{内容}}

2.4 事件绑定-事件修饰符

 v-on:click.prevent='handle2' 阻止默认行为
 
 v-on:click.stop='handle1'    阻止冒泡

2.5 v-once的应用场景：

如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。

2.6 事件的基本使用

var vm = new Vue({
    el: '#app',
    data: {
        num: 0
    }, 
    methods: {
        handle: function() {
            // 这里的this是Vue的实例对象
            console.log(this === vm)
            // 在函数中 想要使用data里面的数据 一定要加this
            this.num++;
        }
    }
});

2.7 事件函数传参(重点)

1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

    <button v-on:click='handle1'>点击1</button>
   

2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件对象的名称必须是$event

   <button v-on:click='handle2(123, 456, $event)'>点击2</button>
   

methods: {
    handle1: function(event) {
       
    },
    handle2: function(p, p1, event) {
       
    }
}

2.8 按键修饰符

1. 点击delete按钮触发事件：clearContent

 v-on:keyup.delete='clearContent' 

2. 书写在script标签中（点击a（keyCode =65）标签触发事件handleSubmit

   v-on:keyup.f1='handleSubmit'
   
   // 挂载到html标签中
   Vue.config.keyCodes.f1 = 65
   

样式绑定相关语法细节： class style 都适用

数据改变，恰好style样式和数据相关联；所以页面也会改变

v-bind:style='{}'  

v-bind:style='[]'   

1、对象绑定和数组绑定可以结合使用

2、class绑定的值可以简化操作

3、问题：默认的class如何处理？

​ 回答：默认的class会保留

2.9 自定义样式绑定

规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

书写在script标签中（点击a（keyCode =65）标签触发事件handle）

v-on:keyup.aaa='handle'           

// 挂载到html标签中 
Vue.config.keyCodes.aaa = 65  

样式绑定之对象方法：

 v-bind:class="{active: isActive,error: isError}

样式绑定之数组方法：

v-bind:class='[activeClass, errorClass]'

对象和数组结合：

<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
    简化操作：
<div v-bind:class='arrClasses'></div>

<div v-bind:class='objClasses'></div>


data: {
    activeClass: 'active',
    errorClass: 'error',
    isTest: true,
    arrClasses: ['active','error'],
    objClasses: {
        active: true,
        error: true
    }
}

2.10 组件之间的传值:

1. 父组件通过属性的方式传值给子组件，两种形式

   1.父组件通过属性方式向子组件传值

   2.子组件通过props接收

   3.通过子组件template，渲染到页面上

   方式一：间接传值

   在父组件data对象中首先把内容传递给 ptitle；然后再将ptitle传递给title，

   子组件通过props接收数据，最后渲染页面

   在父组件data:{ ptitle: '动态绑定属性1' }
   
   <menu-item :title='ptitle'></menu-item>
   
   props: ['title', 'content'],
   
   template: '<div>{{title}}</div>'
   

   方式二：直接传值

   直接将内容传递给 content，子组件通过props接收数据，最后渲染页面

   <menu-item content='hello'></menu-item>
   
   props接收数据 props: ['content']
   
   template: '<div>{{content}}</div>'
   

2. 子组件向父组件传值：

   通过$emit 方式，通过事件触发向上一层触发事件 ，子组件触发的事件父组件恰好在监听，

   监听后就可以获取子组件带过来的内容，实现子组件向父组件传值的功能

2.11 组件使用中的细节点：

1. 使用is属性，处理模板中的bug

   例如：table>tbody>tr>td     select>option  ul>li  ol>li  规定只能按钮这样的结构编写
   

2. 在组件定义data时：data必须是一个函数，return 对象

   之所以这样设计之原因：

   通过一个函数返回一个对象的目的：让每个子组件都拥有独立的数据存储，

   避免多个子组件之间互相影响

<div id="app">
    <select>
        <option is='row'>11</option>
        <option is='row'>22</option>
    </select>
</div>
<script>
    // 定义：子组件
    Vue.component('row', {
        template: '<option>This is a row </option>'
    });

    // 定义：父组件
    var vm = new Vue({
        el: "#app",
    })
</script>

3. 分支结构

v-show的原理：控制元素样式是否显示 display:none样式的变化

v-if 页面是否渲染到页面

v-if 和 v-show ，都可以控制模板标签是否在页面显示

• v-if 定义的标签，变量值为false;标签就不会存在于DOM元素之上了
• v-show 定义的标签，变量值为false;标签对应的DOM依然存在，只是以display： none 的形式放在页面之上

结论：v-show 性能较高

4. computed计算属性:内置缓存

fullName依赖两个变量firstName、lastName它依赖的值如果没有任何改变，它是不会重新计算的；会沿用上次计算的结果如果它依赖的值发生了改变，会重新计算一次

（例如在控制台：vm.firstName="Mick"）

computed: {
    fullName: function() {
        console.log('计算了一次');
        return this.firstName + " " + this.lastName
    }
}

使用methods方法和使用计算属性，可以达到同样的效果但是：计算属性默认有缓存机制，性能更高
例如：在控制台 vm.age = 90此时改变的虽然是age,页面只要重新渲染fullName方法就会重新执行一次；methods方法内部没有缓存机制

methods: {
    fullName: function() {
        console.log('计算了一次');
        return this.firstName + " " + this.lastName
    }
}

watch 和 computed ,都有缓存的机制但是：computed代码更简洁，性能高

watch: {
    firstName: function() {
        console.log('计算了一次');
        this.fullName = this.firstName + " " + this.lastName;
    },
    lastName: function() {
        console.log('计算了一次');
        this.fullName = this.firstName + " " + this.lastName;
    }
}

5. template模板占位符

可以帮助我们包裹一些元素，但是在循环的过程中不会被渲染到页面上

6. 前端组件化

• 个人理解每个组件就是页面的一个区域可以把页面由原来的一个整体，拆分成每个部分；

  每个部分称为一个组件好处：合理的拆分组件可以将一个大型的项目，像拼积木一样拼接起来

• 一个大型的项目业务逻辑比较复杂；但是经过拆分每个组件变得精小，

  这样每个组件的维护相对容易代码易于维护

现实中的组件化思想体现：

1.标准。这些组件要想统一的组装在一块儿，必须有统一的标准；有了标准规范，不同的程序员编写的代码是通用的。

2.分治。不同的功能封装在不同的组件中，这样每个组件都可以独立的进行开发；这样有利于独立的团队进行独立开发
3.重用。代码的重用可以提高开发效率

4.组合。组件之间通过组合的方式，可以形成新的产品。

7. 路由的基本概念与原理

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为：

后端路由：

• 概念：根据不同的用户URL请求，返回不同的内容

• 本质：URL请求地址与服务器资源之间的对应关系

  解析：

  • 在浏览器输入指定的URL地址，到服务器查找对应的资源，这次请求会被后端路由拦截；

  • 后端路由会查找指定的资源内容，找到之后再通过后端路由把指定的内容发送给浏览器渲染。

  • 浏览器输入新的URL地址，依然会被后端路由拦截，后端路由把找到的内容发送给浏览器渲染。

  • 总结：后端路由根据不同的URL地址分发不同的资源。

路由的演变过程：

前期一般采用后端渲染（存在性能问题）：
假设用户与服务器经常有提交表单的数据交互行为，后端路由就会造成网页的频繁刷新，用户体验较差!

因此出现ajax技术（实现页面的局部刷新）:前端渲染提高了性能，但是ajax技术不支持浏览器的前进后退这些历史操作，
也就是说浏览器没有办法保存用户在网页上的浏览状态；

因此前端出现SPA（单页面应用程序开发技术）：
整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作

SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、
               但是hash的变化不会触发新的URL请求)。hash就是锚链接
                
在实现SPA过程中，最核心的技术点就是前端路由。

前端路由：

• 概念：根据不同的用户事件，显示不同的页面内容
• 本质：用户事件与事件处理函数之间的对应关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bVs81r2P-1589473704448)(./images/router.png)]

图例分析：用户操作浏览器的页面
每当用户触发页面事件，都会被前端路由所监听到。
前端路由会把这次操作分发给对应的事件处理函数
事件处理函数就会渲染相应的内容，从而呈现给用户。
用户再次触发新的事件，也是执行上面的过程...