vue相关理论知识

时间 2019-11-09

标签 vue 相关理论知识繁體版

原文原文链接

es6经常使用语法简介css

　es是js的规范标准html

　let前端

　　特色：
　　1.有全局和函数做用域,以及块级做用域(用{}表示块级做用域范围)
　　2.不会存在变量提高
　　3.变量不能重复声明vue

　constnode

　　特色:　　react

　　1.有块级做用域
　　2.不会存在变量提高
　　3.不能重复声明变量，jquery

　　4.只声明常量,必须赋值,且定义以后不能更改webpack

　模板字符串　　ios

　　tab键上面的反引号git

　　　　能够进行字符砖的拼接

　　　　 ${变量名}来插入变量值　　

　　　　let name = '将来';
　　　　let str = `我是${name}`

　数据的解构和赋值 ==>可用于数据的交换

　　数组的解构和赋值:

　　 let ary = [1,2,3]

　　 let [a,b,c] = ary;

　　对象的解构和赋值:

　　　let obj = {username:'pan', age:24};

　　　let { username: user, age:age }

　函数的扩展:

　　默认值参数(没给出要传的值时,选择默认值)

　　箭头函数

　　 ()=> {}

　　this的指向发生了改变

　　关于this指向,与vm实例没有任何关系。而是与箭头函数和普通函数的区别。总结两点：一、es5的普通函数，this指向是指向了调用者，好比vue实例的方法（在methods中声明了一个方法）是由vue实例vm调用的，因此this指向vm。二、箭头函数的this指向它的调用者所在的上下文，也就是vm实例所在的上下文（定义vm的父类），即window.

　es6中的类

　　　class关键字定义一个类,

　　　　必需要有constructor方式(构造方法),若是没有, constructor(){}

　　　　必须是使用new来实例化,不然报错

　　　类的继承

　　　　必须在子类的constructor方法里写super方法

　对象的单体模式

一介绍

　　是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。

二,安装

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

　1.cdn下载方式:　

连接到一个能够手动更新的指定版本号(不用下载)：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

　　　npm下载方式:

　　须要在命令行内下载

npm install vue

　　2. 引包

  <script src='./vue.js'></script>

　　3. 实例化:

//2.实例化对象
new Vue({ el:'#app', //绑定标签

　　//数据属性

　　data:{
        msg:'黄瓜', person:{ name:'wusir' }, msg2:'hello Vue' } });

三,vue模板与经常使用指令

　　模板语法:(能够插入你想插入的内容,除了if-else if-else用三元运算代替)

<!--模板语法-->
<h2>{{ msg }}</h2>  //文本插值
<h3>{{ 'hhahda' }}</h3>  //字符串
<h3>{{ 1+1 }}</h3>  //算术运算
<h4>{{ {'name':'alex'} }}</h4>  //字典
<h5>{{ person.name }}</h5>  //属性调用
<h2>{{ 1>2? '真的': '假的' }}</h2>  //逻辑判断
<p>{{ msg2.split('').reverse().join('') }}</p>  //方法执行

　　注意:

　　每一个绑定都只能包含单个表达式;

　　模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不该该在模板表达式中试图访问用户定义的全局变量。

　　系统指令:

　　指令是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外状况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于 DOM。

　　v-text : 至关于innerText

　　v-html : 至关于innerHTML

　　v-if 和 v-show :　　

v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。

　　v-for : 遍历列表

v-for能够遍历列表，也能够遍历对象 在使用vue的v-for指令的时候，必定要绑定key,避免vue帮我们计算DOM

　　v-bind: 能够绑定标签中任何属性 ,简写时能够省略　

v-bind:src   等价于  :src

　　v-on: 能够监听js中全部事件简写为@

v-on:click  等价于 @click

　　指令示范

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<style>-->
        <!--.box {-->
            <!--width: 200px;-->
            <!--height: 200px;-->
            <!--background-color: red;-->
        <!--}-->
    <!--</style>-->
        <style> .box1 { width: 200px; height: 200px; background-color: red;
        } .active{ background-color: green;
        }

    </style>
