Vue学习笔记（1）（认识Vue、基础语法）

最新推荐文章于 2023-05-22 20:56:23 发布

Lu_xiuyuan

最新推荐文章于 2023-05-22 20:56:23 发布

阅读量158

点赞数

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

本文链接：https://blog.csdn.net/Lu_xiuyuan/article/details/116920587

版权

前端同时被 3 个专栏收录

21 篇文章 1 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

vue.js

7 篇文章 0 订阅

订阅专栏

Vue2.x学习笔记。原视频教程：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili
第一部分：认识Vue、Vue基本语法。

邂逅Vue.js

简单认识Vue

Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

安装

安装Vue的方式有很多：

方式一：直接CDN引入:

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

基本使用步骤

需要提供标签用于填充数据
引入vue.js库文件
可以使用vue语法实现功能了
将vue提供的数据填充到标签里

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

<script type="text/javascript">
const vm=new Vue({
  el:'#app',
  data:{
    msg:'hello vue'
  }
})
</script>

<!-- 
1.实例参数分析
  el:  元素的挂载位置（值可以是css选择器或者DOM元素）
  data:  模型数据（值是一个对象）
2.插值表达式用法
  将数据填充到HTML标签中
  插值表达式支持基本的计算操作
-->

Vue中的MVVM

View 层：

视图层
在我们前端开发中，通常就是DOM层
主要的作用是给用户展示各种信息

Model层：

数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

ViewModel层：

视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

Vue的生命周期

Vue基本语法

如何理解前端渲染

将数据填充到HTML标签中(模板+数据 => 前端渲染 => 静态HTML内容)

前端渲染方式

原生js拼接字符串
使用前端模板引擎
使用Vue特有的模板语法

插值操作

指令的本质就是自定义属性。指令的格式：以 v- 开始。

v-cloak指令

解决插值表达式存在的“闪动”问题。

解决问题原理：先隐藏，替换好值之后再显示最终的值。v-clock 指令在vue解析之后会立即删除该属性。

用法：

提供样式
```
[v-cloak]{
  display:none;
}
```
在插值表达式所在的标签添加v-cloak指令
```
<div v-cloak>
    {{msg}}
</div>
```

数据绑定指令

v-text 填充纯文本：相比插值表达式更加简洁
v-html 填充html片段：存在安全问题；本网站内部数据可以使用，来自第三方的数据不可用
v-pre 填充原始信息：显示原始信息，跳过编译过程

数据响应v-once

Vue的数据响应式可以理解为数据的变化导致页面内容的变化。

数据绑定：将数据填充到标签中。

v-once 只编译一次：显示内容后不再具有数据响应的功能。

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

<p v-once>{{message}}</p>

双向数据绑定v-model

v-model 指令用法

<input type="text" v-model="uname" />  //uname为其他数据绑定指令名

<!--例如：
<div>{{msg}}</div>
<div>
  <input type="text" v-model="msg">     //此处会与msg保持相同输出
</div>
-->

事件绑定

Vue如何处理事件

v-on 指令用法

<input type='button' v-on:click='num++' />
<!-- 简写形式 -->
<input type='button' @click='num++' />

事件函数的调用方式

<!-- 1.直接绑定函数名称 -->
<button v-on:click="say">Hello</button>
<!-- 调用函数 -->
<button v-on:click="say()">Say hi</button>

<!--
1.若事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一参数
2.若事件绑定函数调用，那么事件对象作为最后一个参数显示传递，并且事件对象的名称必须是$event
-->

事件函数参数传递

<button v-on:click="say('hi',$event)">Say hi</button>

事件修饰符

.stop阻止冒泡

<a v-on:click.stop="handle"></a>

.prevent阻止默认行为

<a v-on:click.prevent="handle"></a>

按键修饰符
- .enter 回车键
<input v-on:keyup.enter="submit"></input>
- .delete 删除键
<input v-on:keyup.delete='handle'></input>
- 此外还有.tab、.esc、.space、.up、.down、.left、.right

自定义按键修饰符

全局config.keyCodes对象

Vue.config.keyCodes.f1=112
//例子中的f1是自定义按键名，后面的值是每个按键唯一的标志符值，可以通过事件对象的KeyCode属性取得。也可以不定义按键名而直接使用标识符

动态属性绑定

动态处理属性v-bind

v-bind 指令用法

<a v-bind:href='url'></a>

缩写形式

<a :href='url'></a>

v-model 的底层实现原理分析

<input v-bind:value='msg' v-on:input="msg=$event.target.value">

class样式处理

对象语法

<div v-bind:class="{active: isActive}"></div>
<!-- 根据isActive的布尔值判断样式是否渲染
     可以添加一个this.isActive = !isActive 使得isActive在true和    false之间进行切换 -->

数组语法

<div v-bind:class="[activeClass,errorClass]"></div>
<!-- 使用activeClass="active"设置类名，若要取消类名的添加设置this.activeClass=""即可 -->

语法细节

<div v-bind:class='[activeClass,errorClass,{test:isTest}]'></div>

class绑定的值可以简化操作

//使用数组：<div v-bind:class='arrClasses'></div>
var vm=new Vue({
    el:'#app',
    data:{
        arrClasses:['active','error']
    }
})
//使用对象：<div v-bind:class='objClasses'></div>
var vm=new Vue({
    el:'#app',
    data:{
        objClasses:{
            active:true,
            error:true
        }
    }
})

默认的class会保留

style样式处理

对象语法

<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>

<!-- 简化写法 -->
<div v-bind:style="objStyles"></div>
<script>
var vm=new Vue({
  el:'#app',
  data:{
    objStyles:{
      border:"1px solid red",
      width:"100px"
    }
  }
})
</script>

