Vue学习笔记--基础语法(1)

最近在学习Vue2.x框架，把自己的学习笔记整理一下，方便自己的回顾和总结，本人也是初学，其中难免出现自己理解的错误和思考不周全的，希望大家能够多多指教。鉴于Vue不同版本之间存在差异，本人的笔记是以Vue2.x来学习的，后续会在2.x版本的基础上对比最新版本Vue的特性来增加新的文章来说明。

Vue使用步骤

引入 vue.js 文件
指定用于填充数据的标签
在script标签里创建Vue对象

<!--1. 导入Vue的包-->
<script src="js/vue.js"></script>
<body>
    <!--2. div#app 就是 Vue实例绑定的html元素，在这里可以显示Vue对象的data属性中的配置的数据-->
        <!--该区域就是MVVM模型中那个的V层-->
        <div id="app">
        {{msg}}
    </div>
    <script>
        //3. 创建一个Vue实例
        // Vue实例就是MVVM模型中的vm层，也就是将M中的数据渲染到V的调度者
        var vm = new Vue({
            // el表示的是当前实例化的Vue对象要控制的元素的id值
            el: '#app',
            // data就是MVVM模型中的m层， data的数据就是要渲染到#app元素中
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

说明

通过Vue提供的指令，可以很方便的吧元素渲染到页面上，不同手动操作DOM元素了，Vue等框架的目的就是提倡开发人员不在手动操作DOM，简化代码编写的复杂程度
{{msg}} 是Vue提供的插值表达式，用来向html页面传递变量 Mustache

Vue模板语法

1. 插值表达式:

{{msg}} 是Vue提供的，用来向html页面传递变量

2. 指令：

以v-开始: 指令本身是html元素的自定义属性

v-cloak指令:

插值表达式存在‘闪动’问题，解决原理：先隐藏，替换好值以后再显示最终值

<style>
    [v-cloak] {
        display: none;
    }
</style>
<p v-cloak>{{msg}}</p>
其他代码与'Vue使用步骤'处代码一致

v-text指令: 文本填充指令

与Mustache插值表达式作用一样用来向html元素传递Vue对象数据的，不存在‘闪动’问题

<script src="js/vue.js"></script>
<body>
    <div id="app">
        这是Mustache表达式输出的内容：{{msg}} <br>
        这是v-text指令输出的内容：<span v-text="msg"></span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'v-text指令示例'
            }
        });
    </script>
</body>

v-html指令: 填充html片段指令

用来向指定的html元素内部填html片段内容
存在安全问题，容易受到XSS攻击
原则上网站内的数据可以通过v-html指令添加，第三方的数据不可以通过v-html指令添加

<script src="js/vue.js"></script>
<body>
    <div id="app">
    这是Mustache表达式输出的结果: {{msg}} <br>
    这是v-text指令输出的结果：<span v-text="msg"></span> <br>
    这是v-html指令输出的结果：<span v-html="msg"></span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '<h1>这是一个html元素 h1 格式的标题</h1>'
            }
        });
    </script>
</body>

v-pre指令

跳过Vue的编译，显示Vue模板原始内容

<script src="js/vue.js"></script>
<body>
    <div id="app">
        {{msg}}
        <div v-pre>{{msg}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的v-pre指令的处理',
                msg1: '<h1>aaa</h1>'
            }
        });
    </script>
</body>

v-once指令

应用的场景，是对应的数据，在后续不需要修改，可以使用v-once指令，这样可以提高性能。

<script src="js/vue.js"></script>
<body>
  <div id="app">
    <span></span>普通的mustache表达是，可以在console中修改变量值，并且会在页面显示修改后的值：{{msg}}</span>
    <div v-once>使用v-once指令的表达式，在console中修改该变量的值，但页面的显示内容没有变化：{{msg}}</div>
  </div>
  <script>
   var vm = new Vue({
     el: '#app',
     data: {
       msg: 'Hello Vue!'
     }
   });
  </script>
</body>

3. 数据响应式

与html5中的响应式类似，如bootstrap样式框架，会根据不同屏幕尺寸动态调整样式变化
数据响应式，则是如果通过 Mustache 表达式使用到了Vue对象中的一个变量，如果该变量的值被修改，把么在网页中显示的内容也会做出相应的变化

4. 数据绑定

通过 Mustache 表达式或是通过 v-text 等指令把Vue对象中的数据显示的网页中，就是数据绑定

5. 双向数据绑定指令

通过v-model指令来实现数据的双向绑定，双向是指：

表单组件到Vue对象中的数据字段的关联；
Vue对象关联的Mustache插值的关联

