Vue.js（一）

Vue基础学习 第一天

一、Vue的基本介绍与使用

1、基本介绍

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架
  • 特点:易用、灵活、高效
  • 版本：2.6
  • 作者：尤雨溪
  • 兼容：IE8及以下不兼容

2、使用步骤

  1. 引入vue.js
  • 开发版本(development)：警告、提示、没有压缩
  • 生产版本（production）：部署上线时候用的，删除了警告、提示、压缩了代码
  1. 创建挂载节点
  • 注意：千万不能是body或者html
  1. 实例化Vue对象
  • el：挂载节点的选择器
  • data：模版中用到的所有数据

3、MVVM

  • M model（data里面的数据）
  • V view(视图，就是模板)
  • VM (虚拟模型)

注意：data里面的数据一旦变化，模板里面会自动更新！

4、插值表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <div id='app'>
        <div>{{msg}}</div>
        <div>{{msg+'----'+123}}</div>
        <div v-text='msg'></div>
        <div v-html='msg1'></div>
        <div v-pre>{{msg1}}</div>
    </div>
<script>
    //   1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
    //   2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
    //   3、v-pre用于显示原始信息
    var vue = new Vue({
        el: '#app',
        data: {
            msg: 'hello Vue!',
            msg1: '<h1>123</h1>'
        }
    })

二、Vue的相关指令

1、指令的定义：

  • 指令就是自定义属性
  • 通常用法：**<标签 v-指令名=”变量/表达式” />**

2、常用指令

1、v-html

  • 渲染数据！ 体验感更好！

  • 可以转义HTML字符串内容！将其当html标签解析后输出， 类似于原生的innerHTML

  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

2、v-text

  • 渲染数据！ 体验感更好！
  • 不可以转义HTML字符串内容！如果数据中有HTML标签会将html标签一并输出，类似于原生的innerText
  • **注意:**在指令中不要写插值语法 直接写对应的变量名称
  • 在 v-text 中 赋值的时候不要在写 插值语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    
    <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
    
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

3、v-bind

  • 属性绑定！ 给HTML标签的原生属性，让这些原生属性也支持属性和表达式！
1
2
3
4
5
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">
  • 绑定对象
    • 我们可以给v-bind:class 一个对象，以动态地切换class。
    • 注意：v-bind:class指令可以与普通的class特性共存

4、v-once

  • 作用：一次性绑定数据，数据渲染之后，将来数据变化了，页面也不更新！
1
2
<标签 v-once>{{变量}}</标签>
<标签 v-once v-html="变量"></标签>

5、v-on

  • 作用：绑定事件
1
2
3
4
<标签 v-on:事件类型="事件函数"></标签> 
<标签 v-on:事件类型="事件函数()"></标签> 
简写：
 <标签 @事件类型="事件函数"></标签>
  • 事件写在methods中
1
2
3
4
5
6
7
8
9
new Vue({
   el:"xx",
   data:{xxx},
   methods:{
     	事件函数(){
     	...
     	}
   }
})

  • 传参：参数一一对应

    1
    <标签 @事件类型="事件函数(实参)" />
    1
    2
    3
    4
    5
    6
    7
    new Vue({
       el:"",
      data:{},
      methods:{
        事件函数(形参){ ... }
      }
    })

  • 注意：

    • 事件函数里面的this都是当前vue实例对象！

    • methods里面的所有的事件函数都是当前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
    <div id='app'>
          <div>{{num}}</div>
          <button v-on:click='num++'>点击1</button>
          <button @click='num++'>点击2</button>
          <button @click='handle'>点击3</button>
          <button @click='handle()'>点击4</button>
          <button @click='handle2(123,$event,456)'>点击5</button>
          <button @click='handle3'>点击6</button>
      
      </div>
      <script src="./js/vue.js"></script>
      <script>
          //注意点：属性之间不要忘记逗号；
          var vm = new Vue({
              el: '#app',
              data: {
                  num: 0,
              },
              //methods 中主要定义一些函数
              methods: {
                  handle: function() {
                      // 此时的this指向Vue的实例对象
                      console.log(this === vm);
                      this.num++;
                  },
                  //参数要一一对应
                  handle2: function(x, e, y) {
                      console.log(x, e, y);
                      this.num++;
                  },
                  //当调用函数不传参数时，形参就是事件对象
                  handle3: function(e) {
                      console.log(e.target);
                      this.num++;
                  }
              }
          })
      </script>

    6、v-model

  • 作用： 实现数据的双向绑定

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
	<input type="text" v-model="msg" /> 
</div>
<script type="text/javascript">
	new Vue({
  	el:"#app",
    data:{
    	msg:""   // 数据实现双向绑定
    }
  })
</script>

7、v-pre

  • 作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

8、v-cloak

  • 作用：解决插值表达式刷新浏览器过程中编译慢，显示花括号的问题。
1
2
3
4
5
6
[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

3、事件修饰符

  1. 含义：帮助我们实现一些方便操作（比如：阻止默认事件、阻止冒泡、捕获触发、等等！）
  2. 写法：
1
2
<标签 @事件类型.修饰符="事件函数"></标签>     
<标签 @事件类型.修饰符1.修饰符2="事件函数"></标签>
  1. 事件修饰符：
      • .stop:阻止冒泡
      • .prevent：阻止默认事件
      • .capture：阻止捕获触发事件
      • .self：只能自身触发
      • .once：只触发一次
      • .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发

4、按键修饰符

  • 按键修饰符是给按键相关事件的！
  • 基本上都是用在：input、textarea
1
<标签 @事件类型.修饰符="事件函数"></标签>

  • 按键修饰符:

      • .enter
      • .tab
      • .delete (捕获“删除”和“退格”键)
      • .esc
      • .space
      • .up
      • .down
      • .left
      • .right
      • 目前版本26个字母按键都已经绑定

  • 自定义按键修饰符:

    Vue.config.keyCodes.按键修饰符名 = 按键的keycode码！

    一般放在实例化之前去配置！

三、Vue样式

1、绑定class

  • 对象形式
1
<标签 :class="{ class名1:变量1，class名2:变量2 }" />
  • 数组
1
<标签 :class="[变量1，变量2,'class名1','class名2']" />
  • 属性绑定
1
<标签 :class="条件 ？ 'class名1':'class名2' " />

2、绑定样式

  • 对象
1
<标签 :style="{ css属性名名1:变量1，css属性名2:变量2 }" />
  • 数组
1
2
3
<标签 :style="[变量1，变量2]" />
变量1:{ css属性名:css属性值 }
变量2:{ css属性名:css属性值 }
  • 属性绑定（常用）
1
2
3
<标签 :style="'background-color:'+bgc+';font-size:'+num+'px;'" />

<标签 :style="`font-size:${a};border-color:${b}`" />
Vue.js
Vue.js

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！