数组语法

<div v-bind:style="[baseStyles,overrideStyles]"></div>

计算属性computed

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

我们可以将上面的代码换成计算属性：

OK，我们发现计算属性是写在实例的computed选项中的。

计算属性的复杂操作

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter

在上面的例子中，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（不常用）。
在需要写setter的时候，代码如下：

计算属性的缓存

我们可能会考虑这样的一个问题：

methods和computed看起来都可以实现我们的功能，
那么为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

分支循环结构

1.分支结构

v-if
v-else

v-else-if

<div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90 && score>=60'>一般</div>
    <div v-else>不及格</div>
</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        score:90;
    }
})
</script>

v-show 控制元素样式是否显示(display)

<div v-show='flag'>测试v-show</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        flag:true
    }
})
</script>

Vue中的复用问题

Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

而如果不想复用之前的元素，可以添加一个Key属性，作为区分，这样就不会再复用：

<input type="text" id="name" :key="name" v-if="isUser">
<input type="text" id="email" :key="email" v-else>

v-if和v-else

v-if控制元素是否渲染到页面，包含v-if指令的元素，根本就不会存在DOM中
- v-show控制元素是否显示（已经渲染到页面），当条件为false时，v-show只是添加了一个行内样式：display；none
- 当需要频繁切换时，使用v-show，当只有一次切换时，使用v-if

2.循环结构

v-for遍历数组

<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} +'---' {{index}}</li>
<!-- list为要遍历的数组，index为遍历索引 -->

key的作用：帮助Vue区分不同的元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

v-for遍历对象

在遍历对象时，如果只有一个值，那么获取到的是value

如果是两个，那么是value和key

组件的key属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLf7uKb4-1621221020024)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\image-20210422115829234.png)]

检测数组更新

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
<!-- event.target.value实际上是获取当前input事件发生对象（即值发生改变的表单）的value值 -->

v-model : radio

<div id="app">
    <label>
        <input type="radio" id="male" value="男" name="sex" v-model="sex" >男
    </label>
    <label>    
        <input type="radio" id="female" value="女" name="sex" v-model="sex">女
    </label>
    <h2>您选择的性别是：{{ sex }}</h2>
</div>

<script>
const vm = new Vue({
    el:'#app',
    data:{
        sex:'男'  //这里添加一个默认值，同样会反映到radio选中
    }
})
</script>

v-model : checkbox

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：
- v-model即为布尔值。
- 此时input的value并不影响v-model的值。
多个复选框：
- 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
- 当选中某一个时，就会将input的value添加到数组中。

<div id="app">
    <!-- 单选 -->
    <label>
        <input type="checkbox" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是：{{ isAgree }}</h2>
    <button :disabled="!isAgree"> 下一步 </button>
    
    <br/>
    
    <!-- 多选 -->
    <input type="checkbox" v-model="hobbies" value="篮球">篮球
    <input type="checkbox" v-model="hobbies" value="足球"> 足球
    <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
    <input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
    <h2> 您的爱好是：{{hobbies}}</h2>
</div>
<script>
const vm = new Vue({
    el:'#app',
    data:{
        isAgree:false,
        hobbies:[]
    }
})
</script>

v-model : select

和checkbox一样，select也分单选和多选两种情况。

单选：只能选中一个值。
- v-model绑定的是一个值。
- 当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。
- v-model绑定的是一个数组。
- 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

    <div id="app">
        <!-- 单选 -->
        <select name="fruits" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橘子">橘子</option>
            <option value="菠萝">菠萝</option>
        </select>
        <h2>您选择的水果是：{{ fruit }}</h2>

        <!-- 多选 -->
        <select name="fruits" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橘子">橘子</option>
            <option value="菠萝">菠萝</option>
        </select>
        <h2>您选择的水果是：{{ fruits }}</h2>
    </div>
<script>
const vm = new Vue({
    el:'#app',
    data:{
        fruit:"香蕉",
        fruits:[]
    }
})
</script>

value值绑定

值绑定，其实就是动态的给value赋值而已：

前面的value值，都是一开始在定义input时直接给定的
但在实际开发中，这些input的值可能是从data中获取的
所以我们可以通过v-bind:value动态的绑定value值

<div id="app">
    <label v-for="item in originFruits">
        <input type="checkbox" :value="item" v-model="origin">{{item}}
    </label>
    <h2>您选择的是：{{origin}}</h2>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            originFruits: ["苹果", "香蕉", "橘子", "菠萝"],
            origin:[]
        }
    })
</script>

v-model修饰符

lazy修饰符：
- 默认情况下，v-model默认是在input事件中同步输入框的数据的
- 旦有数据发生改变对应的data中的数据就会自动发生改变
- lazy修饰符可以让数据在失去焦点或者回车时才会更新
number修饰符：
- 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
- 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
- number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符：
- 如果输入的内容首尾有很多空格，通常我们希望将其去除
- trim修饰符可以过滤内容左右两边的空格

<div id="app">
    <input type="text" v-model.lazy="text1">
    <input type="text" v-model.number="text2">
    <input type="text" v-model.trim="text3">
    <h2>{{text1}}</h2>
    <h2>{{text2}}</h2>
    <h2>{{text3}}</h2>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            text1:'hello',
            text2:'1234',
            text3:'  hello world '
        }
    })
</script>

Lu_xiuyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（1）（认识Vue、基础语法）

Vue2.x学习笔记。原视频教程：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili第一部分：认识Vue、Vue基本语法。邂逅Vue.js简单认识VueVue是一个渐进式的框架，什么是渐进式的呢？渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。Vu.
复制链接

扫一扫