前端的优秀框架有许多,这里我选了一个比较容易入门的 vue.js 来玩一下,第一次接触的话,发现这个框架非常的简单实用,使用起来非常的方便。
这里我们只要上官网上下载一个 vue.js 就可以直接利用 来引用了。
- <html>
- <head>
- </head>
- <body>
- <!--这里直接可以使用模板-->
- <div id="app">
- {{message}}
- </div>
- <!--这里直接可以使用v-bind绑定title元素 而且是响应式的-->
- <div id="app2">
- <span v-bind:title="message">
- ni hao!
- </span>
- </div>
- <!--这里直接可以通过js代码来控制是否显示这个 p标签-->
- <div id="app3">
- <p v-if="seen">
- Now you see me
- </p>
- </div>
- <!--这里直接可以通过js里面定义一个数组数据,直接就可以 在这里使用模板提取-->
- <div id="app4">
- <ol>
- <li v-for="todo in todos">
- {{todo.text}}
- </li>
- </ol>
- </div>
- <!--这里直接绑定click事件-->
- <div id="app5">
- <p>
- {{message}}
- </p>
- <button v-on:click="reverseMessage">
- Reverse Message
- </button>
- </div>
- <!--这里直接绑定message变量来达到数据的双向流动-->
- <div id="app6">
- <p>
- {{message}}
- </p>
- <input v-model="message">
- </div>
- <!--这里直接可以根据循环和绑定来达到动态的显示一组数据-->
- <div id="app7">
- <ol>
- <todo-item v-for="item in groceryList" v-bind:todo="item">
- </todo-item>
- </ol>
- </div>
- </body>
- <script src="./vue-dev/dist/vue.min.js">
- </script>
- <script src="./index.js">
- </script>
- </html>
- var app = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue'
- }
- });
- var app2 = new Vue({
- el: '#app2',
- data: {
- message: 'You loaded this page on ' + new Date()
- }
- });
- var app3 = new Vue({
- el: '#app3',
- data: {
- seen: true
- }
- });
- var app4 = new Vue({
- el: '#app4',
- data: {
- todos: [{
- text: 'Learn JavaScript'
- },
- {
- text: 'Learn Vue'
- },
- {
- text: 'Build something awesome'
- }]
- }
- });
- var app5 = new Vue({
- el: '#app5',
- data: {
- message: 'Hello Vue.js'
- },
- methods: {
- reverseMessage: function() {
- this.message = this.message.split('').reverse().join('');
- }
- }
- });
- var app6 = new Vue({
- el: "#app6",
- data: {
- message: 'Hello Vue'
- }
- });
- Vue.component('todo-item', {
- props: ['todo'],
- template: '<li>{{todo.text}}</li>'
- });
- var app7 = new Vue({
- el: '#app7',
- data: {
- groceryList: [{
- text: 'Vegetables'
- },
- {
- text: 'Cheese'
- },
- {
- text: 'Whatever else humans are supposed to eat'
- }]
- }
- });
效果如下图:
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-22/19252377.html