JavaScript初探_2

发表于
字数统计 1.9k | 阅读时长 8

本文主要参考这里：参考地址，感谢博主。

廖雪峰这里讲JavaScript讲的很详细，长期学习可参考。

前言

首先，应该弄清楚vue到底是什么，其实，Vue.js是一个目前应用很广的JavaScript MVVM库，以数据驱动和组件化的思维构建。那么什么是MVVM呢？MVVM是Model-View-ViewModel的简称，由微软最先提出，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。ViewModel是Vue.js的核心，它是一个Vue实例。使用Vue的过程就是定义MVVM各个组成部分的过程的过程。这里不展开多讲，以后在使用过程中会逐渐清晰这个概念。

开始

先来感受一下

为了更好的理解，可以先来感受一下实例。上一篇博客中已经介绍了如何新建一个vue工程，当时已经新建了一个firstVue的工程，我们在VS Code中将整个文件夹加载，修改页面所要进行的工作主要在src–>components–>helloworld.vue中进行。
可以打开helloworld.vue看一下，主要分为三部分：template、script、style。这三部分分别有各自的功能，template，这是html部分，用来显示；script，类似js，用来做一些数据绑定和方法；style，就是css部分，用来定义html中元素的样式尺寸大小之类的。（胖丫告我的，有误概不负责）

此处实例参考：戳。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
  <!--表单的增删和修改-->
  <div class="hello">
    <table>
      <caption>麻将</caption>
      <thead>
      <tr>
        <th>条</th>
        <th>筒</th>
        <th>万</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(mj,index) in mjs">
        <td>
          <input type="text" v-model="mj.tiao" v-if="edi===index">
          <span v-else>{{mj.tiao}}</span>
        </td>
        <td>
          <input type="text" v-model="mj.tong" v-if="edi===index">
          <span v-else>{{mj.tong}}</span>
        </td>
        <td>
          <input type="text" v-model="mj.wan" v-if="edi===index">
          <span v-else>{{mj.wan}}</span>
        </td>
 
        <td>
          <button @click="mod(index)">修改</button>
          <button @click="save(index)">确定</button>
          <button @click="del(index)">删除</button>
        </td>
      </tr>
      </tbody>
      <tfoot>
        <td colspan="4">
          <button @click="add">添加</button>
          <button @click="submit">保存</button>
        </td>
      </tfoot>
    </table>
 
  </div>
</template>
 
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        edi:'',
        mjs: [
          {tiao:'一条',tong:'一筒',wan:'壹万'},
          {tiao:'二条',tong:'二筒',wan:'贰万'},
          {tiao:'三条',tong:'三筒',wan:'叁万'},
        ]
      }
    },
    methods: {
      mod:function(index){
        this.edi=index;
      },
      del: function (index) {
        this.mjs.splice(index, 1);
      },
      save:function(index){
        this.edi=!index;
      },
      add:function(){
        this.mjs.push({tiao:'',tong:'',wan:''})
      },
      submit:function () {
        this.edi='';
        console.log(JSON.stringify(this.mjs))
      }
    }
  }
</script>
 
<style scoped>
  input{
    border:none;
    width:150px;
  }
  table{
  border-collapse: collapse;
  border:1px solid black
  }
  td{
    text-align: center;
    width: 150px;
    height:30px;
    border:1px solid black
  }
  button{
    border: none;
    background-color:deepskyblue;
    color:white;
  }
</style>

指令

结合上边实例的代码，学习一些vue指令。

v-for

首先出现的指令是v-for指令，v-for指令其实就是遍历，基本语法：
v-for=”item in items”,items是一个数组，item是当前被遍历的数组元素。

v-if

v-if是条件渲染指令，根据条件的真假来删除或者插入元素，基本语法：
v-if=”expression”,expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。

v-show

v-show指令也是条件渲染指令，和v-if不同点在于它的元素始终会被渲染到html，只是简单的为元素设置CSS的style类型，若条件为false，元素会被设置了style=”display:none”样式。

v-else

v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面,否则它不能被识别。
v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。这段代码中v-if为true，后面的v-else不会渲染到HTML；v-show为true，但是后面的v-else仍然渲染到HTML。

v-bind

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class,基本语法：
v-bind:argument=”expression”

v-on

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听a元素的点击事件：
<a v-on:click="doSomething">
有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

缩写

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

1
2
3
4
5
6
7
8
9
<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

tips：
补充几点JavaScript和其他语言相比，比较特殊的地方：

  1. Number
    JavaScript不区分整数和浮点数，统一用Number表示。
    需要注意一下的是NaN(Not a Number，当无法计算结果时用NaN表示)这个特殊的Number与所有其他值都不相等，包括它自己：
    NaN === NaN; // false
  2. 相等运算符
    JavaScript在设计时，有两种比较运算符：
    第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
    第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
    由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。
  3. 变量申明
    变量在JavaScript中就是用一个变量名表示，申明一个变量用var语句。需要注意的是如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量，为了防止出现混乱，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。
    启用strict模式的方法是在JavaScript代码的第一行写上：
    'use strict';
  4. 字符串
    字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：
    var s = 'Test';
s[0] = 'X';
alert(s); // s仍然为'Test'

以上。

注：转载文章请注明出处，谢谢~