vue2.0入门

前言

• 今天看了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>
 

• 监听属性：watch

条件语句

• v-if 添加渲染，惰性
• v-show

列表渲染

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 :     //模板
       }
   } 
});
 

• 在模块系统（webpack）中局部注册

单文件组件安装

• 安装npm，安装node后会自动安装npm，npm -v查看版本
• 安装cnpm

//由于npm使用时比较慢，使用cnpm
npm install -g cnpm --registry.npm.taotao.org
 

• 安装vue-cli

cnpm install -g @vue/cli
vue --version    # 查看cli版本
 

• 安装webpack，一个js打包器

cnpm install -g webpack
 

• 创建项目：打开cmd，切换到d盘创建项目

//启动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: 只调用一次， 指令与元素解绑时调用