vue基础知识

一、vue 基础介绍

是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层（MVVM），最大程度上解放了 DOM 操作，Vue主要实现的是VM层。

对MVVM的理解

  • Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来

  • 数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据

image.png

1. vue起步

1.1 安装Vue

  1. 直接下载源码然后通过路径引入

  2. CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. 使用 npm 下载（默认安装最新稳定版) 然后通过路径引入
npm init -y
npm i vue

Vue.js 不支持 IE8 及其以下版本

1.2 HelloWorld

作用:将数据应用在html页面中

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象new Vue({选项:值});
4. 设置Vue实例的选项:如el、data...       
5. 在<div id='app'></div>中通过{{ }}使用data中的数据

<!-- 我是Vue所管理的视图div#app -->

<div id="app">
    <!-- 在视图里使用Vue实例中data里面的msg数据 -->
    <p>{{msg}}</p>
</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   var vm= new Vue({
        el: '#app',
        data: {
           msg: 'Hello Vue'
        }
    })
</script>

1.3 Vue实例的选项

el

  • 作用:当前Vue实例所管理的html视图

  • 值:通常是id选择器(或者是一个 HTMLElement 实例)

data
  • Vue 实例的数据对象，是响应式数据(数据驱动视图)
methods

  • 其值为可以一个对象

  • 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。

  • 方法中的 this 自动绑定为 Vue 实例。

代码演示
<div id="a">
    {{msgA}} -- {{fn1()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        // el作用:指定当前Vue实例所管理的视图,值通常是id选择器
        // 1. el的值可以是css选择器,通常是id选择器
        // 2. el的值不能是html标签和body标签

        el: '#a',
        // data作用:指定当前Vue实例的数据对象
        // 1. data中的数据是响应式数据
        // 2. 值可以是一个对象 {属性: 值}
        // 3. 所有数据部分写在data中
        // 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
        // 5. 可以通过vm.$data.属性 访问数据
        // 6. 可以通过vm.属性 访问数据(更简单)
        data: {
            msgA: '第一个Vue实例对象'
        },
        // methods作用:指定当前Vue实例中的方法
        // 1. 可以直接通过vm实例访问这些方法，
        // 2. 方法中的 this 自动绑定为 Vue 实例。
        // 3. 不推荐使用箭头函数
        methods: {
            fn1: function() {
                console.log(this.msgA);
                console.log('vm实例中的methods里的fn1方法被调用');
            },
            fn2: function() {
                this.fn1();
                console.log('fn2方法被调用--');
            }
 
        }
    });
    // 调用fn2方法
    vm.fn2();
</script>

除了以上常用的三个Vue实例选项, 还有很多选项,比如生命周期钩子函数，计算属性等。

2. vue 常见术语解释

插值表达式

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换

{{js表达式、三目运算符、方法调用等}}

不能写 var a = 10; 分支语句 循环语句

    <div id="app">
        <!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
        {{message}}
        <p>{{message}}</p>
        <p>{{message+'啦啦啦'}}</p>
        <p>{{age>18?'成年':'未成年'}}</p>
        <p>{{message.split("")}}</p>
        
        <!-- 在插值表达式中不能写js语句 -->
        <p>{{var a = 10}}</p>
    </div>
    <!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            }
        });
    </script>

插值表达式中不能写js语句, 如var a = 10;

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

 <div id="app">
 <p> {{message}}</p>
 <p v-if="seen">现在你看到我了</p>

 <button v-on:click="changeMsg">按钮</button>

 <!-- v-on就是vue给标签元素提供的扩展-指令
 v-on指令就是给标签绑定事件,这里是click,
 当事件处于点击状态时,出发methods中的changeMsg方法
 -->
 </div>
 <!-- 引入vue.js -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 const vm = new Vue({
 el: '#app',
 data: {
 message: '我是data中的message属性的值',
 seen：'true'
 },
 methods: {
 changeMsg: function() {
 this.message += "啦";
 }
 }
 });
 </script>

3.Vue常用指令

扩展了html标签的功能、大部分的指令的值是js的表达式

取代DOM操作

3.1v-text和v-html

很像innerText和innerHTML

  • v-text:更新整个标签中的内容(只显示文本)

  • v-html:更新标签中的内容/标签（可显示渲染后的html代码）

 <div id="app">
 <!-- v-text指令的值会替换标签内容 -->
 <p>{{str}}</p>
 <p v-text="str">我是p标签中的内容</p>

 <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
 <p v-html="strhtml">我是p标签中的内容</p>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 new Vue({
 el: '#app',
 data: {
 str: 'abc',
 strhtml: '<h1>content</h1>'
 }
 });
</script>

3.2 v-if和v-show