</head>
<body>
<div id = s1>
    <!--模板语言-->
    <h4>{{ obj }}</h4>
    <h2>{{ obj.name }}</h2>
    <p>{{ di_zhi }}</p>
</div>

<div id="s2">
    <!--模板语言 插入文本值<h2>dsb</h2>--> {{ msg }} <!--至关于inner Text 展现字符串的文本样式<h2>dsb</h2>-->
    <div v-text="msg"></div>
    <!--至关于inner Html 展现出msg原有的HTML样式 dsb-->
    <div v-html="msg"></div>
</div>

<div id="s3"> {{ add(4,3)}} <!-- v-on 监听js中的全部事件 -->
    <button v-on:click="handleClick">隐藏</button>
    <!-- 来回触发'隐藏'事件,isShow的值真假变换,v-show的渲染效果,也就来回变换'-->
    <div class="box" v-show="isShow">火影忍者</div>
    <!--抽随机数,成立执行'显示',不然'不显示'-->
    <div v-if="Math.random() >0.5"> 显示 </div>
    <div v-else> 不显示 </div>
</div>

<div id="s4">
    <!-- v-on 监听js中的全部事件,能够简写成 @ 如 @mouseenter -->
    <button v-on:mouseenter = 'handlerChange' v-on:mouseleave = 'handlerLeave'>切换颜色</button>
    <!-- v-bind 能够绑定标签中的全部属性 能够直接省略,但要留有空格 如: src-->
    <img :src="imgSrc" :alt="msg">
    <div class="box1" :class="{active:isActive}"></div>
</div>

<div id="s5">
    <ul v-if="data.status == 'ok'">
        <!-- v-for的优先级最高 diff算法 -->
        <!-- item接收的是对象,index接收的是对象的索引 -->
        <li v-for = '(item,index) in data.users' :key="item.id">
            <h3>{{ item.id }}***{{ item.name }}***{{ item.age }}</h3>
        </li>
    </ul>
    <!-- 接收的键key是在后面,接收的值value是在前面 -->
    <div v-for = '(value,key) in person'> {{ key }}***{{ value }} </div>
</div>

<!--引包-->
<script src="vue.min.js"></script>
<script>
    <!--实例化对象-->
    new Vue({ // el: '#s1', //绑定标签
        // data:{
        // //数据属性
        // obj: {
        // name: 'panda',
        // hobby:'sleep',
        // sex:'boy'
        // },
        // di_zhi:'北京'
        // },

        // el:'#s2',
        <!--data中是一个函数 函数中必定要return一个对象 能够为空,但不能没有-->
        // data(){
        // return{
        // msg:'<h2>dsb</h2>'
        // }
        // }

        // el:'#s3',
        // data() {
        // return {
        // msg: "<h2>alex</h2>",
        // num: 1,
        // isShow: true //初始isShow 为true,
        // }
        // },
　　　　　　//在该组件中声明方法
        // methods: {
        // add(x,y) {
        // console.log(this.num);
        // return x + y
        // },
        // handleClick() {
        // //数据驱动
        // this.isShow = !this.isShow; //点击 button按钮 触发该事件,执行此函数,即isShow为 flase
        // }
        // }

        // el:'#s4',
        // data() {
        // return{
        // imgSrc:'星空600_0.jpeg',
        // msg:'沟渠',
        // isActive:true
        // }
        // },
        // methods:{
        // handlerChange(){
        // this.isActive = !this.isActive;
        // this.isActive = false;
        // },
        // handlerLeave() {
        // this.isActive = true;
        // }
        // }
 el:'#s5', data(){ return{ data:{ status:'ok', users:[ {id: 1, name:'潘', age:'24'}, {id: 2, name:'宋', age:'22'}, ] }, person:{ name:'潘' } } } }) </script>

</body>
</html>