使用方式

<script src="js/vue.js"></script>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>
      <input type="text" v-model="msg">
    </div>
  </div>
  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        msg: 'hello Vue!'
      },
      methods: {
        
      }
    });
  </script>
</body>

6. MVVM设计思想

M: Model V: View VM: View-Model

mvvm设计思想

7. 事件绑定指令

7-1. v-on指令，实现事件的绑定，简写形式：'@'

7-2. vue中的函数是定义在methods属性中：

var vm = new Vue({
 el: '#app',
 data: {
 num: 0
 },
 methods: {
 handle() {
    this.num ++;
 }  
 }
});

7-3. Vue中函数的调用：

直接通过函数名称调用

<button @click="handle">点击2</button>

通过函数调用的方式: 可以传递参数
```
<button @click="handle()">点击3</button>
```

Vue中函数调用的不同形式：

<body>
  <div id="app">
    <div>{{num}}</div>
    <div>
      <button v-on:click="num++">点击</button>
      <button @click="num++">点击1</button>
      <button @click="handle">点击2</button>
      <button @click="handle()">点击3</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handle() {
          this.num ++;
        }  
      }
    });
  </script>
</body>

7-4. Vue中函数的参数传递

如果v-on指令，绑定的是函数的名称，那么这种方式默认传递事件对象作为函数的第一个参数，事件参数名称固定为：$event
如果v-on指令，绑定的函数调用的形式，那么事件对象必须是函数参数列表中的最后一个，且参数名称固定为：$event

<body>
  <div id="app">
    <div>
      <button @click="handle1('123', '456')">Btn1</button>
      <button @click="handle2">Btn2</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        num: 1
      },
      methods: {
        handle1(p1, p2, $event) {
            console.log(p1, p2, event);
        },
        handle2($event) {
          console.log(event);
        }
      },  
    });
  </script>
</body>

7-5. Vue事件修饰符

.stop 停止冒泡
.prevent 阻止默认行为
更多vue事件修饰符参考官方文档

<body>
  <div id="app">
    <div @click="handle0">
      <div>阻止冒泡 {{num}}</div>
      <button @click="handle1">正常冒泡</button>
      <button @click="handle2">传统阻止冒泡</button>
      <button @click.stop="handle3">Vue阻止冒泡</button>
    </div>
    <a href="http://www.baidu.com">a标签默认行为</a>
    <a href="http://www.baidu.com" @click="preventHandle">a标签传统方式默认行为</a>
    <a href="http://www.baidu.com" @click.prevent="vuePrevent">a标签Vue方式阻止默认行为</a>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data:{
        num: 0
      },
      methods: {
        handle0(){
          this.num++;
        },
        handle1() {
          console.log("nothing to do, 冒泡触发，num+1");
        },
        handle2(event) {
          console.log("传统方式阻止冒泡");
          event.stopPropagation();
        },
        handle3() {
          console.log("使用vue提供的.stop修饰符阻止冒泡");
        },
        preventHandle(event) {
          console.log("使用传统方式阻止默认行为");
          event.preventDefault();
        },
        vuePrevent() {
          console.log("vue使用.prevent修饰符来阻止默认行为");
        }
      },
    });
  </script>
</body>

7-6. 按键修饰符

.enter 回车按键修饰符
.delete 删除按键修饰符
更多按键修饰符参考官方文档

<body>
  <div id="app">
    <form action="">
      <div>
        <input type="text" name="username" id="" v-model="username" v-on:keyup.delete="clearHandler">
      </div>
      <div>
        <input type="text" name="password" id="" v-model="password" v-on:keyup.enter="submitHandler">
      </div>
      <div>
        <input type="button" value="Submit" @click="submitHandler">
      </div>
    </form>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        clearHandler() {
          this.username = "";
        },
        submitHandler() {
          console.log("username=%s, password=%s", this.username, this.password);
        }
      },
    });
  </script>
</body>

7-7. 自定义按键修饰符

每个按键都是可以通过event对象的keyCode属性来获取到的，每个按键都有一个唯一的keyCode值
由于通过数字来绑定相关的事件函数不能有效地表示其业务逻辑，所以Vue提供了自定义按键修饰符，来定义相关按键的名称

