前端小白的学习之路(Vue2 一)

提示：初学vue,vue2好上手一点，记录笔记：vue的概念,声明式编程与命令式编程的区别，vue的基本使用，模板语法，常用指令

一、什么是vue

二、声明式编程与命令式编程

1.命令式编程

2.声明式编程

三、vue的基本使用

1.引入vue.js

2.设置挂载容器

3.创建Vue实例设置挂载点

四、模板语法

五、常用指令

1.v-text

2.v-html

3.v-bind

4：v-model

5.v-if 与 v-else

6.v-show

7.v-for

8.v-on

一、什么是vue

Vue.js 是一款流行的 JavaScript 前端声明式编程范式的框架，用于构建交互式的 Web 用户界面。Vue 专注于通过简单的 API 提供高效的响应式数据绑定和组件化系统，使开发者可以更轻松地构建现代化的单页面应用（SPA）和动态网页。

Vue 具有以下特点和优势：

响应式数据绑定：Vue 使用双向数据绑定机制，当数据发生变化时，视图会自动更新。这使得开发者无需手动操作 DOM，提高了开发效率。
组件化开发：Vue 支持组件化开发，可以将页面拆分成多个独立、可复用的组件。每个组件可以拥有自己的状态和逻辑，使得项目结构更清晰、可维护性更高。
简洁明了的 API：Vue 提供了简单清晰的 API，易于学习和使用。它的核心库只关注视图层，更容易集成到现有项目中。
灵活性：Vue 提供了丰富的功能和选项，可以满足不同项目的需求。开发者可以选择使用 Vue Router 进行路由管理、Vuex 进行状态管理，或者与其它第三方库和工具结合使用。
高性能：Vue 的设计追求高效性能，通过虚拟 DOM 和异步更新等机制，尽可能减少对真实 DOM 的操作，从而提高页面渲染效率。
社区支持和生态系统：Vue 拥有庞大的社区和活跃的开发者社区，有大量的插件、工具和文档可供开发者使用和参考。

二、声明式编程与命令式编程

1.命令式编程

在命令式编程中，你会告诉计算机要如何执行任务，每一步的操作都需要明确指定。
开发者需要关注实现的细节，手动管理每一个操作，包括控制流程、状态变化和数据操作。
原生的JS编码方式就是命令式编程。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>开关灯</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head><body><div class="container  my_container" style="background-color: white;height: 900px; overflow: hidden;"><button class="btn btn-success mt-5 my_button ">点击开关</button></div><script>// 点击按钮改变页面背景色// 三步走// 1) 获取标签const my_button = document.querySelector(".my_button");const my_container = document.querySelector(".my_container");// 定义布尔值let isShow = true;// 2）事件绑定my_button.onclick = () => {// 3) 交互逻辑if(isShow){my_container.style.backgroundColor="red";}else {my_container.style.backgroundColor="white";}// 控制布尔值isShow = !isShow;}</script>
</body></html>

2.声明式编程

在声明式编程中，你只需要描述问题是什么，而不需要详细说明如何解决问题。
开发者更多地关注问题的抽象描述，以及数据之间的关系，而不是具体的操作步骤。
vue就是声明式编程框架

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>开关灯</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
</head><body><!-- 写法1 --><!-- <div id="app" class="container  my_container" v-bind:style="`background-color: ${isShow == true ? 'white': 'red'};height: 900px; overflow: hidden;`"><button class="btn btn-success mt-5 my_button "v-on:click="isShow=!isShow">点击开关</button></div> --><!-- 写法2： 模板--><div id="app" class="container  my_container"v-bind:style="`background-color: ${color};height: 900px; overflow: hidden;`"><button class="btn btn-success mt-5 my_button " v-on:click="addEvent">点击开关</button></div><!-- 1)  --><script src="./libs/vue@2.7.16/vue.js"></script><script>// 点击按钮改变页面背景色// 写法1:// new Vue({//     el: "#app",//     data: {//         isShow: true//     },// })// 写法2：// 创建vue实例new Vue({// 挂载容器el: "#app",// 数据data: {color: "white",isShow: true},// 方法methods: {// 自定义方法addEvent(){if(this.isShow){this.color = "red"}else {this.color = "white";}// 开关灯this.isShow = !this.isShow;}}})</script>
</body></html>

三、vue的基本使用

1.引入vue.js

官网地址：https://cn.vuejs.org/

vue2下载地址：https://v2.cn.vuejs.org/v2/guide/installation.html

    <script src="./libs/vue@2.7.16/vue.js"></script>

2.设置挂载容器

<div id="app" v-cloak></div>

v-cloak:v-cloak 是 Vue.js 提供的一个指令，用于解决在 Vue 应用中初次加载时出现的闪烁问题。

在使用vue做原生项目（没有利用webpack或者脚手架构建的项目）防止出现抖动。

3.创建Vue实例设置挂载点

const vm = new Vue({// 设置挂载点el: "#app",// 添加数据(属性)data: {return{}}，//添加方法(函数)methods:{}})

四、模板语法

Vue.js 的模板语法是一种简单直观的语法，用于将数据绑定到 HTML 中，实现动态的视图渲染。

文本插值：使用双大括号 {{ }} 将数据插入到 HTML 中，并填写js代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title>
</head>
<body><!-- 插值表达式 {{ js代码 }} --><div id="app" v-cloak><h2>{{123}}</h2><!-- 报错 直接填写abc, 既不是字符串，也不是变量 --><!-- <h2>{{abc}}</h2> --><h2>{{'abc'}}</h2><!-- 可以书写三元运算 --><h2>{{typeof 'abc' === 'string' ? '字符串类型':'其他类型'}}</h2><!-- 可以填写变量 --><h2>{{title}}</h2></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 添加属性data: {title: "标题2222"}})</script>
</body>
</html>

