Vue

Vue基础

---

起步

• Vue采用的是MVVM的思想

官方教程

创建Vue对象

---

• 使用Vue语法时需要先创建一个Vue对象

        
        
        {{message.split(' ').reverse().join(' ')}}
        

            test
        
        

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

el: el用来设置vue对象的作用范围,后面跟标签的id,注意此id应为操作的所有标签的顶级标签;
data: 数据集,用来设置vue对象的需要操作的数据,采用键值对的方式;
methods: 方法集,可以直接调用vue对象外部的js函数,用来绑定标签对象的需要操作的函数;
out相当于匿名函数的函数名,用于定义vue对象的具体操作.

标签的绑定

---

id

对应el: '#root1'

v-bind

• test

对应data:{className: 'blue'}
v-bind绑定标签的属性和vue对象中data定义的属性值

v-html

对应data:{mess: '

我是一级标题

'}

v-title

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

对应data:{infor: '页面加载于 ' + new Date().toLocaleString()}

v-on

• 点我

对应out所定义的函数

v-model

对应
v-model类似于v-bind,v-model为双向绑定,可以直接修改绑定的vue对象中data的值

类和样式

---

• 通过v-bind可以通过数组一次为标签绑定多个属性值,也可以通过对象设置不同属性对应的开启条件

注意:数组和对象是以字符串的形式传入的

methods

---

• 方法集,具体的使用可见vue对象的创建部分

compute

---

• 属性值的数据运算集,可以将一些复杂逻辑运算写到其中

    

        
        
{{message}}
        
{{reversedMessages}}
        
        
        
{{full}}
    

watch

---

• 侦听器,用以响应数据的动态变化,可以替换掉上面的compute中的名字操作部分

/**
* 侦听属性： 通过watch设置需要监听的属性名，以及对应的回调操作，
* 一旦该属性值发生变化，
* vue自动调用回调函数将被监听的属性新的属性值通过参数传入，
* 进而完成对新数据的运算操作。
*/
       watch:{
           firstName: function (val) {
               this.fullName = val + this.lastName;
           },
           lastName:  function (val) {
               this.fullName = this.firstName + val;
           }
       }

组件基础

• 可以自定义组件,类似于定义自己的HTML标签

component

---

• body中的click-button标签即为自定义的组件,可以直接类似于HTML标签一样的创建
• Vue.component(组件名,object),可以创建多个Vue.component()

注意: 在Vue.component中可以定义methods,computed,watch
object:
data的值必需为函数类型,不同于new Vue中的data(对象类型)
template为原生的HTML标签的设置,属性值从data中获取

• new Vue({...}),创建完自定义组件后还需要新建Vue对象并绑定对应的标签

注意是在创建完自定义组件之后创建Vue对象进行绑定

issues

• 在js文件中使用vue出现Vue未找到的问题：

查看Vue的引用是否在自定义的js文件之前，不是则调至自定义js文件的前面