一、Vue是什么？
概念：Vue是一个用于构建用户界面的渐进式框架
构建用户界面：基于数据渲染出用户看到的界面
渐进式：循序渐进
框架：一套完整的项目解决方案
二、创建Vue实例
1、准备容器（Vue所管理的范围）
2、引包(官网) — 开发版本/生产版本
3、创建Vue实例 new Vue()
4、指定配置项—>渲染数据
- ①el指定挂载点，选择器指定控制的是哪个盒子。
- ②data提供数据
<!-- 准备容器（Vue所管理的范围） -->
<div id="app">
<!-- 写一些用于渲染的代码逻辑 -->
<h1>{{ msg }}</h1>
<a href="">{{count}}</a>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script>
// 一旦引入VueJS核心包，在全部变量中，就有了Vue构造函数
const app = new Vue({
// 通过el去配置选择器，指定 Vue管理的是哪个盒子
el:'#app',
data:{
msg:'Hello Vue',
count:"小煦同学！"
}
})
</script>
三、插值表达式 {{ }}
插值表达式是一种Vue的模板语法
1、作用：利用表达式进行插值，渲染到页面中 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2、语法: {{ 表达式 }}
3、注意点：
- ①使用的数据必须存在(data)
- ②支持的是表达式，而非语句
- ③不能在标签属性中使用{{ }}插值
<body>
<!--
注意点：
1、使用的数据要存在
2、支持的是表达式，不是语句
3、不能在标签属性中使用插值
-->
<div id="app">
<p>{{nickname}}</p>
<p>{{nickname.toUpperCase()}}</p> <!-- // toUpperCase() 转大写 -->
<p>{{nickname + "起床打篮球"}}</p>
<p>{{age >= 18 ? "成年下地打篮球":"未成年去唱跳rap"}}</p>
<p>{{ friend.name }}</p>
<p>{{ friend.desc }}</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
nickname:"nigger",
age:18,
friend:{
name:"iKun",
desc:"喜欢打篮球"
}
}
})
</script>
</body>
四、Vue指令
vue 中的指令按照不同的用途可以分为如下 7 大类：
-
内容渲染指令（v-html） 作用：v-show和v-if 用来控制元素的显示与隐藏
语法：
- v-show = "表达式" 表达式值为 true 显示， false 隐藏
- v-if= "表达式" 表达式值 true显示， false 隐藏
原理：
- v-show 原理： 切换 display:none 控制显示隐藏
- v-if 原理：基于条件判断，是否创建 或 移除元素节点
<body>
<!-- 容器 -->
<div id="app">
<div v-html = "str"></div>
</div>
<!--
1、定义数据
2、在vue的有效容器中的某一个html元素身上使用指令，
来使用定义的数据
-->
<!-- v-html其实是vue的底层找到这个元素，通过innerHTML来设置 -->
<!-- 导包 -->
<script src="../vue.js"></script>
<!-- vue代码 -->
<script>
const app = new Vue({
el:'#app',
data:{
str:"hello vue"
}
})
</script>
</body>
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
<body>
<!--
v-show和v-if可以通过数据进行标签的显示和隐藏
v-show和v-if的区别
v-show是通过 style="display:none"来进行元素的显示和隐藏
v-if是通过移除和添加元素来显示和隐藏
v-show和v-if使用场景
由于v-if是会频繁创建和删除元素的，但是v-show只是显示和隐藏这个元素而已，这个元素是一直在dom里面，那么基于此特点
v-show适合一个元素需要频繁的显示和隐藏操作
v-if适合一次隐藏操作
-->
<div id="app">
<div v-show="isShow">v-show控制</div>
<div v-if="isShow">v-if控制</div>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isShow:true
}
})
</script>
</body>
<body>
<div id="app">
<!--
总结：
v-else 是 v-if的一个补充指令
v-else作用：当v-if表达式
-->
<p v-if="gender === 1">性别：男</p>
<p v-else>性别：女</p>
<hr>
<p v-if="score>=90">成绩评定A</p>
<p v-else-if = "score>=80">成绩评定B</p>
<p v-else-if = "score>=70">成绩评定C</p>
<p v-else>成绩评定D</p>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
gender:2,
score:99
}
})
</script>
</body>
-
事件绑定指令（v-on）
作用： 注册事件 （注册流程：事件名+ 事件处理逻辑 ，事件源哪去了？）语法：
- v-on:事件名="内联语句"
- v-on:事件名="methods中的函数名"
- v-on:事件名="methods中的函数名(参数)"
举例： button注册事件的三种写法
- <button v-on:事件名="内联语句">按钮
- <button v-on:事件名="处理函数">按钮
- <button v-on:事件名="处理函数(实参)">按钮
注意：
v-on:简写为 @<body> <div id="app"> <!-- 1、使用v-on来注册事件 内联写法 步骤： 1、找到需要注册事件的元素（两个按钮） 2、确定事件名（事件类型） —— click 3、确定事件处理逻辑 --> <button @click = "count--">-</button> {{count}} <button @click = "count++">+</button> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ count:1 } }) </script> </body> -
属性绑定指令 （v-bind） 作用： 给元素的属性动态绑定数据 ->例如：
-
双向绑定指令（v-model） 作用: v-model是给 表单元素 双向数据绑定的，可以快速 获取 或 设置 表单元素内容
双向数据绑定是什么？
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法: v-model = '变量'
扩展: v-model还可以给select、checkbox、radio、textarea等表单元素使用
<body>
<div id="app">
<!-- v-model做表单元素的双向数据绑定
1、数据变化，视图跟着变化
2、视图变化，数据跟着变化
-->
<input type="text" v-model="uname">
<input type="password" v-model="upwd">
<input type="checkbox" v-model="isCheck">
<input type="radio" name="" id="" v-model="isOk">
<select name="" id="" v-model="sex">
<option value="1">男</option>
<option value="2">女</option>>
</select>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
uname:"admin",
upwd:"123456",
isCheck:true,
isOk:true,
sex:"1"
}
})
</script>
</body>
- 列表渲染指令（v-for）
作用： 基于数据循环，多次渲染整个元素
v-for可以基于哪些数据进行遍历呢？
数组，对象，数字，其中基于【数组】遍历是我们常用的方式
<body>
<!--
v-for作用：基于数据，重复渲染元素
语法v-for="(item,index) in 数据"
->数据有哪些？[数组]，对象，数字
注意点：
1、v-for写在谁身上？需要重复生成的元素身上
2、data中的数据发生改变，v-for自动重新执行
-->
<div id="app">
<ul>
<li v-for="(item,index) in list">
{{item}}-{{index}}
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
list:['西瓜','苹果','鸭梨','榴莲'],
}
})
</script>
</body>
五、总结
本文记录vue入门学习的知识点，创建vue实例以及一些指令。
