安装vue
-
下载 vue.js文件，在项目中引用
-
使用CDN（推荐链接到一个明确的版本号）
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -
使用 NPM 手动搭建webpack （繁琐）
①：创建项目文件夹，并在文件夹中 cmd
②：npm init -y 初始化环境
③：手动安装 vue 、 vuex 、 vue router …等 -
使用 Vue CLI 脚手架 单页面应用
①：cmd 安装脚手架 ：npm install -g @vue/cli
②：cmd 创建项目：vue create 项目名称【注意：项目名称必须英文小写 或下划线】
指令
内置指令
文本相关
- v-text
用于展示文本结构，是什么内容就展示啥
<body>
<div id="app">
<div v-text="html"> </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 作用于的元素内
el: '#app',
// 存放数据
data: {
html: "<span>111111111</span>",
}
})
</script>
</body>
<!--
输出
<span>111111111</span>
-->
- v-html
用于展示html结构，能识别其中的元素节点，渲染html标签
<body>
<div id="app">
<div v-html="html"> </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 作用于的元素内
el: '#app',
// 存放数据
data: {
html: "<span>111111111</span>",
}
})
</script>
</body>
<!--
输出
111111111
-->
流程控制
-
v-show
根据后面的值隐式转换来控制元素的显示隐藏 控制的是css的display: none; (频繁的操作) -
v-if
根据后面的值隐式转换来控制元素的显示隐藏 控制的是元素的节点是否存在 (很少的操作)注意： v-if 有分组情况 如果在第一个 v-if 后面没有找到 v-else-if 或者是 v-else 那么本组就结束，找下一组
-
v-else-if
-
v-else
-
v-for
三种使用方式
1.循环数字<body> <div id="app"> <ul> <li v-for="(item, index) in 100"> {{ item }} ---- {{ index }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ // 作用于的元素内 el: '#app', // 存放数据 data: { } }) </script> </body> <!-- 输出 数字 角标 {{ item }} ---- {{ index }} 1 ---- 0 2 ---- 1 3 ---- 2 . . . . 100 ---- 99 -->2.循环数组
<body> <div id="app"> <ul> <li v-for="(item, index) in arr"> 姓名：{{ item.name }} ---- 年龄：{{ item.age }} ---- {{index}} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ // 作用于的元素内 el: '#app', // 存放数据 data: { arr: [ { name: '张三', age: 18 }, { name: '李四', age: 29 }, { name: '王五', age: 28 }, { name: '赵六', age: 36 } ], } }) </script> </body> <!-- 输出 值 角标 姓名：{{ item.name }} ---- 年龄：{{ item.age }} ---- {{index}} 姓名： 张三 ---- 年龄： 18 ---- 0 姓名： 李四 ---- 年龄： 29 ---- 1 姓名： 王五 ---- 年龄： 28 ---- 2 姓名： 赵六 ---- 年龄： 36 ---- 3 -->3.循环对象
<body> <div id="app"> <ul> <li v-for="(value, key, index) in obj"> {{ value }} --- {{ key }} --- {{ index }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ // 作用于的元素内 el: '#app', // 存放数据 data: { obj: { name: '王五', age: 18, address: '北京' } } }) </script> </body> <!-- 输出 键值 键名 类似角标 {{ value }} --- {{ key }} --- {{ index }} 王五 --- name --- 0 18 --- age --- 1 北京 --- address --- 2 -->v-show 与 v-if 区别： v-show 修改css样式 display 隐藏 v-if 元素节点 删除 v-for 与 v-if 不一起使用： v-for 的优先级比 v-if 更高，不建议一起使用 在<template>上使用v-for（<template>本身是标签，但不会渲染到页面上）判断跟key放到里面的元素内 <!-- v-for与v-if同时使用案例--> <template v-for="i in 10"> <div :key="i" v-if="i%2 == 0"> {{ i }} </div> </template>
属性绑定
- v-bind 【简写： ：】
用于绑定属性
事件
-
v-on 【简写 ： @】
用于绑定事件事件:methods 里面的函数调用与否都能执行 如果调用可以传递参数 如果没有传递参数，那么第一个参数默认为 事件对象， 如果传递了参数 methods: { fn(num) { console.log(num) } }①事件修饰符
阻止冒泡事件
.stop - 调用 event.stopPropagation()。
. capture - 添加事件侦听器时使用 capture 模式。
. self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
不能同时使用
. passive - (2.3.0) 以 { passive: true } 模式添加侦听器
. prevent - 调用 event.preventDefault()。②按键修饰符
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
双向绑定
-
v-model
用于双向绑定 只能适用于表单中
①修饰符.lazy - 当执行change事件的时候才把里面的内容拿到
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
input checkbox 多选框 是个数组类型：
<input type="checkbox" v-model="val" value="1">
<input type="checkbox" v-model="val" value="2">
<input type="checkbox" v-model="val" value="3">
<input type="checkbox" v-model="val" value="4">
data(){
return{
val:[]
}
}
编译
- v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
示例：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不会显示，直到编译结束。
- v-pre
跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。 - v-once
只渲染元素和组件一次。 - v-slot 【 缩写： # 】 插槽
仅限于
自定义指令
全局指令
Vue.directive ( )
参数一：自定义指令 ； 参数二 ：钩子函数
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部指令
directives
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus
<input v-focus>
钩子函数
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
-
el：当前指令所绑定的元素，可以用来直接操作 DOM。
-
binding：一个对象
-
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
-
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
-
List item
选项
-
data
Vue 实例的数据对象 -
props
props 可以是数组或对象，用于接收来自父组件的数据。- type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
- default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 - required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。 - validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。
-
methods 方法
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。 -
computed 计算属性 有缓存
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 -
watch 深度监听
注意，不应该使用箭头函数来定义 watcher 函数 -
directives 自定义指令
-
filters 过滤器链
-
components
-
生命周期
1、beforeCreate
2、created
3、beforeMount
4、mounted
5、beforeUpdate
6、updated
7、beforeDestroy
8、destroyed
9、activated
10、deactivated
11、errorCaptured
全局API
- vue.directive()
- vue.filter()
- vue.component()
- vue.nextTick()
- vue.set()
- vue.delete()
- Vue.use()
实例属性与方法
方法
- this.$emit（ )
- this.$mount( )
- this.$nextTick()
- this.$set()
属性
- this.$options
- this.$refs
特殊属性
- ref
- is
- key
内置组件
- component
- keep-alive
- slot
- transition
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