<body>
 <div id="app">
   <div>
   针对所有按键的事件：<input type="text" @keyup="keyHandler" name="" id="">
   </div>
   <div>
     通过keyCode来绑定指定按键的事件(只对按键a有效)：<input type="text" @keyup.65="keyHandler">
   </div>
   <div>
     通过自定义按键修饰符来帮顶按键事件(只对a有效)：<input type="text" @keyup.akey="keyHandler">
   </div>
 </div>
 <script>
   // 对a按键定义事件别名
   Vue.config.keyCodes.akey = 65;
   var vm = new Vue({
     el: '#app',
     data: {

     },
     methods: {
       keyHandler(event) {
         console.log(event.keyCode);
       }
     }
   });
 </script>
</body>

8.事件处理相关案例

8-1. 通过 v-model 指令实现数据的双向绑定
8-2. 给计算按钮绑定事件函数，实现计算逻辑
8-3. 通过 v-text 指令将结果在指定位置显示

<div id="app">
    <h1>简单加法计算器</h1>
    <div>
      <span>数值A:</span>
      <span><input type="text" v-model="a"></span>
    </div>
    <div>
      <span>数值B:</span>
      <span><input type="text" v-model="b"></span>
    </div>
    <div>
      <span><input type="button" value="计算" @click="calculate"></span>
    </div>
    <div>
      <span>计算结果</span>
      <span v-text="result"></span>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        calculate() {
          this.result = parseFloat(this.a) + parseFloat(this.b);
        }
      },
    });
  </script>
</body>

9. 属性绑定

9-1. v-bind指令

通过 v-bind 指令来实现对html元素属性值的绑定，从而实现数据动态改变的目的。v-bind 指令的简写形式是 “:”

9-2. v-bind指令简单应用

通过 v-bind 指令和 v-on 指令实现 v-model指令

<input type="text" :value="msg" @input="handleInput">

// 事件处理函数
handleInput(event) {
 this.msg = event.target.value;
}

简写形式

<input type="text" :value="msg" @input="msg=$event.target.value">

通过上述代码我们会发现v-model指令的底层实现原理

9-3. v-text v-model v-bind之间的区别

v-text 是将vue对象中的变量值放入到html标签元素的content部分，主要是用于数据的显示
v-bind 是将vue对象中的变量值放入到html元素标签的属性部分，主要是用来定义标签的元素属性的，而不是直观的数据显示

v-model 则是实现双向数据绑定的，是基于 v-bind 指令和 v-on 指令实现的

  <body>
    <div id="app">
      <div>
        超链接的地址：{{url}}
      </div>
      <div v-text="url"></div>
      <div>
        <a v-bind:href="url">链接1</a>
        <input type="button" @click="changeHref" value="切换地址">
      </div>

      <h1>
        通过 v-bind 指令和 v-on 指令实现 v-model 指令的双向数据绑定功能
      </h1>
      <div>变量msg内容是：{{msg}}</div>
      v-on 和 v-bind：<input type="text" :value="msg" @input="handleInput"> <br>
      简写形式：<input type="text" :value="msg" @input="msg=$event.target.value"> <br>
      v-model形式： <input type="text" v-model="msg"> <br>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          url: 'http://www.baidu.com',
          msg: 'Hello Vue!!!'
        },
        methods: {
          changeHref() {
            this.url = "http://www.google.com"
          },
          handleInput(event) {
            this.msg = event.target.value;
          }
        }
      });
    </script>
  </body>

10. 样式绑定

10-1. 通过class实现样式绑定

控制样式变化：
首先，要定义一个样式名称；
然后，通过v-bind指令将html元素的class属性与样式进行绑定；
定义一个事件函数来实现html元素的动态切换

/*1. 定义样式规则*/
.active {
   border: 1px solid red;
   height: 100px;
   width: 100px;
}
.error {
   background-color: orange;
}

<!--2-1. 通过Vue规定的方式实现样式绑定 对象形式-->
<div :class="{active:isActive, error: isError}">
   测试v-bind指令+class属性实现样式绑定 对象形式
</div>
<div>
   <!-- 5-1. 将动态切换样式的事件方法绑定到html元-->素
   对象形式：<button @click="switchClass">切换样式</button>
</div>
<!--2-2. 通过Vue规定的方式实现样式绑定 数组形式-->
<div v-bind:class="[activeClass, errorClass]">
   测试v-bind指令+class属性实现样式绑定 数组形式
</div>
<div>
   <!--5-1. 将动态切换样式的事件方法绑定到html元素-->
   数组形式：<button @click="switchClassArray">切换样式</button>
</div>

var vm = new Vue({
   el: '#app',
   data: {
   // 3-1. 定义 对象形式 对应样式变量名
   isActive: true,
   isError: true,

   // 3-2. 定义 数组形式 对应样式变量名
   activeClass: 'active',
   errorClass: 'error'
   },
   methods: {
   // 4-1. 定义动态切换样式的事件方法
   switchClass() {
      this.isActive = !this.isActive;
   },
   // 4-2. 定义动态切换数组 数组形式 样式的名称
   switchClassArray() {
      this.activeClass = '';
      this.errorClass = '';
   }
   },
});

