创建Vue实例
核心步骤（4步）：
- 准备容器 (Vue所管理的范围)
- 引包 (开发版本包 / 生产版本包) 官网
- 创建实例
- 添加配置项 => 完成渲染
如下：
<!-- Vue所管理的范围 -->
<div id="app">
<!-- 这里将来会编写一些用于渲染的代码逻辑 -->
<h1>{
{ msg }}</h1>
</div>
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
const app = new Vue({
// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
el: '#app',
// 通过 data 提供数据
data: {
msg: 'Hello world'
}
})
</script>
插值表达式
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据
比如上面中的{ {msg}}，该语法的核心就是 双花括号
注意点
- 在插值表达式中使用的数据 必须在data中进行了提供
- 不能在标签属性中使用 {
{ }} 插值 ，比如：
<p title="{ {username}}">我是P标签</p>
我们还可以使用插值表达式是实现如下功能：
<h3>{
{title}}<h3>
<p>{
{nickName.toUpperCase()}}</p>
<p>{
{age >= 18 ? '成年':'未成年'}}</p>
<p>{
{obj.name}}</p>
<p>{
{fn()}}</p>
其中的语法和Java语言很类似
Vue 的响应式特性
我们可以在修改数据的时候，视图跟着实时更改
修改方法："实例.属性名"= "值"
例如
上面代码案例中，我们要修改 msg 的值，我们可以直接修改 app.msg="Happy Day"
此时在视图中，会同步将msg对应的值显示为 Happy Day
Vue 的常用指令
概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
vue 中的指令按照不同的用途可以分为如下 6 大类：
- 内容渲染指令（v-html、v-text）
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
- 事件绑定指令（v-on）
- 属性绑定指令 （v-bind）
- 双向绑定指令（v-model）
- 列表渲染指令（v-for）
指令是 vue 开发中最基础、最常用、最简单的知识点。
因此接下来我们一个个展示
内容渲染指令
v-text（类似innerText）：使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
v-html（类似 innerHTML）：使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
实例
<div id="app">
<h2>个人信息</h2>
// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
<p v-text="uname">姓名：</p>
<p v-html="intro">简介：</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
uname:'张三',
intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
}
})
</script>
条件渲染指令
v-show：
- 作用： 控制元素显示隐藏
- 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
v-if：
- 作用： 控制元素显示隐藏（条件渲染）
- 语法： v-if= "表达式" 表达式值 true显示， false 隐藏
- 原理： 基于条件判断，是否创建 或 移除元素节点
- 场景： 要么显示，要么隐藏，不频繁切换的场景
<div id="app">
<div class="box">我是v-show控制的盒子</div>
<div class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
上面代码中，因为 flag 是 false ，因此视图中两个 box 都看不到，但是本质上不同
<div class="box">我是v-show控制的盒子</div> 代码还在，只不过因为其CSS样式被设置为：display:none ，所以我们在视图上看不到，
而<div class="box">我是v-if控制的盒子</div>，被直接从html文件中移除了该元素节点
v-else 和 v-else-if
<div id="app">
<p v-if="gender === 1"> 性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
}
})
</script>
上面的代码中，如果gender等于1，则显示 性别：♂ 男 ，否则显示 性别：♀ 女
事件绑定指令
<button v-on:事件名="内联语句">按钮</button><button v-on:事件名="处理函数">按钮</button><button v-on:事件名="处理函数(实参)">按钮</button>v-on:简写为 @
我们最常用的事件就是点击事件
<button @click="count--">-</button>
上面是内联语句形式，但是如果逻辑复杂，我们可以使用 事件处理函数 如下：
<div id="app">
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">Hallo World</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app4 = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn () {
this.isShow = !this.isShow
}
}
})
</script>
如果想向方法中传入参数可以使用如下形式
<div id="app">
<div class="box">
<h3>Water自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(8)">牛奶8元</button>
</div>
<p>银行卡余额：{
{ money }}元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy (price) {
this.money -= price
}
}
})
</script>
属性绑定指令
- 作用：动态设置html的标签属性 比如：src、url、title
- 语法：v-bind:属性名=“表达式”
- v-bind:可以简写成 => :
可以说，v-bind 就是弥补了 不能在标签属性中使用 { { }} 插值 的遗憾
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-02.png',
msg: 'hello World'
}
})
</script>
并且 <img v-bind:src="url" /> 可以变为 <img :src="url" /> （v-bind可以省略）
列表渲染指令
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
- item 是数组中的每一项
- index 是每一项的索引，不需要可以省略
- arr 是被遍历的数组
<div id="app">
<h3>Water 水果店</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/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '苹果', '鸭梨', '榴莲']
}
})
</script>
结果如下
此语法也可以遍历对象和数字
<div id="app">
<h3>Water的书架</h3>
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span>{
{ item.name }}</span>
<span>{
{ item.author }}</span>
<!-- 注册点击事件 → 通过 id 进行删除数组中的 对应项 -->
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods: {
del (id) {
this.booksList = this.booksList.filter(item => item.id !== id)
}
}
})
</script>
双向绑定指令
所谓双向绑定就是：
- 数据改变后，呈现的页面结果会更新
- 页面结果更新后，数据也会随之而变
<div id="app">
<!--
v-model 可以让数据和视图，形成双向数据绑定
(1) 数据变化，视图自动更新
(2) 视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容
-->
账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login () {
console.log(this.username, this.password)
},
reset () {
this.username = ''
this.password = ''
}
}
})
</script>