作用:根据表达式的bool值进行判断是否渲染该元素。

v-if

用于条件性地渲染一块内容。

 <h1 v-if="awesome">Renya is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
v-else-if
 <div v-if="type === 'A'">
 A
</div>
<div v-else-if="type === 'B'">
 B
</div>
<div v-else>
 Not A/B/
</div>
v-show

v-show 只是简单地切换元素的 CSS property display。

<h1 v-show="ok">Hello!</h1>

3.3 v-on

  • 作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

  • 语法: v-on:事件名.修饰符 = "methods中的方法名"

  • 修饰符

    • .once - 只触发一次回调。

    • .prevent - 调用 event.preventDefault()。

    • .enter - 只有在 key 是 Enter 时调用

简写: @事件名.修饰符 = 'methods中的方法名'

<div id="app">
 <!-- v-on.xx事件名='当触发xx事件时执行的语句' -->
 <!-- 执行一段js语句:可以使用data中的属性 -->
 <button v-on:click="count += 1">增加 1</button>
 <!-- v-on的简写方法 -->
 <button @click="count += 1">增加 1</button>
 <!-- 执行一个方法 -->
 <button @click="add">增加 1</button>
 <!-- 执行一个方法、这种写法可以传形参 -->
 <button @click="fn1(count)">执行fn1方法</button>
 <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
 <button @click="fn2($event)">执行fn2方法</button>
 <!-- v-on修饰符 如 once: 只执行一次 -->
 <button @click.once="fn4">只执行一次</button>
​
 <p>上面的按钮被点击了 {{ count }} 次。</p>
 </div>
 <script src="./vue.js"></script>
 <script>
 new Vue({
 el: '#app',
 data: {
 count: 0,
 items: ['a', 'b', 'c']
 },
 methods: {
 add: function() {
 this.count += 1;
 },
 fn1: function(count) {
 console.log(count);
 console.log('fn1方法被执行');
 },
 fn2: function(e) {
 console.log(e);
 console.log('fn2方法被执行');
 },
 fn3: function(index) {
 console.log(index);
 console.log('fn3方法被执行');
 },
 fn4: function() {
 console.log('fn4方法被执行了');
 }
 }
 });
 </script>

3.4 v-for

用 v-for 把一个数组对应为一组元素

v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染.

建议尽可能在使用 v-for 时提供 key attribute.

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法

 (v,k,i)in 对象
 v:值
 k:键
 i:对象中每对key-value的索引 从0开始
 注意: v,k,i是参数名,见名知意即可!

<ul id="example-1">
 <li v-for="item in items" :key="item.message">
 {{ item.message }}
 </li>
</ul>

var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]
 }
})

v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">  <li v-for="(item, index) in items">  {{ index }} - {{ item.message }}  </li> </ul>

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
 {{ index }}. {{ name }}: {{ value }}
</div>
new Vue({  el: '#v-for-object',  data: {    
object: {     
   title: 'How to do lists in Vue',   
   author: 'Jane Doe',    
   publishedAt: '2016-04-10'    }  } })

3.5 v-bind

作用: 可以绑定标签上的任何属性。

可以简化为 :，简化语法更常用 。

如：

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="{active: isActive}">
</div>

3.5.1 绑定 HTML Class

对象语法和数组语法。

对象语法

如果isActive为true，则返回的结果为 <div class="active"></div>

 .active {
            color: red;
 }

 <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">点击切换类名</button>
    </div>

  <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeClassName: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
数组语法

渲染的结果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
  <script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>

3.5.2 绑定内联样式style

对象语法和数组语法。

对象语法

渲染的结果<div style="color: red; font-size: 18px;"></div>

 <div id="app">
        <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    </script>
数组语法
<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>

3.6 v-model

作用: 表单元素的绑定

特点: 双向数据绑定

  • v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。
  • 本质是v-bind和v-on的语法糖
<input v-model="sth" />
//  等同于
<input :value="sth" @input="sth = $event.target.value" />

绑定文本框

效果:当文本框的值发生变化后，div中的内容也会发生变化

 <div id="app">
        <p>{{message}}</p>
        <input type='text' v-model='message'>
        <hr>
        <!-- v-model其实是语法糖,它是下面这种写法的简写 -->
        <input v-bind:value='message' v-on:input='message = $event.target.value' />

    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值'
            }
        });
    </script>

绑定多行文本框

 <div id="app">
        <textarea v-model="message">
           我是textarea内的插值表达式 无效 {{str}}
        </textarea>
        <div>{{ message }}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值',
                str: 'str字符串'
            }
        });
    </script>

注意：多行文本框中使用插值表达式 无效

