Vue.js入门文档

随笔记录：

1. 导入vue.js文件

    

   

    也可以地址引用，地址: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2.测试Vue对DOM的操作

   

      {{ message }}

   

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

    });

PS：通过Vue，对DOM进行操作，除了可以进行数据传递，还有对应的for循环以及if判断，可以对数组列表等数据进行循环输出。

3. 事件

   

     
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
     

   

var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }

    });

PS：Vue通过自己的属性标签进行事件操作，同时也可以进行逻辑判断，循环操作。在Vue实例里，也可以调用JS函数等其他函数等。

4.for循环和点击事件+小函数

   

     

       
1. 
             {{ todo.text }}
          

     

   

    
   
   

     

{{ message }}

      reverseMessage">Reverse Message

   

var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    });
    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }

    });

5.Vue组件树

PS：Vue强大的功能，告别以往HTML CSS 与JS混乱不堪的情况，对页面组件进行高度解耦，实现页面组件的高度复用，主要分为全局组件以及局部组件，组件之间以单根继承形式生成组件树。

// 声明全局组件

Vue.component('todo-item', {

      props: ['todo'],
      template: '

{{ todo.text }}

'

    })

// 调用

       

PS：虽然Vue可以让我们以标签的方式对全局组件进行调用，但必须是在Vue里，否则是无效的。所以还需要进行实例化。

var app8 = new Vue({
        el:'#app-8'

    })

这样就可以实现效果：

我们也可以通过Vue.component声明多个全局组件进行调用。

    Vue.component('todo-item1', {
      template: '

test1

'
    })
    Vue.component('todo-item2', {
      template: '

test2

'
    })

   
   

       
       


   

    var app8 = new Vue({
        el:'#app-8'

    })

效果：

至于new Vue({})内的各种函数就用时间积累吧。