　　watch和computed (watch能够监听单个属性;computed 监听多个属性)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <button @click = 'clickHandler'>修改</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({ el:'#app', data(){ return { msg:"alex", age:18 } }, methods:{ clickHandler(){ this.msg = "wusir" } }, watch:{ //watch单个属性，若是想监听多个属性 声明多个属性的监听
                'msg':function (value) { console.log(value); if (value === 'wusir'){ alert(1); this.msg = '大sir' } }, 'age' :function (value) { } } }) </script>
</body>
</html>




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <p>{{ myMsg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script> let vm = new Vue({ el: '#app', data() { return { msg: "alex", age: 18 } }, created() { //定时器 ajax 库 function(){}
 setInterval(() => { }) }, methods: { clickHandler() { //this的指向就是当前对象
                this.msg = "wusir"; this.age = 20; }, clickHandler: function () { console.log(this); } }, computed: { myMsg: function () { //业务逻辑

// 计算属性默认只有getter方法
                return `个人名字叫${this.msg},年龄是${this.age}`; } } }) console.log(vm); </script>
</body>
</html>

　　数据驱动逻辑流程

表单输入绑定

　　v-model 双向绑定只能应用在input textare select

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="s1">
    <label for="username">用户名</label>
    <!-- v-model 双向绑定'msg'属性 即input标签内可以展现原有的msg值,可是当此处msg 的值改变时,原有的msg值也跟着改变,就是相互能够共同做用于msg -->
    <input type="text" v-model="msg" id="username">
    <!--在模板上显示 msg 值-->
    <p>{{ msg }}</p>
    <textarea placeholder="add multiple lines" v-model="msg"></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>

    <!--多个复选框使用列表保存-->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" >
    <label for="jack">Jack</label>
    <input type="checkbox" id="song" value="Song" v-model="checkedNames" >
    <label for="song">Song</label>
    <br>
   <span >Check name:{{ checkedNames }}</span>
</div>
<script src="vue.js"></script>
<script>
    new Vue({ el: '#s1', data() { return { msg:'he', //checked 初始值为false,当选中时变成true,在页面中取消或选中
                // 该属性,此处该属性的值也随着改变,即双向绑定.
 checked:false, checkedNames:[], } } }) </script>
</body>
</html>

组件化开发

　　局部组件　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"> {{ msg }} </div>
<script src="vue.js"></script>
<script>
    // Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 必定要有返回值
    <!--声明局部组件,组件中的data必须是函数--> let App = { data() { return { text: '大佬' } }, template: ` <div id="a">
                <h2>{{ text }}</h2>
            </div>
 `, methods:{ } } new Vue({ el:'#app', data() { return { msg:'pan' } }, // 引用局部组件
        // 在vue的实例化对象中,若是有el 和 template ,那么template定义模板的优先级大于el
 template: ` <div class="app">
                <App></App>
            </div>
 `, // 挂载局部组件,注意局部组件的使用必需要先挂载
 components: { App } }) </script>

</body>
</html>

　　全局组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="s1">
    <App></App>
</div>

<script src="vue.js"></script>
<script>
    // VBtn 全局组件,不用在后面进行挂载
    // 其中第一个参数是组件的名字,第二个参数是options选项
    // slot是vue中提供的内容组件,它会分发内容
 Vue.component('VBtn', { data(){ return{ } }, template:`<button>
            <slot></slot>
            </button>`
 }) // 声明局部组件
 let Vheader = { data(){ return { } }, // 定义模板内容
 template:` <div>
                <h2>火影忍者</h2>
                <VBtn>登陆</VBtn>
            </div>
 ` } let App = { data(){ return{ text:'火影忍者' } },.0 template: ` <div id="a">
                <h2>{{ text }}</h2>
                <Vheader></Vheader>
                <VBtn>删除</VBtn>
                <br>
            </div>
 `, methods:{ }, components:{ //在组件中挂载局部组件
 Vheader } } new Vue({ el:'#s1', data() { return{ msg:'alex' } }, template:`<App />`,
 components:{ // 挂载局部组件
 App } }) </script>
</body>
</html>

　父向子组件传值:

　　在子组件中使用props声明,能够直接在子组件中任意使用

　　Prop 是你能够在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，咱们能够用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })

