历史介绍

  • angular 09年,年份较早,一开始大家是拒绝 star:33.4k
  • react 2013年, 用户体验好,直接拉到一堆粉丝 star:98k
  • vue 2014年, 用户体验好 star:97k(贡献者大都为中国人)

前端框架与库的区别?

  • 一般使用库的代码,是调用某个函数,我们自己把控库的代码
  • 一般使用框架,其框架在帮我们运行我们编写好的代码,初始化自身的一些行为,执行我们所编写的代码,施放一些资源
  • 库就是一个小套餐, 框架就是全家桶

Vue 起步基础

  • 首先:引入 vue.js 是必须的
  • 要想使用 vue 需要实例化一个 vue 对象,传一个对象作为参数
  • 1:引包
  • 2:启动 new Vue({el:目的地,template:模板内容});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>

    </style>
    </head>
    <body>
    <div id="div1">
    {{name}}
    <input type="text" v-bind:value="title"/>
    </div>
    </body>
    <script>
    let app = new Vue({
    "el" : "#div1",
    "data" : {
    "name" : "zhangsan",
    "title" : "haha"
    }
    });
    </script>
    </html>

插值表达式

1
{{ 表达式 }}
  • 对象-不要连续3个

    1
    {{ {name:'jack'} }}
  • 字符串

    1
    {{ 'xxx' }}
  • 判断后的布尔值

    1
    {{  true }}
  • 三元表达式

    1
    {{ true?'是正确':'错误'  }}
  • 注意: 必须在data这个函数中返回的对象中 声明

Vue中的常用指令

  • 在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
  • 比如在angular中 以 ng-xxx 开头的就叫做指令
  • 在vue中 以 v-xxx 开头的就叫做指令
  • 指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

    v-text

  • 替换元素的 InnerText 属性,必须是双标签

v-html

  • 替换元素的 innerHTML

v-if

  • 判断是否插入这个元素 与之配合使用的有 v-else-ifv-else

v-show 隐藏元素

  • 实际上是给元素的 style 加上 display:none

v-model 双向数据绑定

  • 双向是指 视图UI数据,其中任何一个的改变都会导致另一个的改变

v-bind 单向数据绑定

  • 数据》视图 (常用于给元素的属性赋值)
  • 数据改变了会导致视图层的改变,而反过来视图变了是不会导致数据的变化

    • 给元素的属性赋值如:

      1
      <div file="{{变量}}"></div>
    • 可以给已经存在的属性赋值 input value

    • 也可以给自定义属性赋值 mydata
    • 语法 在元素上 v-bind:属性名=”常量||变量名”
    • 简写形式 :属性名=”变量名”
      1
      2
      3
      4
      <div v-bind:原属性名="变量"></div>
      <div :属性名="变量">

      </div>
    1
    2
    3
    4
    5
    6
    7
    8
    关于指令的注意项:
    1:v-text 只能用在双标签中
    2:v-text 其实就是给元素的innerText赋值
    3:v-html 其实就是给元素的innerHTML赋值
    4:v-if 如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素
    5:v-if和v-else-if都有等于对应的值,而v-else直接写
    6:v-if家族都是对元素进行插入和移除的操作
    7:v-show是显示与否的问题

v-on 绑定事件

  • 普通使用 v-on:事件名="表达式||函数名"
  • 简写方式 @事件名="表达式"

v-for 循环

  • 可以循环数组、对象、整数、字符串
  • 基本语法 v-for="item in arr"
  • 对象的操作 v-for="item in obj"
  • 数组 item,index
  • 对象 value,key,index

对象内的 this

  • methods和data本身是在同一个对象中的,所以在该对象中可以通过this.随意取
  • this.xxx 取data中的值, this.xxxMethod调methods中的函数

组件

所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象 (一些根实例特有的选项除外)。

使用组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
//创建子组件(通过一个对象来创建)
let child = {
template: `<div>{{text}}</div>`,
data: function () {
return {
text: '我是子组件0'
};
}
};
//全局创建组件(这种方式不用再次声明)
Vue.component('child1', {
template: `<div>{{text}}</div>`,
data: function () {
return {
text: '我是子组件1'
};
}
});

let app = new Vue({
el: document.getElementById('test'),
components: {
child
},
template: `
<div>
<div>{{ text }}</div>
<child></child>
<child1></child1>
</div>
`,
data: function () {
return {
text: '我是父组件的内容'
};
}
}
);
</script>
  • 总结: 有父(要有父组件),生子(创建子组件全局或者局部),声明(全局创建的组件不需要声明),使用

父组件传值给子组件(父传子)

  • 父通过属性传递
  • 子要声明 props:['属性名'] 来接收,收到就是自己的了,随便用,在template中 直接用,在js中 this.属性名
  • 总结:父传,子声明,就是子的了(传的属性名和接收时时的属性名要相同)
  • 小补充: 常量传递直接用,变量传递加冒号

子组件传值给父组件(子传父)

  • 子组件发射事件:this.$emit('事件名',参数)
  • 父组件监听相对应的时间:@事件名='方法'

无名插槽 slot

  • slot 就是子组件里给 DOM 留下的坑
  • 下面的 <h3>这是传给子组件的插槽</h3> 会替代 <slot></slot>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <script>
    //创建一个子组件
    let child = {
    template:`
    <div>
    <h1>12121212</h1>
    <slot></slot>
    </div>
    `
    };

    let app = new Vue({
    el: document.getElementById('test'),
    components: {
    child
    },
    template: `
    <div>
    <div>{{ text }}</div>
    <child><h3>这是传给子组件的插槽</h3></child>
    </div>
    `,
    data: function () {
    return {
    text: '我是父组件的内容'
    };
    }
    }
    );
    </script>

具名插槽 slot

  • 具有名字的插槽:子组件有多个坑,父组件可以往里面插入多个 dom
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <script>
    //创建一个子组件
    let child = {
    template:`
    <div>
    <h1>12121212</h1>
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
    <slot name="slot3"></slot>
    </div>
    `
    };

    let app = new Vue({
    el: document.getElementById('test'),
    components: {
    child
    },
    template: `
    <div>
    <div>{{ text }}</div>
    <child>
    <h3 slot="slot1">这是传给子组件的插槽1</h3>
    <h3 slot="slot2">这是传给子组件的插槽2</h3>
    <h3 slot="slot3">这是传给子组件的插槽3</h3>
    </child>
    </div>
    `,
    data: function () {
    return {
    text: '我是父组件的内容'
    };
    }
    }
    );
    </script>