Vue
First
创建Vue实例
核心步骤（4步）：
-
准备容器
-
引包（官网） — 开发版本/生产版本
-
创建Vue实例 new Vue()
-
指定配置项，渲染数据
-
el:指定挂载点
-
data提供数据
-
<body>
<div id="app">
{{ msg }}
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'hungrycats'
}
})
</script>
</body>
插值表达式 {{}}
作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果
以下的情况都是表达式：
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()
语法:
插值表达式语法：{{ 表达式 }}
<h3>{{title}}<h3>
<p>{{nickName.toUpperCase()}}</p>
<p>{{ nickname + '你好' }}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{obj.name}}</p>
<p>{{fn()}}</p>
错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p> //如果在data中不存在 则会报错
2.支持的是表达式，而非语句，比如：if for ...
<p>{{if}}</p>
3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>
Vue中的常用指令
概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
vue 中的指令按照不同的用途可以分为如下 6 大类：
内容渲染指令（v-html(类似 innerHTML)、v-text(类似 innerText)）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令 （v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）
指令是 vue 开发中最基础、最常用、最简单的知识点。
v-html
<div id="app">
<div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `
<a href="http://www.baidu.com">
百度一下
</a>
`
}
})
</script>
v-show和v-if
v-show:
-
作用： 控制元素显示隐藏
-
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
-
原理： 切换 display:none 控制显示隐藏
-
场景：频繁切换显示隐藏的场景
v-if:
-
作用： 控制元素显示隐藏（条件渲染）
-
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
-
原理： 基于条件判断，是否 创建 或 移除元素节点
-
场景： 要么显示，要么隐藏，不频繁切换的场景
<style>
.box {
width: 200px;
height: 100px;
line-height: 100px;
margin: 10px;
border: 3px solid #000;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<!--
v-show底层原理：切换 css 的 display: 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/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>
v-else 和 v-else-if
-
作用：辅助v-if进行判断渲染
-
语法：v-else v-else-if="表达式"
-
需要紧接着v-if使用
<div id="app">
<p>性别：♂ 男</p>
<p>性别：♀ 女</p>
<hr>
<p>成绩评定A：奖励电脑一台</p>
<p>成绩评定B：奖励周末郊游</p>
<p>成绩评定C：奖励零食礼包</p>
<p>成绩评定D：惩罚一周不能玩手机</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,
score: 95
}
})
</script>