VUE 指令集

什么是VUE

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

声明式渲染

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

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app', // 绑定一个标签,标签内可使用该对象内的数据
  data: {
    message: 'Hello Vue!'
  }
})
// Vue对象可以直接调用他属性对应的对象的属性
console.log(app.message) //  'Hello Vue!'
// 想要查看他的对象需要在属性名前+$
console.log(app.$el) // div标签
</script>

将data内容作为标签属性

<div id="app-2">
  <span v-bind:class="message">
      <!--v-bind指令。指令带有前缀 v-.-->
      <!--使渲染出来的class带有active的值-->
    一个标签
  </span>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: "active"
  }
})
</script>

v-bind不仅可以直接将参数替换进去,还可以根据参数来判断,activ可以根据参数来动态的渲染

<div id="app-2">
  <span class="btn" v-bind:class="{activ:message}">
      <!--message为true会将activ添加进class中-->
    一个标签
  </span>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: true
  }
})
</script>

另外"v-bind:"可以简写为":"

标签属性的数组语法

<div id="app-5">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script type="text/javascript" src="vue.js"></script>
<script>

var app5 = new Vue({
  el: '#app-5',
  data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
})
</script>

事件的绑定

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
    <!--v-on:用于绑定事件,:后面是事件.=后面是执行的函数,如果函数没有参数可以不写括号-->
</div>

<script type="text/javascript" src="vue.js"></script>
<script>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: { // 函数存在与methods属性中
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

 另外"v-on:"可以简写为"@",函数中的this并不是指函数所在的对象,而是Vue对象,

这里可以看出VUE的优点,我们无需操作 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可

判断

<div id="app">
    <div class="box" v-if="isShow">我的第一</div>
    <h1 class="box"  v-else>没有第一个盒子</h1>
    <!-- 渲染时v-if或v-else条件为false是不会出现在DOM中,
    而v-show条件为false是添加了display=none -->
    <div class="box2" v-show="show">我的第二</div>
</div>

<script type="text/javascript" src="vue.js"></script>
<script>

var app = new Vue({
  el: '#app',
  data:{
            isShow:true,
            show:false,
        }
})
</script>

循环

<div id="app">
<ul>
        <li v-for="(item,index) in lists">{{item}}</li>
    <!-- 第一个参数是lists中的值,第二个是索引,只写一个参数是值 -->
</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>

var app = new Vue({
  el: '#app',
  data:{
      lists:["红烧肉","红烧茄子","红烧鱼","江小白"]
        }
})
</script>

阻止默认事件

<div id="app">
<a href="javascript:;">click</a>  <!--阻止a标签的默认行为-->
    <a href="#" @click="anchorHandler($event)">a1</a>
    <!-- $event是事件本身 -->
    <a href="#" @click.prevent="">a2</a>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>

var app = new Vue({
  el: '#app',
  data:{
      lists:["红烧肉","红烧茄子","红烧鱼","江小白"]
        },
    methods:{
            anchorHandler(e){
                e.preventDefault()  // 阻止标签的默认行为
            }

        }
})
</script>

表单输入绑定

<div id="form">
    <form action="" @submit.prevent>
        <!-- @submit.prevent阻止提交事件 -->
        <!-- message的值会根据输入框中的内容动态改变 -->
        <input v-model="message" placeholder="edit me">
        <div>{{message}}</div>
    </form>
</div>

<script src="vue.js"></script>
<script>
    var form = new Vue({
        el:"#form",
        data:{
            message:'luffy',
        }
    })

</script>

计算属性

<div id="example">
  <p>Original message: "{{ reversedMessage }}"</p>
    <span @click="{{reversedMessage=222}}">点击就送</span>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: { // 计算属性存于computed中

    reversedMessage:{
        // 计算属性默认只有getter方法
      get:function () {
          return this.message
      },
      set:function (newval) {
          this.message = newval;
      }
    }
  }
})
</script>

原始HTML

# 将rawHtml的标签字符串替换成标签
<span v-html="rawHtml"></span>