Vue基础学习

最新推荐文章于 2024-06-21 14:30:54 发布

实习期小潘

最新推荐文章于 2024-06-21 14:30:54 发布

阅读量3.3k

点赞数 6

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_60264901/article/details/123554525

版权

笔记专栏收录该内容

27 篇文章 4 订阅

订阅专栏

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

今天我们就来学习一下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实例

发现：

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

数据代理

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

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

事件处理

<button v-on:click="showInfo">点我提示信息</button>
//表示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.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

绑定样式和渲染

绑定样式

绑定class样式

字符串写法

<div class="basic" :class="mood" @click="changeMood">尚硅谷1</div><br/><br/>

数组写法

<div class="basic" :class="classArr">{{name}}</div><br/><br/>





<div class="basic" :class="[a, b, c]">{{name}}</div>

对象写法

<div class="basic" :class="classObj">{{name}}</div><br/><br/>

绑定style样式

对象写法

<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>

数组写法

<div class="basic" :style="styleArr">{{name}}</div>

渲染

条件渲染:

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

列表渲染:

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

列表排序:

filter()
indexOf()

指令

内置指令

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

常用内置指令

举例讲解：

v-cloak：

 <!-- 准备好一个容器-->
  <div id="root">
     <h2 v-cloak>{{name}}</h2>
  </div>
 <!-- v-cloak主要是可以控制网速慢时页面出现的时间 5s后出现-->
 <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>

v-once:

    <!-- 容器 -->
    <div id="root">
        <h2 v-once>初始化的n值是:{{n}}</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

自定义指令

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

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

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

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

<script type="text/javascript" src="../js/vue.js"></script>

<!-- 准备好一个容器-->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是：<span v-text="n"></span> </h2>

<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->

        <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>

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外面一定要加" "引号

局部指令

 <!-- 准备好一个容器-->
  <div id="root">
       <h2>{{name}}</h2>
       <h2>当前的n值是：<span v-text="n"></span> </h2>
  </div>

<script type="text/javascript">
    Vue.config.productionTip = false
new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            n: 1
        },
        directives: {
            big(element, binding) {
                console.log('big', this) //注意此处的this是window
                    // console.log('big')
                element.innerText = binding.value * 10
            },
            fbind: {
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value
                }
            }
        }
    })
</script>

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

全局指令

<!-- 准备好一个容器-->
  <div id="root">
       <h2>{{name}}</h2>
       <h2>当前的n值是：<span v-text="n"></span> </h2>
  </div>

<script type="text/javascript">
    Vue.config.productionTip = false
//用配置对象的表达方法：
Vue.directive('fbind',{
    	//指令与元素成功绑定时（一上来）
    	bind(element,binding){
    		element.value = binding.value
    	},
    	//指令所在元素被插入页面时
    	inserted(element,binding){
    		element.focus()
    	},
    	//指令所在的模板被重新解析时
    	update(element,binding){
    		element.value = binding.value
    	}
    })
//用回调函数表达：
Vue.directive('big',function(element,binding){
        element.value = binding.value
})
</script>

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

使用总结：

自定义指令总结：

一、定义语法：

(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(驼峰命名法)命名。