[js]01semantic&vue&reqwest实现数据的展示

基于vuejs1.x

<script src="https://unpkg.com/vue/dist/vue.js"></script>

1.获取值

 <div id="app">
     {{ message }}
 </div>

 <script>
     var app = new Vue({
         el: "#app",
         data:{
             message: "hello vue!"
         }
     })
 </script>

条件: v-if条件显示

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

循环: v-for

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

console可以添加

app4.todos.push({ text: '新项目' })

    var app4 = new Vue({
        el: "#app-4",
        data: {
            todos:[
                "js",
                "py",
                "django"
            ]
        },
    })

v-on绑定事件

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model双向绑定

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

实例(v-for)-文章-标题-内容-评论

<div id="app-1">
    <h1>
        {{ article.title }}
    </h1>
    <p>
        {{ article.content }}
    </p>
    <div v-for="comment in comments">
        <a href="#">{{ comment.name }}</a>
        <p>{{ comment.said }}</p>

    </div>
</div>

var app1 = new Vue({
    el: "#app-1",
    data:{
        article:{
            title:"this is a title",
            content:"hi there"
        },
        comments:[
            {name:"Allen Ma",said:"Great!"},
            {name:"Allen Ma",said:"Great!"},
            {name:"Allen Ma",said:"Great!"},
            {name:"Allen Ma",said:"Great!"}
        ]
    }
    })

实例(v-model)-您还可以输入多少字

<div id="app-1">
    <h3>您还可以输入{{ 20 - message.length }}字!</h3>
    <input v-model="message" type="text">
</div>

var app1 = new Vue({
    el: "#app-1",
    data:{
        message: "",
    }
})

实例: (v-on:click)实现点+字体变大

<div id="app-1">
    <button v-on:click="fontSize+=1">+</button>
    <p style="font-size: {{ fontSize }}px">Hello vue!</p>
</div>

var app1 = new Vue({
    el: "#app-1",
    data: {
        fontSize: 18,
    }
})

实例(v-if v-else)是否显示评论

<div id="app-1">
    <h1>
        {{ article.title }}
    </h1>
    <p>
        {{ article.content }}
    </p>
    <div v-for="comment in comments">
        <div v-if="">
            <a href="#">{{ comment.name }}</a>
            <p>{{ comment.said }}</p>
        </div>
        <div v-else>
            Nothing
        </div>
    </div>
</div>

    var app1 = new Vue({
    el: "#app-1",
    data:{
        article:{
            title:"this is a title",
            content:"hi there"
        },
        comments:[
            {name:"Allen Ma",said:"Great!",show:true},
            {name:"Allen Ma",said:"Great!",show:true},
            {name:"Allen Ma",said:"Great!",show:true},
            {name:"Allen Ma",said:"Great!",show:true}
        ]
    }
    })

实例(v-if)实现显示隐藏元素

<div id="app-1">
    <h1>
        {{ article.title }}
    </h1>
    <p>
        {{ article.content }}
    </p>
    <div v-for="comment in comments">
        <div v-if="comment.show">
            <a href="#">{{ comment.name }}</a>
            <p>{{ comment.said }}</p>
            <div>
                <a v-on:click="comment.show = !comment.show">隐藏</a>
            </div>
        </div>
        <div v-else>
            <a v-on:click="comment.show = !comment.show">显示</a>
        </div>
    </div>
</div>

var app1 = new Vue({
el: "#app-1",
data:{
    article:{
        title:"this is a title",
        content:"hi there"
    },
    comments:[
        {name:"Allen Ma",said:"Great!",show:true},
        {name:"Allen Ma",said:"Great!",show:true},
        {name:"Allen Ma",said:"Great!",show:true},
        {name:"Allen Ma",said:"Great!",show:true}
    ]
}
})

实现模态框(结合semantic.css)

<div id="app-1">
    <div class="ui dimmer active" v-if="!modal.show" v-on:click="modal.show=!modal.show">
        <div class="ui modal active">
            <h3 class="ui header">This is a title</h3>
        </div>
    </div>
    <button v-on:click="modal.show=!modal.show">弹出我...</button>
