第一天vue.js开发学习

最新推荐文章于 2023-07-09 20:04:24 发布

weixin_34234721

最新推荐文章于 2023-07-09 20:04:24 发布

阅读量75

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3229047/blog/842474

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一天vue.js开发学习
1、vue.js的 Hello Vue，
2、v-bind:title 数据绑定，
3、v-if判断和 v-for 数据循环输出，
4、v-on:click 事件监听调用，方法定义在methods:{}，
5、v-model='message'双向数据绑定到{{message}}，
6、Vue.component自定义组件，props自定义借口，实现解耦；

具体代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>第一天vue.js开发学习</title>
       <script src="js/vue.js"></script>
   </head>
   <body>
       
       <div id="app">
           {{message}}
       </div>
       
       <div id="app-2">
           <span v-bind:title="message">
               ddddddd
           </span>
       </div>
       
       <div id="app-3">
           <p v-if="seen">you see</p>
       </div>
       
       <div id="app-4">
           <ul>
               <li v-for='x in todos'>
                   {{x.text}}
               </li>
           </ul>
       </div>
       
       <div id="app-5">
           <p>{{message}}</p>
           <button v-on:click="reverMessage">Reverse Message</button>
       </div>
       
       <div id="app-6">
       <p>{{ message }}</p>
       <input v-model="message">
       </div>
       
       <div id="app-7">
       <ol>
       <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
       </ol>
       </div>

       <div id="app-8">
       <ol>
       <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
       </ol>
       </div>
   </body>
   <script>
       var app = new Vue({
           el : '#app',
           data:{
               message:'Hello Vue!'
           }
       })
       var app2 = new Vue({
           el:'#app-2',
           data:{
               message:'eeeeeee'+new Date()
           }
       })
       var app3 = new Vue({
           el:"#app-3",
           data:{
               seen:true
           }
       })
       var app4 = new Vue({
           el:'#app-4',
           data:{
               todos:[
                   {text:'1111'},
                   {text:'2222'},
                   {text:'3333'}
               ]
           }
       })
       var app5 = new Vue({
           el:'#app-5',
           data:{
               message:'hello world!'
           },
           methods:{
               reverMessage:function(){
                   this.message = this.message.split('').reverse().join('')
               }
           }
       })
       var app6 = new Vue({
       el: '#app-6',
       data: {
       message: 'Hello Vue!'
       }
       })

       Vue.component('todo-item', {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'
       })
       var app7 = new Vue({
       el: '#app-7',
       data: {
       groceryList: [
       { text: 'Vegetables' },
       { text: 'Cheese' },
       { text: 'Whatever else humans are supposed to eat' }
       ]
       }
       })

       var app8 = new Vue({
       el: '#app-8',
       data: {
       groceryList: [
       { text: 'a1' },
       { text: 'a2' },
       { text: 'a3' }
       ]
       }
       })
   </script>
</html>