-

vue.js框架使用(图文教程)

Vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

vue.js安装
进入vue.js官网 https://vuejs.org/ 下载最新版

vue.js案例
一个简单的vue.js案例
尝试一下>>

<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
  .class1{
      background: #444;
      color: #eee;
    }
    </style>
<div id="app">
  <p>{{site}}</p>
  <p v-text="url"></p>
  <p v-html="author"></p>
  <p>{{ details() }}</p>
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
    <h1>xiyueta.com</h1>
  </template>
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
  <p> {{ message.split('').reverse().join('') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    site: "xiyuetaJS库",
    url: "www.xiyueta.com",
    author: "<font color=red>xiao yun</font>",
    use: false,
    seen: true,
    ok: true,
    sites: [
      { name: 'Xiyueta' },
      { name: 'Google' },
      { name: 'Taobao' }
    ],
    message: "xiyueta.com"

  },
  methods: {
    details: function() {
      return this.site + " - 学的不仅是技术,更是梦想!";
    }
  }
})
console.log(vm.author)

</script>