Vue常用指令

Vue 渐进式 JavaScript 框架

声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建

https://vuejs.bootcss.com/api/

2. 插值表达式渲染数据
<div id="app">{{msg}}</div>
1. 引入 vue 包
<script src="./js/Vue.js"></script>
<script>
  // 创建 vue 实例对象 
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello world'
    }
  })
</script>

实例参数分析

  • el : 元素的挂载位置 (值可以是CSS选择器或者DOM元素)
  • data : 模型数据 (值是一个对象)

指令

指令的本质就是自定义属性 ; 指定的格式 以 v- 开头

v-cloak

  • 解决插值表达式刷新页面时的闪动问题
  • 原理 : 先通过CSS样式隐藏 , 在内存中进行值得替换 , 替换好值之后再显示最终的值
[v-cloak] {display: none;}

<p v-cloak>{{msg}}</p>

数据绑定指定

  • v-text 填充纯文本 ; 相比较插值表达式更加简洁, 不会出现闪动问题

    • <div v-text="msg"></div>

  • v-html 填充HTML片段

    • 存在安全问题 XSS

    • 本网站内部数据可以使用 , 来自第三方数据不可用

    • <div v-html="html"></div>

  • v-pre 填充原始信息

    • 显示原始信息 , 跳过编译过程 (分析编译过程)

    • <div v-pre>{{msg}}</div>

数据响应式

数据的变化导致页面内容的变化

数据绑定 : 将数据填充到标签中

v-once 只编译一次 , 显示内容之后不再具有响应式功能 ; 如果显示的信息后续不需要更改 , 使用v-once 可以提高性能; (一般情况下vue需要监听这个数据 , 使用 v-once 后不需要再监听数据的变化)

<div v-once>{{msg}}</div>

双向数据绑定

v-model 页面和数据相绑定, 修改一处同步修改 主要应用于表单

<input type="text" v-model="msg" />

双向数据绑定原理

v-model 本质上不过是语法糖

<div id="app">
    <div v-cloak>{{ msg }}</div>
   <!-- 通过input事件监听输入框变化 --> 
    <input type="text" v-on:input="handle" v-bind:value="msg">
</div>

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    methods: {
        handle: function (event) {
            // 通过事件对象获取最新值, 最后覆盖旧的值
            this.msg = event.target.value
        }
    }
})

事件绑定

<!-- 绑定函数名称和函数调用基本没有区别 ;
	1. 如果是绑定函数名称, 默认会传递事件对象作为事件函数的第一个参数
	2. 如果是绑定函数调用, 事件对象必须作为最后一个参数显示传递, 事件对象名名称必须是 $event
-->
<button v-on:click="handle1">点击1</button>
<button v-on:click="handle2(123, 456, $event)">点击2</button>
<button @click="num++">点击3</button>

var vm = new Vue({
  data: {
    num: 0
  },
  // 事件函数写到 methods 
  methods: {
    handle1: function (event) {
      // 方法内部是没有办法直接访问到 num 的 需要通过 this === vue 实例对象
      this.num++
      console.log(event.target.innerHTML)
    },
    handle2: function (arg1, arg2, event) {
      console.log(arg1)
      console.log(event.target.innerHTML)
	}
  }
})

事件修饰符

// .stop 阻止冒泡
<div v-on:click.stop='handle'></div>

// .prevent 阻止默认事件
<div v-on:click.prevent='handle'></div>

更多 : https://vuejs.bootcss.com/api/#v-on

按键修饰符

// .enter 回车键触发
<input type="button" v-on:keyup.enter="handleSubmit" />

// .delete 删除键触发
<input type="text" v-on:keyup.delete="handleClear" />

methods: {
 handleSubmit: function () {
    console.log(this.uname, this.pwd)
 },
handleClear: function () {
     this.uname = ''
 }
}

更多 :https://vuejs.bootcss.com/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

自定义按键修饰符

Vue.config.keyCodes.f1 = 112

属性绑定

<a v-bind:href="url">百度</a>

<a :href="url"></a>

样式绑定

class 样式处理

<!-- 对象语法 -->
<!-- 控制元素隐藏显示, isXXX要在data中定义, 只能是true或false -->
<div v-bind:class="{active: isActive, error: isError}"></div>

