一、Vue 快速上手
1. Vue 是一个用于构建用户界面的渐进式框架
**2.**创建Vue 实例
**3.**插值表达式
javascript
<body>
<div id="app">
<!-- 这里将来会编写一些用于渲染的代码逻辑 -->
<a href="">{{ count }}</a>
<h1>{{ msg }}</h1>
</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>（1）作用：利用表达式进行插值，渲染到页面中
（2）语法：
（3）注意点：① 使用的数据要存在 （data）
② 支持的是表达式，而非语句 if ... for
③ 不能在标签属性里面使用
**4.**响应式特性
定义：数据改变，视图自动更新
（1）访问数据： "实例.属性名"
（2）修改数据： "实例.属性名" = "值"
二、Vue 指令
指令：带有 v- 前缀的特殊标签属性
**1.**动态解析标签
v-html = "表达式 " → 动态设置元素 innerHTML
2. v-show 和 v-if
（1）v-show
（2）v-if
javascript
<body>
<!--
v-show 底层原理：切换 css 的 dispaly: none 来控制显示隐藏
v-if 底层原理：根据 判断条件 控制元素的 创建 和 移除
-->
<div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子</div>
<div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>3. v-else 和 v-else-if
javascript
<body>
<div id="app">
<p v-if="gender === 1">性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
<hr>
<p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
<p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >= 60">成绩评定C：奖励零食大礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 100
}
})
</script>
</body>4. v-on
（1）普通
javascript
<body>
<div id="app">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100
}
})
</script>
</body>（2）调用传参
javascript
<body>
<div id="app">
<div class="box">
<h3>灰太狼自动售货机</h3>
<button @click="buy(5)">可乐5r</button>
<button @click="buy(10)">咖啡10r</button>
</div>
<p>银行卡余额：{{ money }}r</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100,
},
methods: {
buy (price) {
console.log(price)
this.money -= price
}
}
})
</script>
</body>5. v-bind
javascript
<body>
<div id="app">
<!-- v-bind:src => :src -->
<img :src="imgUrl" v-bind:title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
imgUrl: '../考核JS/img/course1.png',
msg: '哈喽，灰太狼'
}
})
</script>
</body>6. v-for
javascript
<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>v-for 中的 key
7.v-model
javascript
<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.7.16/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>三、综合案例
