[学习笔记 Day01]Vue基础：前端梦的开始-资源刺客

vue快速上手

步骤：

准备容器
引包
创建Vue实例 new Vue()

指定配置项=>渲染数据

el:指定挂载点
data:提供数据

例：
<div id="app"></div>
<script>
const app=new Vue({
      el:'#app',
      data:{
            msg:'hello'
      }
});
</script>

插值表达式{{}}：

其是一种Vue的模板语法
作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，Js引擎会将其计算出一个结果
语法：
```
{{  表达式  }}
```

注意：

使用的数据必须存在于data中
支持的是表达式，而非是语句，比如if、for
不能在标签属性中使用{{}}插值

响应性特性

数据的响应式处理->响应式：数据变化->视图自动更新
data中数据的访问和修改：

实例.属性名 -> 访问

实例.属性名 = 值 -> 修改

Vue指令：

Vue会根据不同的指令，针对标签实现不同的功能

指令：带有v-前缀的特殊标签属性

指令：

v-html:
//作用：设置元素的innerHTML
//语法：v-html="表达式"

v-show：
//作用：控制元素显示隐藏
//语法：v-show=“表达式”，表达式值为true时显示，反之fasle隐藏

v-if：
//作用：控制元素显示隐藏（条件渲染）
//语法：v-if=“表达式”，表达式值表示true显示，false表示隐藏

v-else：
//作用：辅助v-if进行判断渲染
//语法：v-else / v-else-if="表达式"
//注意：需要紧挨着v-if一起使用

v-on:
//作用：注册事件 = 添加监听 + 提供处理逻辑
//语法：v-on:事件名 = "内联语句"    /    v-on:事件名 = "methods中的函数名"
//简写：@事件名=“内联语句/函数名”

//methods中的函数名：
//需在data后添加methods:{函数}
//在methods中的函数，this都指向当前实例

v-bind
//作用：动态设置html的标签属性->src、url
//语法：v-bind:属性名=“表达式”
//简法：:属性名="表达式"

v-for
//作用：基于数据循环，多次渲染整个元素->数组、对象...
//遍历数组语法：v-for="(item,index) in list"
//item表示每一项，index值下标

//v-for中的key：
//语法：:key="唯一标识"
//作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用
//注意：
//key的值只能是字符串或数字类型
//key的值必须具有唯一性
//推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应）

v-model：
//作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容
//数据变化 =》视图自动更新
//视图变化 =》数据自动更新

补充：

数组名.filter(条件表达式);//查找某个值，并返回一个新的数组

指令修饰符：

通过”.”指明一些指令后缀，不同后缀封装了不同的处理操作=》简化代码

修饰符：

//按键修饰符：
@keyup.enter  //回车监听

//v-model修饰符：
v-model.trim  //去除首尾空格
v-model.number  //转为数字

//事件修饰符
@事件名.stop  //阻止冒泡
@事件名.prevent  //阻止默认行为

v-bind操作class

语法：:class=”对象/数组”

对象=》键是类名，值为布尔值，值为true，有这个类，反之。
数组=》数组中的类名都会添加到盒子上

v-bind操作style

语法：:style=”样式对象”

v-model应用于其他表单元素

输入框：input:text =>value
文本域：texteara =>value
复选框：input:checkbox =>checked
单选框：input:radio =>checked
下拉菜单：select =>value

计算属性：

概念：基于现有的数据，计算出来的新属性。依赖的数据变化自动重新计算。

语法：

声明在computed配置项中，一个计算属性对应一个函数
使用起来和普通属性一起使用{{计算属性}}

computed：{
      计算属性名(){
            基于现有的数据，编写求值逻辑
            return  结果;
      }
}

计算属性的完整写法：

computed:{
      计算属性名:{
            get(){
                   一段代码逻辑（计算逻辑）
                  return  结果
            },
            set(修改的值){
                  一段代码逻辑（修改逻辑）
            }
      }
}

扩展：

//数组求和
数组名.reduce((上一次求和的结果,本次的值)=>方法体,起始位置)

//截取字符串
变量名.slice(开始位置  [,结束位置])

//判断所有项是否满足条件
数组名.every(条件语句)

Watch侦听器（监视器）：

作用：监视数据的变化，执行一些业务逻辑或异步操作

语法：简单类型数据，直接监视

//...
watch:{
      //该方法会在数据变化时，触发执行
      数据属性名(newValue,oldValue){
            一些业务逻辑或异步操作
      },
      '对象.属性名'(newValue,oldValue){
            一些业务逻辑或异步操作
      }
}

完整写法：（添加额外配置）

watch:{
      数据属性名:{
            deep:true,//对复杂类型深度监视
            handler(newValue){
                  //处理逻辑
            }
      }
}

//immediate:true;//初始化时立刻执行一次handler方法