Vue入门
未读
7、使用Vue脚手架进行模块化开发
1.安装vue-cli npm install -g @vue/cli
2. 安装初始化工具 拉取 2.x 模板 (旧版本) Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vuecli) 被覆盖了。 如果你仍然需要使用旧版本的 vue init 功能,你可
Vue入门
未读
6、生命周期和钩子函数
生命周期 我们来看一下官网给的 Vue 生命周期的图: 从上面这幅图中,我们可以看到 vue 生命周期可以分为八个阶段,分别是: **beforeCreate(创建前) ** 在实例初始化之后,此时的数据观察和事件机制都未形成,不能获得 DOM 节点。 **created( 创 建 后 ) ** 实
Vue入门
未读
4、计算属性和侦听器
计算属性 VS 方法 如果不使用计算属性,在 methods 里定义了一个方法,也可以实现相同的效果,甚至该方法还可以接受参数,使用起来更灵活。 既然 methods 同样可以解决模板中复杂逻辑计算的问题,那么为什么还需要使用计算属性呢? 原因就是:计算属性是基于它的依赖缓存的。前面我们介绍过,计算
Vue入门
未读
3.6 v-model 双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<div>
<div>
<label>年龄:</label>
Vue入门
未读
3.5 v-bind : 属性绑定
v-bind用于给元素的属性赋值。v-bind后面是 :属性名=[变量名]。 例如:v-bind:title="message": 很多属性值是不支持表达式的, 就可以使用v-bind 代码解释: 在 HTML 代码第 2 行,我们使用了 vbind 指令给 div 标签的 title 属性赋值。
Vue入门
未读
3.4 v-on : 绑定事件监听
有时候,我们需要给元素绑定事件,vue 中提供了指令 v-on 来进行事件的绑定。用法: v-on:事件名="方法",例如:v-on:click=“alert”。 v-on:事件名, 可以缩写为: @事件名 <!DOCTYPE html>
<html lang="en">
<head>
Vue入门
未读
3.3 v-for : 遍历
v-for 用于列表的循环渲染。基本语法:v-for="item in data",data 可以是数组或者对象,接下来我们介绍对两种数据类型的循环。 遍历数组 : v-for="person in persons" $index <!DOCTYPE html>
<html lang="en">
Vue入门
未读
3.2 v-if v-else v-show
vue提供了vif和vshow两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来看一下使用两个指令各有什么效果: **v-if **: 如果vlaue为true, 当前标签会输出在页面中 v-show : 就会在标签中添加display样式, 如果vlaue为true, display=blo
Vue入门
未读
3.1 v-text/v-html: 指定标签体
**v-text **: 当作纯文本 v-text是元素的 InnerText 属性,它的作用和之前我们使用的 {{}} 一样,用于数据绑定: <!DOCTYPE html>
<html lang="en">
<head>
<title>Document</t