Vue基础指令 & 指令修饰符

目录

Vue.js简介

Vue.js目录：

Vue.js 模板语法

插值语法(Mustache)

v-html 指令

v-text 指令

v-on 指令 

v-bind 指令

v-if 指令

        v-if与v-show的区别：

v-model 指令

指令修饰符

---

Vue.js简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持库类结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js目录：

---

Vue.js 模板语法

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

简单来讲就是   你只需要告诉 '我 ' 你需要渲染什么数据即可，剩下的事情 '我' 帮你搞定!!!

插值语法(Mustache)

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值，也可以使用三元运算

<div id="app">
  {{ username }} //秃驴飞
  {{ ok ? 'YES' : 'NO' }}<br>
</div>

<script>
  var app = new Vue({
  el: '#app',
  data: {
    ok:true,
    username: '秃驴飞'
   }
  })
</script>

v-html 指令

相当于原生js中的 innerHTML 

可以渲染数据的同时 解析数据中的标签

<div id="app">
    <div v-html="username"></div>  //页面输出h1级别的  呔！秃驴，哪里走
</div>
    

<script>
new Vue({
  el: '#app',
  data: {
    username: '<h1>呔！秃驴，哪里走</h1>'
  }
})
</script>

v-text 指令

相当于原生js中的 innerText  如果在标签内写内容的话会被 v-text 所覆盖掉 

<div id="app">
    <div>
        <p v-text="username"></p>  //页面输出 呔！秃驴，哪里走
    </div>  
</div>
    

<script>
new Vue({
  el: '#app',
  data: {
    username: '呔！秃驴，哪里走'
  }
})
</script>

v-on 指令 

v-on 指令 用于事件绑定

<div class="app">
    <button v-on:click="onclick">点我</button>
</div>  

v-on:后面的值是一个方法，可以写成onclick()，没有参数可以写成onclick。
另外这种事件对应的方法不是定义在data选项中，而是定义在vue实例的methods选项中，里面都是一个一个的function

v-on:click="onclick"   也可以简写成  @click="onclick" 

<div class="app">
    <button @click="onclick">点我</button>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onclick(){
            console.log('点你点你点你');
        }
    }
});

v-bind 指令

用于对属性的绑定  可以动态的为属性赋值。

v-bind:type  可以简写成  :type

<div id="app">
    <div>
         //当 flag条件为true时input的type属性为 text 反之为 password
        <input :type="flag? 'text' : 'password' " /> 
        <button @click="flag = !flag"> 修改flag </button>
    </div>  
</div>

<script>
new Vue({
  el: '#app',
  data: {
    flag: true
  }
})
</script>

v-if 指令

        v-if与v-show的区别：

                v-if 与 v-show 都是控制元素是否显示 但是不同的是：

                v-if判断 当条件为false 时什么也不做，为true时才开始局部渲染。

                v-show 只是通过css中的 display 来控制元素的显示隐藏             

                当判断条件不容易发生改变时使用 v-if 更加合适  

                判断条件频繁发生改变使用 v-show 更加合适

        v-if：

<div id="app">
    <p v-if="flag">我是v-if</p> 
</div>

<script>
new Vue({
  el: '#app',
  data: {
    flag: true
  }
})
</script>

v-show：

<div id="app">
    <div>
         //当 flag条件为true时显示该元素 false时隐藏该元素
        <p v-show="flag">你好！ 我是秃驴。</p>
        <button @click="flag = !flag"> 修改flag </button>
    </div>  
</div>

<script>
new Vue({
  el: '#app',
  data: {
    flag: true
  }
})
</script>

v-model 指令

v-model 指令可以实现数据的双向绑定 更多的是使用在表单元素 当然组件也可以使用 ，更多详情可以看  Vue.js官网   这里不过多描述

<div id="app">
    <p>{{ username }}</p>
    <input v-model="username">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    username: '点赞！点赞！!'
  }
})
</script>

---

指令修饰符

修饰符是  .   指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.prevent：阻止默认行为

.stop：阻止冒泡

.once：事件只触发一次

.capture：在捕获阶段触发

.self：事件作用在元素本身触发

.native：自定义组件中使用，告诉Vue当前触发的是js的原生事件

.number ： 把用户输入的内容，自动转换为数字类型。

.trim  ：过滤输入内容左右空格。

.lazy ：v-model指令默认使用input事件，通过修饰符我们延迟事件为change事件触发。

罗列一下键盘修饰符   .enter   .space  .ctrl  .........

加油骚年！