<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>创建一个Vue实例</title>
<link rel="stylesheet" href=".app.css" />
</head>
<body>
<!-- <script src="vue.js"></script> -->
<!-- 引用了VueJS核心包就可以使用vue构造函数 -->
<div id="app">
{{ msg }}
<!-- 插值表达式 {{}}
1.作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值等等代码，Js引擎会将其计算出一个结果
2.语法：{{ 表达式 }}
3.注意的点：
使用的数据必须是存在的
支持的是表达式而不是语句，比如if，for等是不支持的
不能在标签属性中使用{{}}插值
-->
{{ test }}
<!-- test数据是a标签数据，直接使用插值表达式不能显示a标签 -->
<div v-html="pho"></div>
<!-- 使用Vue指令 v-html可以显示a标签 -->
<p v-if="gender === 1">性别：男</p>
<p v-else-if="gender ===2">性别女</p>
<p v-else>女博士</p>
<button @click="count--">-</button>
<!-- 注册鼠标点击事件，点击一次count值减1 -->
<button>{{ count }}</button>
<button v-on:mouseenter="count++">+</button>
<!-- 注册按钮的鼠标移动事件，移入时count值加1 -->
<button @click="fn">切换显示隐藏</button>
<!-- fn是一个函数 -->
<h1 v-if="ifshow">Vue学习</h1>
<p>函数调用传参</p>
<p>银行卡余额：{{ money }}</p>
<button @click="buy(3)">可乐3块</button>
<button @click="buy(8)">牛奶8块</button>
<!-- 调用传参解决了共用一个函数但根据不同情况输出不同值的情况 -->
<img v-bind:src="img" :title="sky">
<!-- 动态绑定图片 -->
<ul>
<li v-for="(item,index) in fruit ">水果</li>
<!-- 数组有多少项就循环多少次，但会写死水果 -->
<li v-for="(item,index) in fruit ">{{item}} {{index}}</li>
<!-- {{item}} 动态，数组里的每一项，不需要下标的时候index可以省略不写，只有一个形参的时候括号可以省略 变成item in fruit -->
</ul>
<!-- 循环遍历数组 -->
账号：<input type="text" v-model="username"><br>
密码: <input type="passworod" v-model="password"><br>
<!-- <button @click="login">登录</button> -->
<button @click="reset">重置</button>
<!-- 表单双向数据绑定 -->
<ul>
<li v-for="(item,index) in list" :key="item.id" @mouseenter="activeindex =index">
<p :class='{ active:index === activeindex}' >{{item.name}}</p>
</li>
</ul>
<!-- 导航栏鼠标移入时切换显示 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
// 通过el选择器，指定Vue管理的是 id为app的盒子
data:{
// 通过 data 提供数据
msg:'hello',
// 响应式数据：数据变化了，视图自动更新
// data中的数据，是会被添加到实例上的
// 1.访问数据 实例.属性名
// 2.访问数据 实例.属性名 = 新值
pho:`
<a href='https://v2.cn.vuejs.org/v2/guide/installation.html'>
vue官网
</a>`,
// 数据里面有标签要用``
gender:2,
count:100,
ifshow:true,
money:100,
sky:'天空',
img:'95dd2fa7518b13ed747312277e9b4b1.jpg',
fruit:['香蕉','草莓','西瓜'],
username:'',
password:'',
list:[
{ id:1,name:'jd'},
{ id:2,name:'taobao'},
{ id:3,name:'pdd'}
],
activeindex: 2
// Vue指令就是带有 v-前缀的特殊属性，不同属性对应不同的功能
// 1.动态解析标签要用：v-html ='表达式'（动态设置元素innerHTML）
// 2.控制元素显示隐藏：v-show ='表达式'（表达式值为true显示，为false隐藏）
// 底层原理：切换CSS 的 display：none 来控制显示隐藏
// 适用场景：频繁切换显示隐藏的场景
// 3.控制元素显示隐藏（条件渲染）：v-if ='表达式'（表达式值为true显示，false隐藏）
// 底层原理：根据 判断条件 控制元素的 创建 和移除
// 适用场景：要么显示要么隐藏，不频繁切换的场景
//4.辅助v-if进行判断渲染
// v-else v-else-if = '表达式'
// 注意：需要紧挨着v-if一切使用
// 5.注册事件 = 添加事件 + 提供处理逻辑
// 语法1：v-on：事件名 = '内联语句'
// 内联语句就是可执行的代码
// v-on: 可替换成 @
// 语法2：v-on:事件名='methods中的函数名'
// v-on 可以调用传递参数
// 6.动态设置html的标签属性：v-bind：属性名='表达式' 可以简写为 :属性名='表达式'
// 为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制
// 操作class
// 语法：class='对象/数组'
// 对象，键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
// <div :class='{类名1：布尔值，类名2：布尔值}'></div>
// 适用场景：一个类名来回切换
// 数组，数组中所有的类，都会添加到盒子上，本质就是一个class列表
// <div :class='[类名1，类名2，类名3]'></div>
// 适用场景：批量添加或删除类
//操作style
// 语法：style='样式对象'
// <div :style='{CSS属性名1：css属性值，css属性名2：css属性值}'></div>
// 属性名为background-color是不行的，但可以写成backgroundColor
// 7.v-for：基于数据循环，多次渲染整个元素，有数组，对象，数字等等
// 语法： v-for ='(item,index) in 数组'
// 循环的就是数组，item是每一项 index是下标
// v-for中的key，key属性='唯一标识'
// 作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用
// key的必须是字符串或者数字，必须有唯一性，推荐用id作为唯一标识
// 8.v-model
// 作用：给表单元素使用，双向数据绑定(数据和视图)，可以快速获取或设置表单元素内容
// 数据变化，视图自动更新。视图变化，数据也会自动更新
// 语法：v-model='变量'
// v-model会根据 控件类型自动选取正确的方法来更新元素
//指令修饰符
//通过'.'指明一些指令的后缀，不同后缀封装了不同的处理操作可以简化代码
// 1.按键修饰符 @keyup.enter 键盘回车监听
// 2.v-model修饰符 v-model.trim 去除首尾空格 v-model.number 转数字
// 3.事件修饰符 @事件名.stop 阻止冒泡 @事件名.prevent 阻止默认行为
},
methods:{
// methods 是用来提供方法的，是一个函数
fn(){
// app.ifshow = !app.ifshow
this.ifshow = !this.ifshow
//点击一次取反，ture变false，不能直接写ifshow，要app.ifshow，因为ifshow不是一个全局变量
// 让提供的所有methods中的函数，this都指向当前实例
// 即可以写成 this.ifshow = !this.ifshow
// 推荐使用this，因为用app.ifshow的话，一旦app变成app3，app.ifshow也要变成 app3.ifshow而this不用改
},
buy(price){
this.money -= price //调用传参
},
reset(){
this.username = ''
this.password = ''
}
}
})
</script>
</body>
</html>
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