通过v-bind指令 + class属性实现样式绑定的细节：

对象形式和数组形式结合使用；
class 绑定值的简写：数组形式和对向行驶两种；
class 属性默认值的处理

10-2. 通过style属性，控制样式变化

<div id="app">
    v-bind指令+style属性实现样式绑定
    <div :style="{border: borderStyle, width: widthStyle, height: heightStyle}"></div>

     v-bind指令+style属性 简写形式
     <div :style="objectStyles"></div>
     
    v-bind指令+style属性 数组形式
    <div :style="[objectStyles, overrideStyles]"></div>
    <div>
      <button @click="switchStyles">切换</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid red',
        widthStyle: '100px',
        heightStyle: '200px',
        objectStyles: {
          border: '3px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px, solid blue',
          width: '500px',
          height: '100px',
          backgroundColor:'orange'
        }
      },
      methods: {
        switchStyles() {
          this.widthStyle = '200px';
          this.objectStyles.height = '200px';
        }
      }
    });
  </script>
</body>

11.Vue分支结构

11-1. v-if v-else-if v-else

控制的是条件分支对应的dom元素是否渲染到页面上，适用于元素渲染出来后不怎么变化的

11-2. v-show

dom元素已经渲染到页面通过style样式来控制元素是否显示，适用于元素频繁的显示和隐藏时使用

<body>
  <div id="app">
    v-if v-else-if v-else 指令
    <div v-if="score>90">优秀</div>
    <div v-else-if="score>80&&score<=90">良好 </div>
    <div v-else-if="score<=80&&score>70">一般</div>
    <div v-else-if="score<=70&&score>=60">及格</div>
    <div v-else>不及格</div>

    v-show指令
    <div v-show="showFlag">show指令控制的内容</div>
    <div>
      <button @click="switchShowFlag">切换</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        score: 99,
        showFlag: true
      },
      methods: {
        switchShowFlag() {
          this.showFlag = !this.showFlag;
        }
      }
    });
  </script>
</body>

12.Vue循环结构

12-1. v-for 循环简单数组数组

v-for="item in [array]" 
v-for="(item, index) in [array]"

其中 item 就是简单数组中的一个元素，index是当前元素在数组中的位置

12-2. v-for指令相关的key属性

<li v-bind:key="item.id" v-for="item in fruitObjects">{{item.id}} --- {{item.ename}} --- {{item.cname}}</li>

v-for指令相关的key用来方便vue定位区分遍历的集合中的元素

12-3. v-for 循环对象

<li v-for="(value, key, index) in obj">
  {{key + '---' + value + '---' + index}}
</li>

代码中 value, key, index 的位置是固定不变的，可以变换名字但是，对应位置分别代表的含义是：属性值、属性名、属性位置

<body>
  <div id="app">
    循环简单数组
    <div>
      <li v-for="item in fruitArray">{{item}}</li>
    </div>
    循环带下标
    <div>
      <li v-for="(item, index) in fruitArray">{{item}} --- {{index}}</li>
    </div>
    循环对象数组
    <div>
      <li v-for="item in fruitObjects">{{item.ename}} --- {{item.cname}}</li>
    </div>
    v-for指令相关的key用来方便vue定位区分遍历的集合中的元素
    <div>
      <li v-bind:key="item.id" v-for="item in fruitObjects">{{item.id}} --- {{item.ename}} --- {{item.cname}}</li>
    </div>
    遍历对象中各个属性及对应的取值
    <div>
      <li v-for="(value, key, index) in obj">
        {{key + '---' + value + '---' + index}}
      </li>
    </div>

    v-for 指令 和 v-if 指令 结合使用
    <div>
      <li v-if='item == "apple"' v-for="item in fruitArray">{{item}}</li>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        fruitArray: ['apple', 'orange', 'banana'],
        fruitObjects: [
          {
            id: 1,
            ename: 'apple',
            cname: '苹果'
          },
          {
            id: 2,
            ename: 'orange',
            cname: '橘子'
          },
          {
            id: 3,
            ename: 'banana',
            cname: '香蕉'
          }
        ],
        obj: {
          uname: 'lisi',
          age: 12,
          gender: 'male'
        }
      },
      methods: {
        
      }
    });
  </script>
</body>

Vue学习笔记--基础语法(2)