　　一个组件默承认以拥有任意数量的 prop，任何值均可以传递给任何 prop。在上述模板中，你会发现咱们可以在组件实例中访问这个值，就像访问 data 中的值同样。

　　一个 prop 被注册以后，你就能够像这样把数据做为一个自定义特性传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

　　父组件要定义自定义的属性

　子向父组件传值:

　　子组件中经过$emit()触发父组件中的自定义的事件

　　父组件中声明自定义的事件介绍

　　在父组件中,添加一个postFontSize数据属性来支持这个功能:

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

　　如今咱们在每篇博文正文以前添加一个按钮来放大字号：　

Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button> Enlarge text </button>
      <div v-html="post.content"></div>
    </div> ` })

　　Vue提供了一个自定义时间的系统来解决这个问题,能够调用内建的$emit 方法并传入事件的名字,向父级组件触发一个事件:

<button v-on:click="$emit('enlarge-text')"> Enlarge text </button>

　　而后能够用v- on 在博文组件上监听这个事件,就像监听原生DOM事件同样:　

<blog-post ... v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

　　平行组件传值(待整理)

　　使用$on()和$emit() 绑定的是同一个实例化对象

　　 A==>B组件传值

　　　　B组件中要使用$on(''事件的名字'',function(){})

　　　 A组件中使用$emit('事件的名字',值)

　　过滤器

　　　过滤器能够用在两个地方：双花括号插值和 v-bind 表达式;

　　过滤器要被添加在JavaScript表达式的尾部,由 '|' 符号标识;

　　局部过滤器 --在当前组件内部使用过滤器:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        <!-- 声明一个局部组件,并在组件内设置局部过滤器 --> let App = { data(){ return { msg:"hello world", time:new Date() } }, template: // msg表示将要操做的数据,'|' 后为过滤器名字 即便用该过滤器函数进行操做
 ` <div>我是一个APP {{ msg | myReverse }} <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>
               </div>
 `, // 设置局部过滤器,能够在组件内设置若干过滤器
 filters:{ // myReverse 式过滤器名字,后面跟函数 val 表示数据
 myReverse:function (val) { console.log(val); return val.split('').reverse().join('') }, //年-月- 日 年- 月
 myTime:function(val,formatStr){ return moment(val).format(formatStr); } } } new Vue({ el:'#app', data(){ return { } }, //挂载局部组件
 components:{ App } }) </script>
</body>
<html>

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

　　全局过滤器只要过滤器一建立,在任何组建中都可以使用:

Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字('alex'，'wusir')

生命周期钩子函数

　　全部的生命周期钩子自动绑定 this 上下文到实例中，所以你能够访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是由于箭头函数绑定了父上下文，所以 this 与你期待的 Vue 实例不一样，this.fetchTodos 的行为未定义。

　　beforeCreate　　

类型：Function
详细：

数据更新时调用，发生在虚拟 DOM 打补丁以前。这里适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，由于只有初次渲染会在服务端进行。

　　created　　

类型：Function
详细：

在实例建立完成后被当即调用。在这一步，实例已完成如下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

　　虚拟DOM React

　　发送ajax获取数据实现数据驱动视图

　　beforeMount　　　

类型：Function
详细：

在挂载开始以前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。

　　mounted　　

类型：Function
详细：

el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺全部的子组件也都一块儿被挂载。若是你但愿等到整个视图都渲染完毕，能够用 vm.$nextTick 替换掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。

　　获取真实DOM

　　beforeUpdate

类型：Function
详细：

数据更新时调用，发生在虚拟 DOM 打补丁以前。这里适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，由于只有初次渲染会在服务端进行。

　　updated

类型：Function
详细：

因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，因此你如今能够执行依赖于 DOM 的操做。然而在大多数状况下，你应该避免在此期间更改状态。若是要相应状态改变，一般最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺全部的子组件也都一块儿被重绘。若是你但愿等到整个视图都重绘完毕，能够用 vm.$nextTick 替换掉 updated：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
该钩子在服务器端渲染期间不被调用。

　　activated

类型：Function
详细：

keep-alive 组件激活时调用。

该钩子在服务器端渲染期间不被调用。
参考：
- 构建组件 - keep-alive
- 动态组件 - keep-alive

　　deactivated

类型：Function
详细：

keep-alive 组件停用时调用。

该钩子在服务器端渲染期间不被调用。
参考：
- 构建组件 - keep-alive
- 动态组件 - keep-alive

　　beforeDestroy

类型：Function
详细：

实例销毁以前调用。在这一步，实例仍然彻底可用。

该钩子在服务器端渲染期间不被调用。

　　destroyed

　　若是开了定时器,必定要关闭定时器.

vue-router

　　是vue的核心插件

　　vue + vue-router 主要来作SPA(SIngle Page Application) 单页面应用

　　为何要使用单页面应用:

　　　　传统的路由跳转,若是后端资源过多,会致使页面出现白屏现象,让前端来作路由,在某个生命周期的钩子函数中发送ajax,数据驱动.为了用户体验使用vue-router

　　npm安装:　　

npm install vue-router

　　与模块系统一块儿使用时，必须经过Vue.use()如下方式显式安装路由器：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

　　使用全局脚本标记时不须要执行此操做.

　　1. 将组件映射到路由:　

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用router-link组件进行导航. -->

    <!-- 经过传递'to'道具来指定链接. -->
    <!-- 默认状况下,'<router-link>'将呈现为'<a>'标记 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 线路出口 -->
  <!-- 线路匹配的组件将呈如今此处 -->
  <router-view></router-view>
</div>

// 0. 若是使用模块系统(如: 经过vue-cli),则导入VueRouter // 而后调用'Vue.use(VueRouter)'`.

