Vue框架入门
- 目标：
了解Vue框架的技术特性
掌握Vue的语法基础应用
- Vue概述：
Vue 是一个用于构建用户界面的客户端框架
官方网址： https://cn.vuejs.org/
- 第一个案例：
文本框内容重现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个案例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
</head>
<script>
//Vue依靠响应式数据
window.onload = function() {
const app = new Vue({
el: '#app',
data: {
num: ' '
},
})
}
</script>
<body>
<div id="app">
<input type="text" v-model="num">
<span>{{num}}</span>
</div>
</body>
</html>
- 技术特性：
- MVVM（Model-View-ViewModel）
- 数据驱动+组件化的前端开发
- 结构简单，轻量级的框架
- 不兼容低版本的IE
- 技术要点：
- Vue基础语法
- 实例对象和生命周期
- 计算属性和侦听器
- 自定义指令和动画
- 服务器交互
- 组件定义和通信
- 路由和单页面应用
- vuex状态管理
- UI框架
- 安装和使用：
- 下载vue.js文件，并导入页面使用
- 链接远程CDN，导入页面使用
- 通过脚手架cli安装（单页面应用）
- Vue语法基础
重点：
- 实例对象
- 模板语法
- 指令
- 实例对象
- 每个Vue应用都是从实例对象开始的
- 选项列表
(后面详细讲解)
- el (关联id)
- data
- methods
- computed
- watch
- components
- router
- …
- el 用于挂载页面中的DOM元素，起到类似于选择器的作用。
<body>
<div id="app">
</div>
</body>
<script>
var vm = new Vue({
el: '#app', //关联id是"app"的div
})
</script>
- data是DOM元素绑定的数据对象，提供给DOM元素使用的数据属性。
var vm = new Vue({
el: '#app',
data: {
属性名1： 变量值，
属性名2： 变量值
}
})
- methods是与DOM元素交互所使用的方法。
var vm = new Vue( {
el: ‘#app’， //关联id是“app”的div
data:{}，
methods:{
函数名1:function(){
函数代码
}，
函数名2：function(){ }
}
})
- 模板语法
-
Vue使用模板语法实现DOM和实例对象的绑定。
-
绑定类型：
- 绑定DOM元素的内容
- 绑定DOM元素的属性
模板语法绑定元素内容（一）：
- 通过插值表达式，使用{{}}将js代码包裹，使js中的数据属性值进行展示，也称为Mustache语法。
- 插值表达式中的内容类型：
- data中的属性名
- 数字
- 字符串
- 布尔值
- 对js的数据属性进行运算
<div id=“app”>
<h1>姓名：{{name}}</h1>
<p>年龄：{{100}}</p>
<p>门派：{{“武当”}}</p>
<p>党员：{{false}}</p>
<p>杀伤力：{{damage+100}}</p>
</div>
例子：（1）
例子：（2）
模板语法绑定元素内容（二）：
- 通过v-html指令实现元素标签的解析， 适用于html标签代码的解析展示，会覆盖元素标签内容的内容。
例子：
（结果及过程）
模板语法绑定元素内容（三）：
- 双向绑定是指DOM和实例数据相互影响
- 通过v-model指令，实现元素内容的双向绑定，适用于可编辑的表单元素
（例如：上面第一个案例）
data:{
num：100
}
<div id =“app”>
<span>{{num}}</span>
<input type=“text” v-model=“num”>
</div>
模板语法绑定元素属性：
- 通过v-bind指令，实现元素属性的绑定，可省略用" : "
例子
（结果及过程）
指令概述：
- 指令是一种带有 "v- "前缀的特殊标签属性
- 指令的类型
- 交互指令: v-on
- 条件渲染指令: v-if 、 v-else
- 循环指令: v-for
交互指令：
- v-on指令，结合实例对象的methods使用，实现交互功能，省略时使用" @ "
例子：（一）
（结果及过程）
例子：（二）
《结果（切换前后）及过程》
或者：
例子：（三）
（结果及过程）
*** 注意 ***：在methods（）中引用data（）中内容时，需要在内容前面添加“this”指定。
条件渲染指令（一）
- 条件渲染指令用于控制DOM元素是否展示
- v-if指令
- v-else指令
- v-else-if指令
- v-show指令
例子：（v-if）
（结果及过程）
例子：（v-else-if）
（过程及结果）
条件渲染指令（二）
- v-show指令
- v-show指令和v-if 指令的区别
例子：
（使用v-if、v-show同时都显示时，isshow：true，没有差别）
例子：
（使用v-if、v-show同时不显示时，isshow：false，有差别）
区别：
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
- v-show只是简单的基于css切换；
性能：
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
使用场景：
- v-if适合运营条件不大可能改变；
- v-show适合频繁切换
循环指令：
- v-for指令用于对实例对象的数据源进行遍历循环
- 数据源可以是数组或者对象
例子：（v-for）
（结果及过程）
例子：数组序号（index序号从0开始）
（结果及过程）
循环数组：
- 循环遍历获取数组成员
- 循环遍历获取数组
例子：
（结果及过程）
(未完待续…)
扫一扫
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
