一.Vue认识
一个用于构建用户界面的渐进式框架
1.构建用户界面：基于 数据 动态渲染 页面
2.渐进式：循序渐进的学习
3. 框架：一套完整的项目解决方案，提升开发效率个（理解记忆规则）
规则→官网
二.初步学习
1.创建一个Vue实例 初始化渲染
（1）准备容器（Vue所管理的范围）图中的app
（2）引包（开发版本包/生产版本包）--官网找
（3）创建实例
const app=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> <!-- 创建Vue实例 初始化渲染 1.准备容器（Vue所管理的范围） 2.引包（开发版本包/生产版本包）--官网找 3.创建实例 4.添加配置项 el(指定挂载点) data =》完成渲染 --> <div class="box"> {{msg}} <!-- 因为已经指定了el为app 所以此处不会有msg --> </div> <div id="app"> <!-- 这里将来会编写一些用于渲染的代码逻辑 --> <h1>{{msg}}</h1> <a href="">{{count}}</a> </div> <!-- 引入的是开发版本包 --包含完整的注释和警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> //一旦引入VueJS核心包 在全局环境 就有了Vue构造函数 const app=new Vue({ //通过el去配置选择器 指定Vue管理的是哪个盒子 el:'#app', //通过data提供数据 data:{ msg:'Hello 黑马', count:666 } }) </script> </body> </html>2.插值表达式
作用：利用 表达式 进行插值渲染
语法：{{表达式}}
注意点：
1.使用的数据要存在
2.支持的表达式，不是语句 if for
3. 不能在标签属性中使用{{ }
3.响应式
/data中的数据 是会被添加到实例上
//1.访问数据 实例.属性名
//2.修改数据 实例.属性名=新值
4.Vue指令
控制显示与隐藏：
v-show:
切换css的display：none 来控制显示隐藏
v-if
底层原理：根据判断条件 控制元素的显示隐藏（条件渲染）
条件类：
v-if="表达式":
v-else-if
"表达式"：必须有v-if才能用
点击等：
v-on
：click=" 表达式"或者@click="表达式"
搭配methods里面的函数
<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"> <button @click="fn">切换显示隐藏</button> <h1 v-show="isShow">黑马</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app3=new Vue({ el:'#app', data:{ isShow:true }, methods:{ // 提供处理逻辑函数 fn(){ //让提供的所以methods中的函数，this都指向当前实例 // console.log('执行力fn',app.isShow) // console.log(app3===this) this.isShow=!this.isShow // app3.isShow=!app3.isShow } } }) </script> </body> </html>可以调用传参
v-bind:
1.作用：动态的设置html的标签属性→srcurltitle
2. 语法：v-bind:属性名="表达式"
3.注意：简写形式：属性名=”表达式”
v-for:
递归渲染
<!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"> <h3>小黑水果店</h3> <ul> <li v-for="(item,index) in list">{{item}}--{{index}}</li> </ul> <ul> <li v-for="(item) in list">{{item}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ list:['西瓜','苹果','鸭梨'] } }) </script> </body> </html>v-model:
可以让数据和视图，形成双向数据绑定
（1）数据变化，视图自动更新
（2）视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容
综合案例：记事本
<!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"> <header class="header"> <h1>记事本</h1> <input type="text" v-model="todoName" placeholder="输入任务" class="new-todo"> <button class="add" @click="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 for="">{{item.name}}</label> <button class="destroy" @click="del(item.id)">删除</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 class="clear-completed" @click="clear">清空任务</button> </footer> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> //添加功能 //1.通过v-model绑定 输入框->实时获取表单元素的内容 //2.点击按钮，进行新增，往数组 const app=new Vue({ el:'#app', data:{ todoName:'', list:[ {id:1,name:'跑步1km'}, {id:2,name:'跳绳20min'}, {id:3,name:'游泳20min'}, ] }, //删除功能 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>
