Vue实战

初始化一个Vue项目

• npm install --global vue-cli@2.9.3
• vue list
• vue init webpack project_name
• cd project_name
• npm run dev

new 一个 vue 对象

const vm = new Vue({
	el:'#app',
	name:'vue_name',
	data(){
		return {
			key:value
		}
	},
	components:{
		HelloWorld,
	}，
	directives:{
		//devtices name
	},
	template:'<App/>',
	methods:{
		//此处定义方法
	},
	beforeCreeate(){
		//生命周期函数
	},
	props:{
	
	},
	watch:{
		attribute(newValue,oldValue){
				//watch 选项提供了一个方法来响应数据的变化
		}
	}
	
})

组件

组件分为全局组件和局部组件

单文件组件的文件名，应该始终以单词大写开头（PascalCase），或者始终以横线（kebab-case）连接。推荐使用大写开头的方式。组件里可以引用组件

非全局组件的使用方法

• 定义一个组件B

  export default {
  
  }
  

• 在A文件中引入B ()

  import b_name from '@/components/B'
  

• 在A文件中注册组件B

  components:{
  	b_name,
  }
  

• 在A文件 template中使用B组件，注意使用闭合标签

全局组建的使用

• 定义全局组件
• 注册全局组件

import Vue from 'vue'
import Message from './Message'

Vue.component('Message', Message)
注册全局组件需要使用 Vue.component，第一个参数 'Message' 是组件名称，第二个参数 Message 是一个对象或者函数，我们这里是一个对象

• 入口js文件引入全局组件
• 使用全局组件

基础语法

• 插值：Vue.js 使用 Mustache 语法 （双大括号）进行数据绑定
• HTML 特性，不能使用 Mustache 语法，而要使用 v-bind 指令，:src 是 v-bind:src 的缩写，使用缩写可以简化模板和提高开发效率
• 指令（Directives）是带有 v- 前缀的特殊属性，指令属性的值是单个 JavaScript 表达式（ v-for 是例外），当表达式的值改变时，其作用的 DOM 也将响应式的改变。
• v-for指令的两种用法

<li v-for="item in items">
	{{item}}
</li>

<li v-for="(item,index) in items">
	{{index}}
</li>

//在组件上使用 v-for 指令进行渲染的时候，需要添加 key。
它可以方便 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素。每一项的 key 应该是唯一的

• DOM 事件 @click="methodName(args)" 不要忘记在 methods 中定义事件
• v-html指令用于直接渲染html模板字符串
• v-model 指令可以在表单 <input> 及 <textarea>元素上创建双向数据绑定
• v-show 是一个条件渲染指令，它只切换元素 CSS 属性的 display
• 实例的$nextTick 方法用于在下次 DOM 更新循环结束之后执行延迟回调,nextTick 有一个全局方法 Vue.nextTick，在实例上使用 this.$nextTick，不要忘记 $
• $emit 用于触发当前实例上的事件，其第一个参数是事件名称，后面还可以附加若干参数。

Class与Style属性绑定方法

• 对象方法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
• 数组方法 <div v-bind:class="[isActive ? activeClass : '', errorClass]">
• 对于复杂的可以使用混合模式 <div v-bind:class="[{ active: isActive }, errorClass]">

指令

指令包括非全局注册的指令，全局注册指令
一个指令定义对象可以提供如下几个钩子函数（均为可选）：
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置；
inserted：被绑定元素插入父节点时调用；
update：所在组件的 VNode（虚拟节点）更新时调用，但是可能发生在其子 VNode 更新之前；
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用；
unbind：只调用一次，指令与元素解绑时调用，在这里可以移除绑定的事件和其他数据；
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来操作 DOM ；
binding：一个对象，binding.value 表示指令的绑定值，如 v-title="‘我是标题’" 中，绑定值为’我是标题’；
vnode：Vue 编译生成的虚拟节点；
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
其中 binding 主要包括 例如 v-validator:input.required="xxx"
binding.name：指令名，不包括 v- 前缀，这里是 ‘validator’ ；
binding.value：指令的绑定值，这里是xxx ；
binding.arg：传给指令的参数，这里是 ‘input’ ；
binding.modifiers：一个包含修饰符的对象，这里是 { required: true }

下面是非全局指令的使用步骤

• 自定义指令
• 局部引入指令
• 注册指令
• 使用指令 例如自定义了一个指令title 则在使用的时候是这样的v-title="bind.value"

下面是全局指令的使用步骤

• 新建指令
• 注册全局指令（js文件）
• 入口main.js引入全局指令
• 使用全局指令

vue-router

vue-router 是一个官方的路由库，其使用非常方便，我们只需将组件映射到路由，然后通过在页面中添加 <router-view/>进行渲染，就可以达到切换路由的目的。

• 安装vue-router
  npm install vue-router --save
• 创建路由配置文件（js文件）

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router);

const routes = [
   {
   	path:'/auth/register',		//路由的路径
   	name:'Register',			//路由的名称
   	component:() => import('@/views/auth/Register') 	//对应的视图组件，此方法可以实现路由的懒加载，即使用的时候才加载
   },
];

const router = new Router({
   mode:'histort',	//路由模式，默认值 'hash' 使用井号（ # ）作路由，值 'history' 可利用 History API 来完成页面跳转且无须重新加载；
   routes 			//具体的路由配置列表
});

export default router

• 入口js文件引入路由配置，并在vue实例中注入路由
• 添加 <router-view>

<router-view> 是一个功能组件，它会渲染路径匹配到的视图组件

• 添加<router-link>

<router-link>组件支持用户在具有路由功能的应用中导航，通过 <router-link> 上的 to 属性可以指定目标地址

工具函数

• 定义一个工具函数 譬如export default function func_name(){ return {}}
• Vue文件引入工具类函数，直接使用

Props

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，
在子组件中改变这个对象或数组本身将会影响到父组件的状态。

props 是用来传递数据的，我们需要在子组件用 props 选项声明它预期的数据

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定，
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop

props 的绑定默认是单向的，我们要在组件内部更新props的某一值，需要在父组件上添加 .sync 修饰符，以创建『双向绑定』