Vue 简介
什么是Vue？
- 官方给出的概念：vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
- 构建用户界面：前端每天就是在做画用户界面的工作，vue 帮助我们以更简单的方式来做这些事情
- 渐进式：vue 不强求程序员一次性接受并使用它的全部功能和特性
框架的概念？
- 框架指的就是程序员必须遵守的规则或约束
Vue 的官方文档（使用说明书）：https://cn.vuejs.org/v2/guide/
Vue 的基本使用
Vue 的基本使用：4个步骤
<div id='app'>
// vm 会控制这个div的渲染
</div>
<script src='./js/vue.js'></script>
<script>
const vm = new Vue({
el:'#app'
})
</script>
- 步骤一：导入 Vue 的 JS 文件，文件中声明了一个名为 Vue 的构造函数
- 步骤2：new Vue()，创建 Vue 的实例对象，用 vm 来表示
- 步骤3：通过 el 选项，指定 vue 所控制的 DOM 区域
- 步骤4： 创建 vue 所控制的 DOM 区域。 注意：选择器一定要和 el 选项的值匹配
将 Vue 中定义的数据渲染到页面
Vue 提供了 data 选项，用来定义数据，供页面渲染时使用
<div id='app'>
<!-- vm 会控制这个 div 的渲染 -->、
<!-- 插值表达式会拿到data中的变量的值 -->
<p>
姓名：{{username}}
</p>
<p>
性别：{{gender}}
</p>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'张三',
gender:'男'
}
})
</script>
问题：p标签放在 app 外面，还会生效吗？
答案：不会生效，app是根，必须写在app里面
Vue 的调试工具
安装 Vue-devtools 调试工具：Vue 官方提供的 Vue-devtools 调试工具，帮助我们在浏览器中调试 Vue 程序
谷歌下载地址：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
IE下载：扩展插件
Vue 指令 - Vue 中 6 种常见指令
指令的概念？
指令（Directives）是 Vue 为开发者提供一套特殊语法，指令可以帮助我们在**不用操作 Dom **的情况下，动态渲染页面
Vue 中的指令按照不同的用途可以分为如下 6 大类：
每个指令都与我们之前学过的 DOM 和 js 的知识有所对应
① 内容渲染指令（对应dom中的 文本节点）
② 属性绑定指令（对应dom中的 属性节点）
③ 事件绑定指令（对应dom中的 事件）
④ 双向绑定指令（vue中特有的，react中想做需要自己实现）
⑤ 条件渲染指令（在页面模板中写 if）
⑥ 列表渲染指令（在页面模板中写 for）
Vue 指令 - 内容渲染指令
- 内容渲染指令帮助开发者渲染 DOM 元素的文本内容
- 常用的内容渲染指令有如下两个：{{}}，v-html
{{}}语法：
Vue 提供的 {{}} 语法。它的专业名称是插值表达式
作用：将 Vue 中定义的 数据 动态渲染到 DOM 元素内容 的指定位置
<div id="app"> <!-- {{}} --> <!-- 作用：将数据动态渲染到DOM的内容区域 --> <div>{{CompanyName}}</div> <div>{{address}}</div> </div> <script> // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', data: { CompanyName: 'xxxx有限公司', address:'北京xxx' } }); </script>
v-html语法：
插值表达式只能渲染纯文本内容
如果要把包含 HTML 标签的字符串渲染为真正的 HTML 元素，则需要用到 v-html 这个指令
<div id="app"> <!-- v-html --> <!-- 作用：将包含了html标签的字符串，渲染成真正的html标签 --> <p v-html="major"></p> </div> <script> // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', data: { major: '<h3 style="font-weight:bold;font-size:20px;color:red">前端</h3>' } }); </script>
Vue指令 - 表达式的概念
在插值表达式语法中，除了支持绑定简单的数据值之外，还支持 JavaScript 表达式的运算
什么是表达式：能够得到一个值的式子
<div id="app">
<!-- 1.字面量 -->
<div>{{1}}</div>
<div>{{'abc'}}</div>
<div>{{true}}</div>
<div>{{[1,2,3]}}</div>
<div>{{ {a:1} }}</div>
<!-- 2.数学运算 -->
<div>{{1+2}}</div>
<!-- 3.字符串的拼接 -->
<div>{{'a'+'bc'}}</div>
<!-- 4.三元表达式 -->
<div>{{age > 18 ? '成年' : '未成年'}}</div>
<!-- 5.函数的调用 -->
<div>{{['a','b','c','d'].join('')}}</div>
</div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
age: 27
}
});
</script>
>> 输出结果：
1
abc
true
[ 1, 2, 3 ]
{ "a": 1 }
3
abc
成年
abcd
Vue 指令 - 属性绑定指令
如果需要为 元素的属性 动态绑定 属性值 ，就可以使用 v-bind 属性绑定指令
<div id='app'> <!-- v-bind --> <!-- 语法：v-bind:属性名 = "属性值(data中的数据)" --> <input type='text' v-bind:placeholder='placeholder'> <!-- v-bind简写模式 --> <!-- 语法：:属性名 = "属性值(data中的数据)" --> <input type='text' :placeholder='placeholder'> </div> <script> // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', data: { placeholder: '在这里输入你的用户名' } }); </script>
Vue 指令 - 事件绑定指令
Vue 提供了 事件绑定指令 ，用来给 DOM 元素绑定事件
注意：原生 DOM 对象有 click、input、keyup 等原生事件
替换为 Vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
<div id='app'> <div>数量：{{num}}</div> <!-- 事件绑定 v-on --> <!-- 语法：v-on:事件类型 = "事件处理函数" --> <button v-on:click="add">增加</button> <!-- 简写形式 --> <!-- 语法：@事件类型 = "事件处理函数" --> <button @click="add">增加(简写模式)</button> <!-- 如果事件处理函数中只有一行代码，可以直接写到行内去 --> <!-- 在模板中使用，直接就能拿到data中的数据，不需要带this --> <button @click="num += 1">增加(行内式)</button> <!-- 绑定事件并传参 --> <button @click="addNum(2)">增加(+2)</button> <button @click="addNum(3)">增加(+3)</button> <button @click="addNum(4)">增加(+4)</button> </div> <script> // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el:'#app', data:{ num:0 }, methods:{ // 事件处理函数需要定义在methods中 // ES6的语法：简写语法：add:function(){} === add(){} (function 和 : 都去掉) // ES6中，对象里面的函数的简写模式 add(){ // 方法中通过this.属性名来拿到data中定义的数据 this.num += 1 }, addNum(n){ // 事件传参的事件处理函数 this.num += n; } } }) </script>
Vue 指令 - 事件修饰符
在原生事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 可以对事件的行为进行控制
在Vue 中要想做这些事情是使用事件修饰符，常用的 2 个事件修饰符如下：
事件修饰符 说明 .prevent 阻止默认行为（例如：阻止a链接的跳转，阻止表单的提交等） .stop 阻止事件冒泡 代码演示：
<div id="app"> <!-- 事件修饰符写在事件类型的后面 --> <!-- .prevnet: 事件修饰符,阻止事件的默认行为 --> <a href="https://www.baidu.com" @click.prevent="tobaidu">去百度</a> <!-- .stop:事件修饰符,阻止冒泡行为 --> <!-- .stop写在内层的盒子,防止它触发打印上层输出语句 --> <div class="outer-box" @click="outerClick"> <div class="inner-box" @click.stop="innerClick"></div> </div> </div> <script> // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', methods: { tobaidu() { console.log('ok'); }, innerClick() { console.log('innerClick'); }, outerClick() { console.log('outerClick'); } } }); </script>
Vue 指令 - 按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。在 Vue 中，只需要为键盘事件添加按键修饰符。
注意：按键修饰符只能配合键盘事件一起使用
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- 为事件添加按键修饰符 -->
<!-- .enter:只有按下 enter 键的时候,才触发login这个事件处理函数 -->
<input type="text" @keyup.enter="login">
<hr>
<!-- 只有当按下 delete 键的时候,才会触发clearSubmit这个事件处理函数 -->
<input type="text" @keyup.delete="clearSubmit">
</div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
},
methods: {
login() {
console.log('login success');
},
// e是一个事件对象
clearSubmit(e) {
console.log(111);
// e.target.value : 可以设置这个文本框的值为空
e.target.value = '';
}
}
});
</script>
Vue指令 - 双向绑定 v-model 指令
Vue 中提供了 v-model 指令来做数据的双向绑定，帮助我们快速处理表单的值
数据双向绑定的特点：数据变化视图更新，视图变化数据更新
注意：v-model 只能运用在表单元素上
<div id="app"> <!-- 使用 v-model --> <!-- v-model 只能配合表单元素进行使用 --> <input type='text' v-model='username'> </div> <script> const vm = new Vue({ el:'#app', data:{ username:'张三' } }) </script>使用了双向绑定后，更新data数据或者视图数据，对应的绑定的数据也会自动更新
Vue 指令 - 双向绑定 v-model 指令 — 专属修饰符
为了方便对表单输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：
修饰符 作用 示例 .number 自动将用户输入的值转为 number 类型
MVVM的概念
Vue 框架的特性，主要体现在如下两个方面：
MVVM
- MVVM 是 Vue 实现 数据驱动视图 和 双向数据绑定 的核心原理
- MVVM 指的是 Model、View 和 ViewModel.
- 它把每个 HTML 页面都拆分成了三个部分，如图所示：
MVVM 的工作原理
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起
- 当 数据源发生变化 时，会被 ViewModel 监听到，VM 会根据最新的数据源 自动更新 页面的结构
- 当 表单元素的值发生变化 时，也会被 VM 监听到，VM 会把变化过后最新的值 自动同步 到Model数据源中
Vue 指令 - 条件渲染指令
条件渲染指令通过条件判断来控制 DOM 的显示与隐藏
条件渲染指令有如下两个，分别是：v-if 和 v-show
<div id="app"> <button @click="toggle">切换</button> <button @click="flag = !flag">切换行内式简写</button> <!-- v-if 和 v-show 都是用来控制 DOM 元素的显示和隐藏 --> <!-- v-if 和 v-show 绑定的 data 数据值为 true，就显示，否则隐藏 --> <p v-if="flag">这是被 v-if 控制的DOM元素</p> <p v-show="flag">这是被 v-show 控制的DOM元素</p> </div> <script> // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', data: { flag: true, }, methods: { toggle() { this.flag = !this.flag; } } }); </script>
Vue 指令 - v-if 和 v-show 的区别
实现原理不同：
- v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
- v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏
性能消耗不同：
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
- 如果需要非常频繁地切换，则使用 v-show 较好
- 如果在程序运行时条件很少改变，则使用 v-if 较好
Vue 指令 - v-if 的配套指令
v-if 可以单独使用，或者配合 v-else / v-else-if 指令一起使用
注意：v-else / v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别 ~
代码示例：
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<p v-if="score > 90">优秀</p>
<p v-else-if="score > 80 && score < 90">良好</p>
<p v-else-if="score > 70 && score < 80">一般</p>
<p v-else>差</p>
</div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
score: 93
},
methods: {
}
});
</script>
Vue 指令 - 列表渲染指令
Vue 提供了 v-for 列表循环指令，用来辅助我们 循环渲染一个列表结构
结构： 想要循环渲染哪个元素，v-for就加在哪个元素身上
Vue： v-for 中的索引
v-for 指令还支持一个 可选 的第二个参数，即 当前项的索引
代码示例：
<div id="app">
<ul>
<!-- 需要循环渲染哪个元素，就在哪个元素身上添加 v-for -->
<!-- 语法：v-for='数组中的每一项 in 数组' -->
<!-- item 语义化：每一条，每一项 -->
<li v-for="item in list">姓名：{{item.uname}}----年龄：{{item.age}}</li>
</ul>
<ul>
<!-- 还可以添加第二个参数，即每一项的下标 -->
<!-- 语法：v-for='(数组中的每一项，索引) in 数组' -->
<!-- item语义化：每一条，每一项 -->
<li v-for="(item,index) in list">索引：{{index}}----姓名：{{item.uname}}----年龄：{{item.age}}</li>
</ul>
</div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
list:
[{id: 1,uname: '张三',age: 18},
{id: 2,uname: '李四',age: 20},
{id: 3,uname: '王五',age: 22}]
}
});
</script>
Vue 指令 - v-for 中的key
什么是 v-for 中的 key？
使用 key 维护列表的状态
官方推荐在使用 v-for 指令的时候，要添加一个 key 属性
key 的作用：用来给循环的元素添加一个唯一的标识，来防止可能会出现的列表无法被正确渲染的问题
key 的注意事项？
- 使用 v-for 指令时 一定要指定 key 的值（既提升性能，有防止列表渲染紊乱）
- key 的值只能是 字符串 或 数字类型
- key 的值 必须具有唯一性（建议把 数据项 id 属性的值 作为 key 的值）
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