// 1. 定义路径组件.这些能够从其余文件导入
const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义一些线路每条线路都映射到一个组件.'组件'能够经过建立的实际组件构造
　　函数 'Vue.extend()',或者只是一个组件选项对象.

const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立路由器实例并传递'router'选项,你能够在这里传递其余选项

const router = new VueRouter({ routes // short for `routes: routes`
}) // 4.建立并挂载根实例.确保为路由器注入路由器选项,整个应用路由器感知.
const app = new Vue({ router }).$mount('#app')

　　2.动态路由器配:

　　咱们常常须要将具备给定模式的路线映射到同一个组件。例如，咱们可能有一个User应该为全部用户呈现但具备不一样用户ID的组件。在vue-router咱们能够在路径中使用动态段以实现：

const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // dynamic segments start with a colon
    { path: '/user/:id', component: User } ] })

　　如今，URL /user/foo和/user/bar将映射到相同的路由。

动态段由冒号表示:/。匹配路径时，动态段的值将this.$route.params在每一个组件中公开。所以，咱们能够经过更新User模板来呈现当前用户ID ：　　

const User = { template: '<div>User {{ $route.params.id }}</div>' }

　能够在同一路线中拥有多个动态细分，它们将映射到相应的字段$route.params。例子:

　　使用带有params的路由时要注意的一点是，当用户导航/user/foo到时/user/bar，将重用相同的组件实例。因为两个路由都呈现相同的组件，所以这比销毁旧实例而后建立新实例更有效。可是，这也意味着不会调用组件的生命周期钩子。

　　要对同一组件中的params更改作出反应，您只需观察$route对象便可：　　

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

