前言
- 今天看了vue的官方文档，于是总结了一下vue的基础知识，包括自己的一些理解
- 官网讲的非常详细，vue官方文档
基础
- 渐进式JavaScript框架
- 开发版带有完整警告，生产版体积更小
- 视图部分写html，脚本部分是vue实例
- 将脚本中data的属性响应到视图
- 生命周期钩子写在vue实例内，生命周期函数内不能使用箭头函数
- 安装：使用script标签引入下载好的js文件，或者使用cdn引入
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="vue.min.js"></script>
- 需要实例化
- 带有$的是vue实例所拥有的属性，没有的则是用户自定义的属性
- 在脚本部分，this指向vue的实例
//在视图部分 {{ }} 用于输出对象属性和函数返回值
//脚本部分
var vm = new Vue({
// 选项
el: //element，对象
data: {//定义属性 },
methods: {//定义函数方法},
})
//可直接使用该实例对象
vm.site = "goushen"
//$用户区分属性
document.write(vm.$el === document.getElementById('vue_det')) // true
模板
- v-once 只执行一次性插值，之后不再改变
- v-html 指令用于输出 html 代码，即绑定html标签；作为body的属性
- v-bind 指令绑定css代码， 脚本部分中该指令指定的变量为true则使用样式；作为body的属性，语法：v-bind:(当前标签的)属性= "脚本中data的属性"
- {{ }} 中同样支持js表达式
- v-if 指令作为body的属性，有vue实例的data属性决定true或false
- href作为html标签的参数，可绑定url
v-bind:href="url" //v-bind绑定了href，通过值 url 找到vue实例中data属性中指定的url
v-on:click="doSomething" //作为html标签的属性，表示点击后找到vue实例data中的doSomething
v-on:submit.prevent="onSubmit" // . 是特殊方式绑定，点后面表示方法
v-bind:class = "[class名:脚本中data名]" //绑定class
v-bind:class = "{class名:data属性名}" //绑定class
v-bind:class = "{class名1:data属性名1, class名2:data属性名2}" //绑定多个class，也可使用中括号
v-bind:class = "[data属性 ? 'css中class' : '']" //三目运算
:style = "{class名:data属性名}" //缩写方式，内联样式绑定
- v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，作为标签的元素
- 自定义过滤器，新建实例filters: {}属性
- 缩写：
<a v-bind:href="url"></a> 省略v-bind缩写成 <a :href="url"></a>
<a v-on:click="doSomething"></a> 将v-on: 替换成@则写成 <a @click="doSomething"></a>
条件语句
列表渲染
v-for = "item in items" //作为html标签的属性，items表示数组，item表示被迭代的元素别名
:key = "index" //作为属性，缩写方式，重新排序
事件绑定
v-on:事件 = "函数名(参数)" //作为标签属性，函数在脚本的method属性中补充
.stop
.prevent
.capture
.self
.once
.passive
双向绑定
v-model = "data的属性名" //作为标签的属性，在脚本中将自定义的data的属性名初始化；当选中对应的元素后，选中的值与脚本中设置的属性共享
组件
- 定义：可复用的vue实例
- 一个组件的模板必须具备一个根节点，即一个父节点
- 一个组件可复用，且相互独立
- 在模板内通过标签声明一个组件的插槽，标签写在脚本组件的template中，之后可在视图部分的组件标签中插入任意html标签
//视图部分，html标签
<div>
<!--通过html标签的方式对组件进行调用，标签的名称就是组件的名称-->
<组件名></组件名>
</div>
//脚本部分
// 创建组件，通过component函数创建，第一个参数是组件名称，
Vue.component('组件名', {
props: //为组件定义属性
data: //数据
template: '<h1>自定义组件!</h1>' //模板
methods: //组件的函数
})
// 创建根实例
new Vue({
el: '#app'
})
组件注册
- 全局注册，Vue.component的方式注册，可在任何vue实例中使用
- 组件名称命名规范：my-com-name 或者 MyComName 的方式
- 局部注册，声明在vue实例中
//视图部分
<!--使用局部组件-->
<test></test>
//脚本部分
new Vue({
components:{ //局部注册
test : { //组件名
template : //模板
}
}
});
单文件组件安装
- 安装npm，安装node后会自动安装npm，npm -v查看版本
- 安装cnpm
//由于npm使用时比较慢，使用cnpm
npm install -g cnpm --registry.npm.taotao.org
cnpm install -g @vue/cli
vue --version # 查看cli版本
cnpm install -g webpack
//启动vue cli图形管理界面
vue ui
//点击顶部的create / 底部的 create a new project here
//输入项目名称，选择包管理器
//选择默认设置，点击创建项目
//打开创建项目的文件夹
- 项目目录介绍
public # 打包部署
src # 用于开发
components # 组件目录， .vue后缀的文件是单文件组件
app.vue # 项目入口
在app.vue中通过import可引入单文件组件，使用components进行局部注册
在VSCode中运行项目：点击终端 > 新终端
npm install
npm run serve
# 1.在vue项目的components文件夹下新建文件，以 .vue作为后缀，如test.vue
# 2.由于我是使用vscode打开的vue项目，安装vetur插件后，直接在test.vue中输入vue，会自动提示所需标签
<template>
<!--模板-->
</template>
<script>
export default {
<!--脚本-->
}
</script>
<style>
<!--css样式-->
</style>
# 3.在app.vue中引入、注册、视图部分使用标签的方式 <组件名> 使用该组件
自定义指令
//视图部分，自定义指令作为标签的属性使用
<input v-名称>
//脚本部分使用 directives 选项来注册
Vue.directive('自定义指令名称', {
// 编写函数
})
//同样是在作为标签的属性使用
// 在vue实例中注册 局部
new Vue({
directives: {
指令名称: {
// 编写函数
}
}
})
钩子函数（自定义指令 编写函数时可选）
- bind: 只调用一次，第一次绑定时调用
- inserted: 被绑定元素插入父节点时调用
- update: 被绑定元素所在的模板更新时调用
- componentUpdated: 被绑定元素所在模板完成一次更新周期时调用
- unbind: 只调用一次， 指令与元素解绑时调用