五、常用指令

1.v-text

设置文本

<h2 v-text="title"></h2>

2.v-html

设置超文本

<h2 v-html="title"></h2>

3.v-bind

动态绑定属性

v-bind:属性名="变量|js表达式"

简写 ：(直接冒号)

:属性名="变量|js表达式"

<div v-bind:class="isShow==true?'xxx':'yyy'">123123</div>
<!-- 填写变量(类名有多个) -->
<div v-bind:class="['box', {red: true}]"></div>
<!-- 填写变量(类名只有一个) -->
<div v-bind:class="aaa"></div>
<!-- 简写 -->
<div :class="bbb"></div>
<!-- style也是标签属性，能做成动态属性 --><!-- 因为在style属性前添加了“:”就变成了动态属性，动态属性识别的是js代码。 -->
<div :style="`width: 100px;height: 100px;background-color: yellowgreen;`"></div>
<div :style="`width: 100px;height: 100px;background-color: ${bgColor};`"></div>

4：v-model

数据双向绑定(一般用于表单元素，绑定双方有一方数据更改另一边也会改变数据)

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head>
<body><div id="app"><div class="container p-5"><input v-model="user.name" type="text" class="form-control" placeholder="请输入姓名"> <br><input v-model="user.age" type="text" class="form-control" placeholder="请输入年龄"> <br><input v-model="user.addr" type="text" class="form-control" placeholder="请输入地址"> <br><!-- v-model="keyword" 双向绑定 --><input v-model="keyword" type="text" class="form-control" placeholder="请输入关键字"><h3>{{keyword}}</h3><input style="width: 40px;height: 40px;" type="checkbox" v-model="opt"><p>{{opt}}</p></div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>// v-model 通常应用在表单收集信息的地方。//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 数据data: {keyword: "",opt: "",user: {age: 20,addr: "广州",name: "姓名"}}})</script>
</body>
</html>

5.v-if 与 v-else

v-if:接受一个布尔值，true时显示元素，false移除元素

v-else:必须跟在一个v-if后面，跟v-if的功能正好相反，不接收参数

<div v-if="true">Visible</div>
<div v-else>Not Visible</div>

6.v-show

v-show:接受一个布尔值，true时显示元素，false隐藏元素

<div v-show="true">Visible</div>

v-if与v-show的区别：

渲染方式：
- v-show 控制的元素始终被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制其显示与隐藏。即使在初始渲染时，v-show 的元素也会被渲染到页面中，只是根据条件隐藏。
- v-if 控制的元素在条件为真时才会被渲染到 DOM 中，当条件为假时，元素不会被渲染到页面中。
性能开销：
- 在初始渲染时，如果条件为假，v-show 会产生一些性能开销，因为即使元素不可见，它仍然被渲染到 DOM 中。但是，后续的切换显示状态不会有额外的性能开销。
- v-if 在初始渲染时，如果条件为假，元素不会被渲染到 DOM 中，因此可以减少一些性能开销。但是，在切换显示状态时，会涉及到销毁和重新创建元素，可能会有一些性能开销。
适用场景：
- 当需要频繁切换显示状态时，例如在 Tab 切换、动画效果等场景下，使用 v-show 更合适，因为它不会涉及销毁和重新创建元素，性能更好。
- 当元素的显示与隐藏不频繁变化，并且在初始渲染时条件可能为假时，可以考虑使用 v-if，因为它可以减少初始渲染时的性能开销。

7.v-for

列表渲染,用于在模板中进行循环渲染数组或对象的内容，生成重复的 HTML 元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css"><style>.box {width: 100px;height: 100px;border: 1px solid #ccc;}</style>
</head>
<body><div id="app"><!-- 指令: v-for 指令，循环数组。item:当前循环的元素，index:当前元素的下标--><div class="box" v-for="(item,index) in arr" :style="`background-color:${item};`">{{index}} --》{{item}}</div><!-- 表格 --><table class="table table-bordered"><thead><tr><th>序号</th><th>姓名</th><th>ID</th></tr></thead><tbody><!-- 循环result数组 --><!-- v-bind:key="每一项数据的ID(字符串|数字)" 优化列表渲染！！！ --><tr v-for="(opt,i) in result" v-bind:key="opt.id"><td>{{i + 1}}</td><td>{{opt.name}}</td><td>{{opt.id}}</td></tr></tbody></table></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;new Vue({//挂载容器el: "#app",// 数据data: {// 数组arr: ['red','green','blue'],// 数组2result:[{name: "张三", id:11},{name: "李四", id:22},{name: "赵五", id:33},{name: "孙六", id:44},]}})</script>
</body>
</html>

8.v-on

用于事件绑定，如点击事件，键盘事件等

<button v-on:click="handleClick">Click me</button>

简写：@事件

<button @click="handleClick">Click me</button>

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue</title><link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
</head><body><div id="app"><div class="container"><!-- 绑定事件 --><!-- v-on:click="foo1" 事件绑定 v-on:事件类型="方法名称"--><button class="btn btn-success" v-on:click="foo1">点击事件1</button><button class="btn btn-danger" v-on:mouseenter="foo2">鼠标移入事件</button><!-- 简写: @ @click="foo1"@事件类型="方法名称"--><button class="btn btn-primary" @click="foo1">点击事件2</button></div></div><script src="./libs/vue@2.7.16/vue.js"></script><script>//禁止控制台输出日志信息Vue.config.productionTip = false;const vm = new Vue({//挂载容器el: "#app",// 方法methods: {// 方法名称foo1() {alert("点击按钮,触发事件，执行方法！");},foo2() {alert("鼠标移入按钮，触发事件，执行方法！");}}})// 观察vue实例// console.log(vm);</script>
</body></html>