绑定复选框

  • 绑定一个复选框

checked是布尔类型的数据

<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>
  • 绑定多个复选框

    此种方式需要input标签提供value属性

    v-model绑定的是数组

 <!-- 多个复选框  : 需要设置value属性值, v-model绑定的是数组-->
    <div id="app">
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                checkedNames: []
            }
        });
    </script>
  • 绑定单选框

    需要input提供value属性的值

    <input type="radio" name="sex" value="男" v-model="sex">
<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            sex: ''
        }
    });
</script>
  • 绑定下拉框
    <div id="app">  
<!-- 下拉框 -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select> <span> 您选择的是: {{selected}}</span>
</div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        });
    </script>

4. 计算属性和侦听器

计算属性computed

  • 计算属性:是Vue实例的一个选项 computed:{}
  • 作用:在计算属性中去处理data里的数据
  • 使用场景:任何复杂逻辑，都应当使用计算属性
  • 本质: 计算属性的其实就是一个属性,用法和data中的属性一样,但计算属性的值是一个带有返回值的方法
  • 当data中的属性一发生变化, 会自动调用计算属性的方法。
<div id="app">
        <input type="text" v-model="firstname" >+
        <input type="text" v-model="lastname" >=
        <input type="text" v-model="fullname" >
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               firstname:"",
               lastname:""              
           },
           methods:{
               
           },
            computed:{
                'fullname':function(){
                  return this.firstname+" "+this.lastname;  
                }
            }
        });
    </script>

侦听属性watch

  • 观察和响应 Vue 实例上的数据变动
  • 需要在data中先定义好要监听的属性
<div id="app">
        <input type="text" v-model="firstname" >+
        <input type="text" v-model="lastname" >=
        <input type="text" v-model="fullname" >
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               firstname:"",
               lastname:"",
               fullname:""
           },
           methods:{
               
           },
           watch:{
               'firstname':function(newVal){
                   this.fullname=newVal+"-"+this.lastname;
               },
               'lastname':function(newVal){
                   this.fullname=this.fn+" +"+newVal;
               }
           }
        });
    </script>

computed 和 watch 的区别以及应用场景

computed 依赖其他的值,且具有缓存,缓存变化才会更新

  • 只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 进行数值计算，并且依赖于其它数据。

watch 没有缓存，监听某一个值，变化时进行一些操作

  • 数据变化时执行异步或开销较大的操作时用。

5.组件基础

什么是组件？

组件系统是 Vue 的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。

几乎任意类型的应用界面都可以抽象为一个组件树：
img

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

  • 组件是可复用的 Vue 实例，且带有一个名字
  • 组件的选项:
    • 组件与 new Vue 接收相同的选项:例如 data、computed、watch、methods 以及生命周期钩子等。
    • 仅有的例外是像 el 这样根实例特有的选项
  • 另外, 组件也有自己的选项 template，components等
  • 组件的特点：
    • 每用一次组件，就会有一个它的新实例被创建
    • 组件中的data要求必须是一个函数,且需要返回一个对象
    • template 每个组件模板有且只有一个根元素
    • 组件是一种封装，复用已有的html、css、js

组件的使用

  1. 注册组件
  2. 通过组件名字使用组件

全局注册一个组件：

  // 1.定义一个名为 button-counter 的新组件  
Vue.component('button-counter', {
  data: function () {//data为函数
    return {
      count: 0
    }
  },
  //可以使用模板字符串``
  template: `<button v-on:click="count++">
           You clicked me {{ count }} times.
           </button>`
})

在一个通过 new Vue 创建的 Vue 根实例中使用，作为根实例的子组件：

<div id="app">
       <!-- 2. 通过组件名使用组件 -->
        <!--组件可复用 -->
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

组件通信

  • 父->子(在子组件中使用父组件数据) props : 不可修改 单向数据传递
  • 子->父(在父组件中使用子组件数据) 自定义事件!
父->子(在子组件中使用父组件数据)

目的: 要在子组件中使用父组件中data中的属性值

关键点:通过Props给子组件传值

步骤:

  1. 在子组件中通过props声明自定义属性，如'slap'
  2. 注册局部组件(全局注册可忽略)
  3. 使用子组件时,设置props选项, 通过自定义属性获取父组件的值
 <div id="app">
      <!-- 3. 使用子组件时,通过动态绑定自定义属性slap 获取父组件的值,即msg的值 -->
    <child :slap="msg"></child>   
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('child',{
      //1.在定义的模板中使用通过props声明自定义属性，如'slap'
      template:` <div><h3> 我是一个子组件，下面这行文字是来自父组件的</h3>
        <p> {{slap}}</p>        
        </div>`,

       //用来接收外部传过来的数据
        props:['slap']
    })
    var vm = new Vue({
      el: "#app",
      data: {
      // 要在子组件中使用父组件的msg的值
       msg:"父组件拍了拍子组件说：'这是我传给你的值！' "
      }
    })
  </script>
