vue day1（主要是指令）-编程知识

vue day1（主要是指令）

1、引包在这里插入图片描述
或者：cdn网址

2、创建实例，初始化渲染
请添加图片描述
3、插值表达式 {{}}
表达式：可以被求值的代码

4、响应式数据：数据发生变化，视图自动更新（底层是dom操作）
data中数据会被添加到实例上，用实例.属性名访问
vue核心特性：响应式

5、安装vue开发工具：调试

edge：在这里插入图片描述
chrome上同理

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

(1)

插值表达式不具备解析标签的能力，直接将属性值原封不动显示到页面上请添加图片描述

(2)v-show和v-if：控制网页元素显示和隐藏

隐藏逻辑不一样，v-if直接没有这个标签了（创建和移除元素（条件渲染）），而v-show切换display:none来实现
不断创建和删除节点开销较大，故频繁切换显示隐藏用v-show

而只显示一次的，用v-show，其实元素还在页面中，导致页面结构冗余

（3）请添加图片描述
（4）v-on
注册事件=添加监听+提供处理逻辑
1、v-on:事件名=“内联语句”
vue中数据是响应式的，一旦数据修改，视图自动更新

v-on:事件名可简写为@事件名

2、v-on:事件名=“methods中的函数名”
如何访问修改data中数据? 实例.属性名

可维护性不好，实例名改变，methods中也要相应变化请添加图片描述
methods中this指向vue实例，可通过this访问data中变量（eg.this.isShow）

传参：请添加图片描述
（5）v-bind
插值表达式不能在标签属性中使用

v-bind:属性名=“表达式”
简写：省略v-bind

（6）v-for：把某个标签根据某个数组值（或其他）多次渲染（使用时要加上v-key）
请添加图片描述
index可省略，item in list

案例：:key=“item.id” ？
请添加图片描述
v-for中的key：给列表项添加的唯一标识，便于vue进行列表项正确排序复用。

（7）v-model 请添加图片描述

示例：

（8）案例
v-for中通常用id作为key（唯一性）

解决一个bug：用户输入空白，点击添加任务会添加一个空任务。
加个判断，此处用上trim方法可以得到过滤掉左右两边空白字符的新字符串（用户可能输了几个空格才输入内容）
在这里插入图片描述
优化：如果没有任务，底部footer隐藏（属于非一次显示隐藏，用v-show）

标签中要访问v-for中item和index，也用插值表达式
在这里插入图片描述
删除的哪个li，id标示，要把id传给函数进行处理

自己写的：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// id #调用const app = new Vue({el: '#app',data: {// 和表单元素双向绑定 空字符串(初始)todoName: '',list: [{ id: 1, name: '跑步一公里' },{ id: 2, name: '跳绳200个' },{ id: 3, name: '游泳100米' },],},methods: {del(id) {this.list = this.list.filter(item => item.id !== id)},add() {this.list.unshift({//id是独一无二的id: +new Date(),name: this.todoName})},clear() {this.list = []}}})</script>

原本的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input v-model="todoName"  placeholder="请输入任务" class="new-todo" /><button @click="add" class="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label><button @click="del(item.id)" class="destroy"></button></div></li></ul></section><!-- 统计和清空 → 如果没有任务了，底部隐藏掉 → v-show --><footer class="footer" v-show="list.length > 0"><!-- 统计 --><span class="todo-count">合 计:<strong> {{ list.length }} </strong></span><!-- 清空 --><button @click="clear" class="clear-completed">清空任务</button></footer>
</section><!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>// 添加功能// 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容// 2. 点击按钮，进行新增，往数组最前面加 unshiftconst app = new Vue({el: '#app',data: {todoName: '',list: [{ id: 1, name: '跑步一公里' },{ id: 2, name: '跳绳200个' },{ id: 3, name: '游泳100米' },]},methods: {del (id) {// console.log(id) => filter 保留所有不等于该 id 的项this.list = this.list.filter(item => item.id !== id)},add () {if (this.todoName.trim() === '') {alert('请输入任务名称')return}this.list.unshift({id: +new Date(),name: this.todoName})this.todoName = ''},clear () {this.list = []}}})</script>
</body>
</html>