　　例子:　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //若是之后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
    // Vue.use(VueRouter)
    //路由范式：
    //http://127.0.0.1:8080/index/user
    //http://127.0.0.1:8080/user/1 params
    //http://127.0.0.1:8080/user/2
    //http://127.0.0.1:8080/user?user_id =1 query const User = { data() { return { user_id:null } }, template: `<div>我是用户{{ user_id}}</div>`,
 created() { console.log(this.$route); //路由信息对象 // 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar， // 原来的组件实例会被复用。由于两个路由都渲染同个组件，比起销毁再建立， // 复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
 }, watch: { '$route'(to, from) { // 对路由变化做出响应...
 console.log(to.params.id); console.log(from); this.user_id = to.params.id; //发送ajax
 } } } //建立路由
 const router = new VueRouter({ //定义路由规则
 routes: [ { path: '/user/:id', name: 'User', component: User } ] }) let App = { data() { return {} }, // router-link和router-view 是vue-router 提供的两个全局组件
        //router-view 是路由组件的出口
 template: ` <div>
                <div class="header">
                    <router-link :to = '{name:"User",params:{id:1}}'>用户1</router-link>
                    <router-link :to = '{name:"User",params:{id:2}}'>用户2</router-link>
                </div>
                <router-view></router-view>
            </div> ` } new Vue({ el: '#app', //挂载 路由对象
 router, data() { return {} }, template: `<App />`,
 components: { App } }) </script>
</body>
</html>

　　编程式导航

　　除了使用<router-link>为声明性导航建立锚标签以外，咱们可使用路由器的实例方法以编程方式执行此操做。(router.push(location, onComplete?, onAbort?))

　　要导航到其余URL,请使用router.push . 此方法将新条目推送到历史堆栈中,所以当用户单击浏览器后退按钮时,他们将被带到先前的URL.

　　当您单击a时<router-link>，这是内部调用的方法，所以单击<router-link :to="...">等同于调用router.push(...)。

陈述	编程
`<router-link :to="...">`	`router.push(...)`

　　获取原生的DOM的方式:　　

给标签或者组件 添加ref
<div ref = 'pan'>哈哈哈</div>
<p ref = 'a'></p>
<Home ref = 'b'></Home>

this.$refs.pan获取原始的DOM对象
this.$refs.b 获取的是组件实例化对象

　　scoped

　　 vue提供的属性,当前的样式只对当前的组件有效,对其余组件无做用

　　DIY脚手架　　　

　　一、nodejs 安装

　　二、npm init --yes 默认生成一个package.json文件（管理整个项目中的包）

　　vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 能够快速建立 vue 项目。

　　vue init webpack(模板名)+项目名 ----> 建立项目　

　　webpack模板配置完成后,在terminal中进入当前项目文件执行 npm run dev 便可运行该项目.　

　　webpack（前端中工做项目上线以前对整个前端项目优化）

entry 整个项目的程序入口（main.js或index.js）
output 输出的出口
loader 加载器对es6代码的解析 babel-loader, css-loader 解析css文件，style-loader 将css代码添加一个style标签插入header标签中，url-loader\
plugins html-webpack-plugin 丑陋

　　 build 和 config 文件 : webpack的配置文件

　　 src/main.js 文件 : 项目的入口

　　 router/index 文件夹 : 项目路由

　　element-ui的使用

　　　　npm安装 : npm i element-ui -s

　　　　下载安装后要在main.js 中引入element-ui:　　

import ElementUI from 'element-ui'; import 'element-ui'/lib/theme-chalk/index.css;

/*而后在下面表示以后就能够在组建中使用了*/
Vue.use(ElementUI)

　　axios的使用

　　　　是一个基于promise的HTTP库,能够用在就览器和node.js中.

　　　　至关于jquery ajax

　　　　官网:https://www.kancloud.cn/yunye/axios/234845

　　　　将axios挂载到vue的原型上,那么在各个组件中都能使用,由于面向对象(继承).

　　　　　npm安装 : $npm install axios

　　vuex

　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

　　下载npm i vuex -s

　　详见vuex官网 https://vuex.vuejs.org/zh/