vue.js简单应用

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> //引入vew和jq
<script>
   var vm = new Vue({
        el: '#app',
        data: {
            user:'',
            name:''
               },
        methods:{
        re:function(){
            $.ajax({
                type:"get",
                url:"json/index.php?action=getIndexRes",  //ajax获取
                async : false,
                data:{},
                success:function(data){
                var data = JSON.parse(data);     //json转对象
                       vm.user= data.user;
                       vm.name= data.name;
                 }
            });
         }
    }
    });
 vm.re();
</script>

<!--这样使用,会在页面加载时ajax还没赋值显示花括号-->
<div id='app'>
  {{ user }}
  {{ name }}
</div>

<!--v-text-->
<div id='app'>
  <span v-text="{{ user }}">  </span>
  <span v-text="{{ name }}">  </span>
</div>
<template v-text="{{ name }}"> </template>

<!--这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时

这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕-->
//css
[v-cloak] {
    display: none;
}
<div v-cloak>
    {{ name }}
</div>