Vue基础指令 - 爱码网

Vue框架介绍

之前大家学过HTML，CSS，JS，JQuery，Bootstrap，现在我们要学一个新的框架Vue~

Vue是一个构建数据驱动的web界面的渐进式框架。

目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

能够构建复杂的单页面应用。现在我们开始认识一下Vue~

// HTML 页面
<div >
    <span>你的名字是{{name}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>

// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        name: "Gao_Xin"
    }
});

Vue demo

Vue指令

Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，

它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。

<template>
<div>
  <h2>head</h2>
  <p v-text="msg"></p>
  <p v-html="html"></p>
</div>
</template>

<script>
    export default {
        name: "head",
      data(){
          return {
            msg: "消息",
            html: `<h2>插入h2标题</h2>`

          }
      }

    }
</script>

<style scoped>

</style>

v-test v-html