前端（vue）学习笔记（CLASS 1）：vue框架入门
1、vue上手
概念：vue是一个用于构建用户界面的渐进式框架
vue的两种使用方式：
1、vue的核心包开发
场景：局部模块改造
2、vue核心包&vue插件工程化开发
场景：整站开发
1、创建实例
核心步骤
1、准备容器（盒子）
2、引包（官网）-开发版本/生产版本
3、创建vue实例 new vue()
4、指定配置项->渲染数据
el指定挂载点、data提供数据
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1、准备容器 -->
{{msg}}
</div>
<!-- 2、引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
// 3、创建实例
const app=new Vue({
// 通过el来配置选择器
el:'#app',
data:{
// 通过data提供数据
msg:'hello world'
}
})
</script>
</body>
</html>运行结果如下：
2、插值表达式
插值表达式是一种vue的模板语法
作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
语法：{{表达式}}
注意点：
1、使用的数据必须存在
2、支持的是表达式，而非语句，比如if for...
3、不能在标签属性中使用{{ }}插值
3、vue的响应式特性
数据的响应式处理，也就是数据变化后，视图自动更新
如何访问或修改呢，data中的数据，最终都会被添加到实例上，也就是成为实例的属性，因此通过实例.属性名即可访问与修改
2、vue指令
vue会根据不同的指令，针对标签实现不同的功能
指令：带有v-前缀的特殊标签属性
1、v-html
例如：
<div v-html="str"></div>其中v-html指令就是设置DOM元素的innerHTML，该指令可以解析内容中的标签
2、v-show
控制元素显示隐藏
语法：v-show="表达式" 表达式值true显示，false隐藏
本质上是在利用css属性中的display:none来进行隐藏的
场景：频繁切换显示隐藏的场景
3、v-if
控制元素显示隐藏（条件渲染）
语法：v-if="表达式" 表达式值true显示，false隐藏
根据判断条件，控制元素的创建与移除
4、v-else & v-else-if
辅助v-if进行判断渲染
语法：v-else v-else-if="表达式"
注意：需要紧贴着v-if使用
5、v-on
作用：注册事件=添加监听+提供逻辑处理
语法：
v-on：事件名=‘’内联语句‘’
内联语句，也就是js代码语句
v-on：事件名=‘’methods中的函数名‘’
或者将v-on替换为@，一种简写方式
method是vue实例中的配置项，内部可以装函数，如果需要访问data配置项的数据，需要使用实例.属性名或者是this来进行访问修改
* 调用参数
如果v-on中调用了函数，可以在函数名后加上括号来进行调用参数
6、v-bind
作用：动态设置html的标签属性->src\url\title...
语法：v-bind：属性名=''表达式''
7、v-for
作用：基于数据循环，多次渲染整个元素
遍历数组的语法：
v-for="(item,index) in 数组"
item为每一行，index为数组下标
* key
key属性="唯一标识"
作用：给列表项添加的唯一标识。便于vue进行列表项的正确排序复用
8、v-model
作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容
数据变化，视图自动更新
视图变化，数据自动更新
语法：v-model='变量'