</div>

    var app1 = new Vue({
    el: "#app-1",
    data:{
        modal:{
            show:true
        }
    }
    })

实现模态框(结合semantic.css)–v-on改进为函数形式

<div id="app-1">
    <div class="ui dimmer active" v-if="!modal.show" v-on:click="modalSwitch">
        <div class="ui modal active">
            <h3 class="ui header">This is a title</h3>
        </div>
    </div>
    <button v-on:click="modalSwitch">弹出我...</button>
</div>

var app1 = new Vue({
el: "#app-1",
data:{
    modal:{
        show:true
    }
},
methods:{
    modalSwitch:function () {
        this.modal.show=!this.modal.show
    }
}
})

实现模态框(结合semantic.css)–ready,页面创建好后即自动调用

<div id="app-1">
    <div class="ui dimmer active" v-if="!modal.show" v-on:click="modalSwitch">
        <div class="ui modal active">
            <h3 class="ui header">This is a title</h3>
        </div>
    </div>
    <button v-on:click="modalSwitch">弹出我...</button>
</div>

var app1 = new Vue({
el: "#app-1",
data:{
    modal:{
        show:true
    }
},
methods:{
    modalSwitch:function () {
        this.modal.show=!this.modal.show
    }
},
ready:function(){
    this.modalSwitch()
}
})

vue基本架构

var app1 = new Vue({
    el:
    data:{}
    methods:{}
    ready:
})

实例:实现模态框淡出动画–调用animate实现淡入淡出

<link rel="stylesheet" href="css/animate.css">

<div id="app-1">
    <div class="ui dimmer active fadeIn" v-if="!modal.show" v-on:click="modalSwitch">
        <div class="ui modal active">
            <h3 class="ui header">This is a title</h3>
        </div>
    </div>
    <button v-on:click="modalSwitch">弹出我...</button>
</div>

var app1 = new Vue({
el: "#app-1",
data:{
    modal:{
        show:true
    }
},
methods:{
    modalSwitch:function () {
        this.modal.show=!this.modal.show
    }
},
//    ready:function(){
//        this.modalSwitch()
//    }
})

实例-借助semantic.css实现loading数据,结合vue实现数据loadding完成后才展示

原理是vue根据coments的长度控制标签的返回值

<div id="app-1" v-for="comment in comments" class="ui {{ loadingOrNot }} segment">
    <div class="content">
        <a href="#" class="author">{{ comment.name }}</a>

        <p class="text" style="font-family: 'Raleway', sans-serif;">
            {{ comment.said }}
        </p>
    </div>
</div>

var app1 = new Vue({
    el: "#app-1",
    data: {
        article: {
            title: "This is a title",
            content: "Hi there!"
        },
        comments: [
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"},
            {name: "John Doe", said: "Great!"}
        ]
    },
    computed: {
        loadingOrNot: function () {
            if (this.comments.length == 0) {
                return " loading"
            } else {
                return " "
            }
        }
    }
})

实例: 对获取到的数据进行过滤展示.

<body id="app">

<!-- Comments&Form's here -->
<div class="ui segment container" style="width:700px;">
    <!--<div v-for="comment in comments" class="ui comments">-->
    <div v-for="comment in filteredList" class="ui comments">
        <div class="comment">
            <div class="content">
                <a href="#" class="author">{{ comment.name }}</a>

                <p class="text" style="font-family: 'Raleway', sans-serif;">
                    My height is {{ comment.height }} cm
                </p>
            </div>
        </div>
    </div>
</div>
</body>>

var vm = new Vue({
    el: "#app",
    // context
    data: {
        comments: [
            // {name:"John Doe",said:"Great!",show:true},
        ]
    },
    methods: {
        getData: function () {
            var self = this;
            reqwest({
                url: "http://swapi.co/api/people/?format=json",
                type: "json",
                method: "get",
                success: function (resp) {
                    self.comments = resp.results
                }
            })
        }
    },

    computed: {
        filteredList: function () {
            function userRuler(people) {
                return people.height > 100;
            }

            var newList = this.comments.filter(userRuler);
            return newList
        }
    },
    ready: function () {
        this.getData()
    },
})

21:5817
星期日
2017年8月20日