Vue基础学习

害学习很枯燥但生活还是要继续的呀

今天我们就来学习一下Vue中相关使用知识点

目录

Vue的概念知识

定义

特点

模板语法

插值语法

指令语法

数据绑定

单向数据绑定v-bind

双向数据绑定v-model

（知识点补充）el与data的两种写法

el的两种书写方法

data的两种书写方法

理解MVVM模型

MVVM的含义：

数据代理

事件处理

事件处理

事件修饰符

键盘事件

使用方法：

 Vue中常用的按键别名：

Vue中自定义按键别名：

属性

计算属性computed

监视属性watch

计算属性和监视属性的区别：

绑定样式和渲染

绑定样式

绑定class样式

绑定style样式

渲染

指令

内置指令

常用内置指令

 举例讲解：

自定义指令

局部指令

全局指令

 总结

---

老规矩，在学习Vue的知识时先看一下学习框架：

Vue的概念知识

定义

一套用于构建用户界面的渐进式JavaScript框架。构建用户界面-->指数据让用户看到的界面效果，渐进式-->Vue可以自底向上逐层的应用。

简单应用：只需一个轻量小巧的核心库。

特点

• 采用组件化模式，提高代码复用率、且让代码复用率、且让代码更好维护
• 声明式编码，让编码人员无需直接操作DOM，提高开发效率
• 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

模板语法

插值语法

 {{}}里的就是插值语法

指令语法

v-bind: /v-xxx:

数据绑定

单向数据绑定v-bind

单向绑定（v-bind）：数据只能从data流向页面；

简写成 ：href=“url”

双向数据绑定v-model

双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data；

v-model：value 可以简写为 v-model= ,因为v-model默认收集的就是value值

⚡注意：双向绑定一般都应用在表单类元素上（如：input、select等 就是说输入类元素 有value值的）

（知识点补充）el与data的两种写法

el的两种书写方法

• new Vue时配置el属性
• 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

data的两种书写方法

• 对象式

data: {   //data的第一种写法:对象式
         name: 'psy'
       }

• 函数式

 data() {
          return {//data第二种写法：函数式
                   name: 'psy'
                  }

理解MVVM模型

Vue是基于MVVM模型！

MVVM的含义：

• M--model模型：data中的数据
• V--view视图：模板代码
• VM--viewmodel视图模型：vue实例

发现：

1. data中所有的属性最后都出现在vm身上
2. vm身上所有的属性 及 Vue原型上所有属性，再vue模板中都可以直接使用。

数据代理

含义：通过一个对象代理对另一个对象中属性的操作（读/写）

注意理解：一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

事件处理

事件处理

点我提示信息
//表示v-on:click="showInfo" 一点击就调用showInfo这个函数

事件修饰符

• prevent:阻止默认事件(常用)
• stop:阻止事件冒泡(常用)--当点击内层的div时外层的div也会受到影响则此时需要阻止冒泡
• once:事件只触发一次(常用)--该效果就是当点一次有弹窗之后再点就没有效果了
• capture:使用事件的捕获模式--捕获阶段是由外层的div到内层的div给外层的div加capture
• self:只有event.target是当前操作的元素是才触发事件
• passive事件的默认行为立即执行，无需等待事件回调执行完毕(移动端平板用的多)

键盘事件

• @keydown
• @keyup

使用方法：

@keydown.enter="showInfo"

 Vue中常用的按键别名：

• 回车 => enter
• 删除 => delete (捕获“删除”和“退格”键)
• 退出 => esc
• 空格 => space
• 换行 => tab (特殊，必须配合keydown去使用)
• 上 => up
• 下 => down
•  左 => left
•  右 => right

Vue中自定义按键别名：

Vue.config.keyCodes.自定义键名 = 键码

属性

计算属性computed

定义：要用的属性不存在，要通过已有属性（不能时已有变量的一个值）计算得来

监视属性watch

1. 当被监视得属性变化时，回调函数自动调用，进行相关操作

2. 监视得属性必须存在，才能进行监视

计算属性和监视属性的区别：

1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

绑定样式和渲染

绑定样式

绑定class样式

字符串写法

尚硅谷1

 数组写法

       

{{name}}

       

       

       

{{name}}

 对象写法

 

       

{{name}}

绑定style样式

对象写法

 

{{name}}

 数组写法

 

 

{{name}}

渲染

条件渲染:

• v-show=''布尔值/表达式
• v-if
• v-else-if
• v-else

列表渲染:

v-for 可以遍历数组、遍历对象、遍历字符串、遍历指定次数

列表排序:

• filter()
• indexOf()

指令

内置指令

指令 (Directives)： 是带有 v- 前缀的特殊属性， 职责是，当表达式的值改变时， 将其产生的连带影响，响应式地作用于 DOM。

常用内置指令

 举例讲解：

v-cloak：

 
  

     
{{name}}
  
 
 

 v-once:

    
    

        
初始化的n值是:{{n}}
        
当前的n值是:{{n}}
        点我n+1
    

自定义指令

学习自定义指令通过案例来学习：

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

•  我们先引入vue.js文件
• 准备好一个容器来存放

    

        
{{name}}
        
当前的n值是： 



        
放大10倍后的n值是： 
        点我n+1
        

        
    

 v-big是我们自定义的，然后我们在new Vue中要进行编写big这个指令：

directives: { 

                  big(element, binding) {

                                                     key = value 

                                                     key = value ...

            }

}

注意directives: { }里面的this只想都是window

directives: {
big(element, binding) { //big就是由于v-big中自定义的名称
                console.log('big', this) //注意此处的this是window
                    // console.log('big')
                element.innerText = binding.value * 10
            }
}

v-fbind解释，f表示focus，所以产生效果让其所绑定的input元素默认获取焦点。

directives: {
fbind: {
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value
                }
            }
         }

 v-big 和 v-fbind的异同：

fbind中的 inserted(element, binding) {element.focus()}

v-big 的效果相当于v-fbind只写了 

bind(element, binding) {element.value = binding.value},//指令与元素成功绑定时（一上来）

update(element, binding) {element.value = binding.value} //指令所在的模板被重新解析时

如果是要有其他特殊的需求，比如获取焦点之类的，就需要

inserted(element, binding) {element.focus()} //获取到元素的焦点

自定义命名与使用

如果命名"v-big-number"那在directives: {}中使用时要这么写：

'big-number'(element,binding){ } //big-number外面一定要加" "引号

局部指令

 
  

       
{{name}}
       
当前的n值是： 
  



//注意这里的使用情况就是局部指令

全局指令

  

       
{{name}}
       
当前的n值是： 
  

 局部指令 与 全局指令 使用情况：当比较常用的话就用全局指令，否则就用局部指令

使用总结：

自定义指令总结：

 一、定义语法：

        (1).局部指令：

              new Vue({ new Vue({

                     directives:{指令名:配置对象} 或 directives{指令名:回调函数}

                             }) 

              })

       (2).全局指令：

          Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：

       (1).bind：指令与元素成功绑定时调用。

       (2).inserted：指令所在元素被插入页面时调用。

        (3).update：指令所在模板结构被重新解析时调用。

三、备注：

          1.指令定义时不加v-，但使用时要加v-；

          2.指令名如果是多个单词，要使用kebab-case(比如"user-name")命名方式，不要用camelCase(驼峰命名法)命名。

---

 总结

以上就是对于Vue的学习框架总结~

 ~ENDING~