初始化一个Vue项目
npm install --global vue-cli@2.9.3vue listvue init webpack project_namecd project_namenpm 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）连接。推荐使用大写开头的方式。组件里可以引用组件
非全局组件的使用方法
定义一个组件Bexport default {
}
在A文件中引入B ()import b_name from '@/components/B'
在A文件中注册组件Bcomponents:{
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 修饰符，以创建『双向绑定』