子->父(在父组件中使用子组件数据)

子组件通过$emit方法把自己的第一个参数eventName传递给父级，父级把eventName当成一个事件，触发这个事件接收子级传给自己的数据或执行操作。

 <div id="app">
 <!-- 2. 使用子组件时,通过绑定自定义函数名to-parent-func向父组件的函数getMsg传值，即可处理来自子组件的值--> 
    <child  @to-parent-func="getMsg"></child>
    <h3>下面会显示一条来自子组件的值:</h3>
    <p>{{msgFromChild}}</p>
   
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('child',{     
  
      template:` <div> 
        <button @click="sendMsg"> 点我就可向父组件传值</button>      
        </div>`,
     methods:{
          sendMsg:function(){
 //1. 通过$emit函数传入第一个参数，名为'to-parent-func'的自定义函数名,第二个参数是传给父组件的值
            this.$emit('to-parent-func','hello,父组件，我是一个可爱的子组件~')
          }
        }
    })
    var vm = new Vue({
      el: "#app",
      data: {
       msgFromChild:""
      },
      methods:{
          //可在这里处理来自子组件的值的函数
        getMsg:function(value){
          this.msgFromChild=value
        }
      }
    })
  </script>

6.生命周期

初始化 (create)--- 组件挂载(mount)-----组件更新 (update)--- 销毁(destroy)

生命周期 发生了什么
beforeCreate 初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问
created 初始化界面后 : 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数,也就是不会更新视图，SSR可以放这里。
beforeMount 挂载前 ：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated
mounted 挂在完成 ： 将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访问，在vue用$ref操作
beforeUpdate 更新数据前 ： 组件数据更新之前调用，数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面 , 可以在当前阶段进行更改数据，不会造成重渲染
updated 组件更新后 ： render重新渲染 , 此时数据和界面都是新的 ,要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新
beforeDestroy 组件卸载前 : 实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器
destroyed 组件卸载后 ： 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
activited keep-alive 专属 , 组件被激活时调用
deactivated keep-alive 专属 , 组件被销毁时调用
lifecycle.png

二、vue cli 脚手架工具

https://cli.vuejs.org/zh/guide/

简介

可以快速创建vue项目结构,而不需要我们一点点的去创建/管理项目所需要的各种文件夹/文件，就像后端使用maven创建项目。

目的： 1.快速管理依赖； 2.可通过vue cli 确定项目结构

使用步骤

  1. 安装 Node.js 8.9 或更高版本 (推荐 8.11.0+) https://nodejs.org/en/

  2. 使用node 安装vue-cli

    # 安装 Vue CLI 脚手架
# 如果已经安装过则不需要
# 这里安装的是最新版本 3版本
npm install -g @vue/cli

# 执行vue --verson查看是否安装成功，
# 显示vue的版本，就是安装成功了
vue -V

  3. 创建项目

    • 使用命令行
    # 使用脚手架工具初始化项目
vue create hello-world
# 自动或手动选择一些配置
# 进入你初始化好的项目
cd 项目路径

# 启动项目
npm run serve
    • 使用图形化界面，根据向导配置。
    vue ui

一般会用到Babel、router、Linter（最好不装，不然总是报错）、配置文件，有的会用到vuex。

使用图形化界面就直接搜插件，安装即可。

使用命令行：

#安装babel 插件
vue add babel 
# 安装路由插件
vue add router
#安装elementUI，选择按需导入
vue add  element
# 安装axios依赖
vue add axios

此时目录结构为：

├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─src
| ├─App.vue
| ├─main.js
| ├─views
| | ├─About.vue
| | └Home.vue
| ├─router
| | └index.js
| ├─plugins
| | ├─axios.js
| | └element.js
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
| ├─favicon.ico
| └index.html

Element UI的使用

上面已经使用vue add element安装过了，在element.js中可按需导入要使用的组件：

  1. import 组件名 from 'element-ui'
  2. Vue.use(组件名)
import {
  Button,
  Tag
} from 'element-ui'

Vue.use(Button)
Vue.use(Tag)

如果是全局引入：

import ElementUI from 'element-ui';
Vue.use(ElementUI);

3.在后缀名为.vue的文件中使用

<el-button>el-button</el-button>
 <el-tag>标签一</el-tag>

三、Vue学习视频推荐

vue2.5入门

学 Vue.js 看这个就够了

前端基础必会教程-4个小时带你快速入门vue

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354