<!-- 数组语法 -->
<!-- 数组对象可以混合使用 -->
<div v-bind:class="[activeClass, error, {test: isTest}]"></div>
<!-- 对象,数据 简化操作 -->
<!-- 默认的class会保留其样式 -->
<div class="base" v-bind:class="arrClass"></div>

<div :class="arrClass"></div>
<div v-bind:class="objClass"></div>
<button @click="handle">dianji</button>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
            activeClass: 'active',
            error: 'error',
            isTest: true,
            arrClass: ['active', 'error', {test: 'test'}],
            objClass: {active: 'active', error: 'error'}
        },
        methods: {
            handle: function () {
                // 移除类名, 如果想要修改回来就需要重新再次赋值
                this.activeClass = ''
                this.isTest = !this.isTest
                this.arrClass = this.arrClass.shift()
                this.objClass = delete this.objClass.active
            }
        }
    })
</script>

style 样式处理

<div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}"></div>
<!-- 简写 -->
<div :style="eleStyles"></div>
<!-- 数组写法 -->
<div v-bind:style="[eleStyles, newEleStyles]"></div>
<div v-on:click="handle">update</div>

var vm = new Vue({
  el: '#app',
  data: {
    borderStyle: '1px solid red',
    widthStyle: '100px',
    heightStyle: '200px',
    eleStyles: {
      border: '4px solid hotpink',
      width: '200px',
      height: '100px'
    },
    newEleStyles: {
      border: '1px solid blue',
      backgroundColor: 'pink'
    }
  },
  methods: {
    handle: function () {
      this.heightStyle = '100px'
      this.eleStyles.width = '100px'
    }
  }
})

分支结构

v-if v-else-if v-else

v-show

v-if : 控制元素的是否渲染到页面上

v-show : 控制元素是否显示 通过 display: none/block

<div id="app">
  <div v-if="score > 80">秀儿</div>
  <div v-else-if="score >=  60">中规中矩</div>
  <div v-else>垃圾</div>
  <div v-show="flag">v-show 测试</div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    score: 90,
    flag: true
  },
  methods: {
    handle: function () {
      this.flag = !this.flag
    }
  }
})

循环结构

<ul>
   <!-- key帮助Vue区分不同的元素, 从而提高性能, key不一定是index 但一定要是唯一的 -->
   <li 
      :key="index" 
      v-for="(item, index) in list" 
      v-cloak>
      {{ index + '---' + item }}
    </li>
</ul>
<ul>
    <!-- 满足 if 后才会渲染列表 -->
	<li
        v-if="obj.age == 22"
        v-bind:key="index"
        v-for="(value, key, index) in obj">
        {{value + '--' + key} + '--' + index}
    </li>
</ul>

var vm = new Vue({
  el: '#app',
  data: {
    list: ['apple', 'orange', 'banana'],
    obj: {
        name: 'lisi',
        age: 23,
        score: 'Vue'
    }
  }
})

tab栏切换案例

[v-cloak] {display: none;}
ul {overflow: hidden;}
li {list-style: none; height: 50px; width: 100px; line-height: 50px; border: 1px solid blue; text-align: center; float: left; cursor: pointer;}
div img {display: none;}
.current img {display: block;}
.active {background-color: orangered;}

<div id="app">
  <ul>
    <li 
      :class="currentIndex == index ? 'active' : ''" 
      v-for="(item, index) in list" 
      :key="index" 
      v-cloak 
      v-on:click="handle(index)">
      {{ item.title }}
    </li>
  </ul>
  <div 
    :class="currentIndex == index ? 'current' : ''" 
    v-for="(item, index) in list"
    :key="index">
    <img :src="item.url" alt="">
  </div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    currentIndex: 0,
    list: [
      {title: 'apple', url: './img/apple.png'},
      {title: 'lemon', url: './img/lemon.png'},
      {title: 'orange', url: './img/orange.png'}
    ]
  },
  methods: {
    handle: function (index) {
      this.currentIndex = index
    }
  },
})
posted @ 2020-05-09 00:26  计算机相关人员  阅读(202)  评论(0)  编辑  收藏  举报