vue - 指令1

目录

使用Vue

el作用;

$mount ;

methods;

data;

computed(计算属性);

插值语法;(mustache语法)

  指令:

---

参考笔记:vue学习笔记（超详细）_vue笔记_fmk1023的博客-CSDN博客

---

使用Vue

开始使用Vue

    引入vue.js

 官网：vuejs.org

        开发版本：包含完整的警告和调试模式;

生产版本：删除了警告，体积更小

引入vue.js后，给我们提供了一个构造函数 Vue

    在js中，new Vue()

    new Vue() 后会返回一个vue实例对象，我们用变量接着它

    const vm = new Vue()

    传递一个配置对象{ }    const vm = new Vue({})

el作用;

el:

类型： 字符串

全称：element（元素）

作用:配置控制的元素，表示Vue要控制的区域，值为css选择器; 挂载点

  <!-- 被Vue控制的区域，我们称之为模板 -->
  <div id="app"></div>


const vm = new Vue({
    el: '#app' // 控制id为app的元素
  })

等价与

const vm = new Vue({})
  vm.$mount('#app');

$mount ;

作用和el一致，都是配置控制的元素，使用哪个都可以，二选一

methods;

methods:{ }

类型:对象{ },

里面是一些方法,是一些函数 ;比如点击事件的方法;

在dom中调用methdos方法需要加();例如

    <h2>{{getFullname()}}</h2>

当一个对象里的方法是一个函数的时候可以省略 : function, 直接 方法名( ){ }

data;

• data:{ }

• 类型：对象;是一个对象

• 作用：存放要用到的数据 ];vue所管理的数据; 数据为响应式的

 const vm = new Vue({
    el: '#app',
    data: {
      'msg': 'hello world'
    }
  })

computed(计算属性);

computed:{ }

类型: 对象;{ }

能够在里面写一些计算逻辑的属性, 每个计算属性都包含一个getter和一个setter;只用get来获取,set不常用;

里面是一些方法函数; 在dom中调用的时候不用加();

计算属性是一个属性,不是一个函数,所以函数起名字的时候要用名词;

修改计算属性的值
直接修改计算属性的值报错,在computed中定义get和set方法，在修改计算属性中的值

    <h1>{{gteName}}</h1>

computed:{
        FinallyName:function(){
          return this.firstName + ' ' + this.lastName
        }
      }

计算属性和methdos方法:

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次,效率更高。

当使用方法时，每一次页面重新渲染，对应的方法都会重新执行一次。

插值语法;(mustache语法)

• 使用方法： {{ }} ; 双大括号

• 可以将vue中的数据填在插值表达式中，如：

  <div id="app">{{ msg}}</div>


  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello world'
    }
  })

• 插值表达式中可以进行简单的计算 ;
• 插值表达式中使用了数据，必须在data中声明过，否则会报错;
• null 和 undefined 的数据类型不会显示;
• 使用了未被声明过的数据，不显示,不报错;

  指令:

是带有 v- 前缀的特殊属性 ;

指令可以直接使用data中的数据;

v-once

v-once指令 : 只会渲染一次;

就是一个指令没有 = 表达式 ;

 <p v-once>{{dog}}</p>

 v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。

不解析插值语法；不跟表达式

<!-- 不会被编译 -->
<span v-pre>{{ msg }}</span>

v-html

会解析标签；类似于插值语法；

v-html可以解析标签，更改元素的innerHTML，性能比v-text较差

后面跟表达式，直接写data中的数据；

  <p v-html="baidu"></p>

data:{
        baidu:'<a href="http://www.baidu.com.cn">百度</a>',
        
      }

v-text

 后面直接跟表达式

不会解析标签；类似于插值语法；等价与{{}} 语法；

  v-text 优先级高于 {{ }}语法；

v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据

<span v-text="msg"></span>

v-cloak 斗篷

可以解决闪烁的问题；

不跟表达式；

给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏 ；

解析完之前有一个v-cloak属性，解析完之后就消失了，css样式就没用了；

和 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕；

 <style>
    [v-cloak]{
        display:none
    }
 </style>

<!-- {{ message }}不会显示，直到编译结束 -->
<div v-cloak>
  {{ message }}
</div>

v-bind 属性绑定

需要动态决定标签的属性的时候,可以使用到v-bind；

可以使用data中的数据了;

后面跟表达式： 可以简写

v-bind：  简写 ：

<!--普通写法-->
 <img v-bind:src="imageUrl"/>
data里的数据:
imageUrl:"https://www.baidu.com"

v-bind绑定class: 对象方法;

:class = "{类名1:boolean,类名2:boolean}"

只有当布尔值为真的时候,类名才会添加到class中去, 布尔值可以写成一个变量,放在date数据中进行true和false的切换;

<h2 :class="{ key : true, key1 : false}">{{site}}</h2>
当value值为true的时候才会添加到class里面

用法一：直接通过{}绑定一个类
<h2 :class="{ 'active': isActive}">hello world</h2>

用法二：直接通过判断，传入多个值，
<h2 :class="{'active': isActive,'line': isLine}">hello world</h2>

用法三：和普通的类同时存在,并不冲突
<h2 class="title" :class="{'active': isActive,'line': isLine}">hello world</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
<h2 class="title" :class="getClasses()">hello world</h2>

 v-bind动态绑定class:数组语法.

<h2 :class="['active','line]">hello world</h2>

在数组语法总可以使用三元表达式来切换class

<div v-bind:class="[isActive ? activeClass : '']"></div>

isActive为真，使用activesClass；

isActive为假，使用 ' '

 v-bind动态绑定内联样式 style 方法

对象语法

<h2 :style="{'key(属性名)': value(属性值)}">hello world</h2>
//如果有-的属性需要加单引号 也可以使用驼峰命名  后面属性如果不是变量需要用单引号 
<h2  :style="{'font-size':'50px'}">{{site}}</h2>
<h2  :style="{fontSize:'50px'}">{{site}}</h2>
<h2  :style="{fontSize:finalSize}">{{site}}</h2>

v-on 事件监听/事件绑定

v-on： 后面跟事件名的表达式

v-on： 简写 @

方法即事件的处理函数;

1. 方法不需要传参数时，方法名可以省略（），也可以不省略；
2. 方法名不传参数时，但是方法有参数传入，默认将event事件传入

3.     <button v-on:click="reduce">--</button>
   
       methods: {
           reduce(a){
             console.log(a);
             this.counter--
           }
         },

4.     如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件；

5.     <button v-on:click="reduce(66,$event)">--</button>
   
       methods: {
           reduce(num,event){
             console.log(num,event);
             this.counter--
           }
         },

v-on：事件名 = “方法名”   ==> @事件名 = "方法名"

  <button @click="add">++</button>
  <button v-on:click="reduce">--</button>

方法写在： methods：{ } 配置项内

 methods: {
        add(){
          this.counter++
        },
        reduce(){
          this.counter--
        }
      },

v-on修饰符：

• .stop 阻止事件冒泡;
• .prevent 阻止事件的默认行为;
• .once  只触发一次
• .self  只会在自身上触发
• 键盘事件的修饰符 监听某个键帽   .enter = .13

 //阻止事件冒泡
<span @click.stop="btn2">btn2</span>

//阻止默认行为
<span @click.prevent="btn2">btn2</span>

//只触发一次
<button @click.once="hello">点击</button>

//只会在自身上触发
 <ul @click.self="btn1">
 <li  @click="btn2"></li>

//键盘事件的修饰符
<input type="text" @keyup.enter="keyup">

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>