基本属性

• • • 1.el（挂载点）
    • 2.data（数据）
    • 3.methods（方法）
    • 4.computed（计算属性）
    • 5.watch（监听）
    • 6.filters（过滤器）
    • 7.components（局部组件）

1.el（挂载点）

var vm=new Vue({
    el:"#app"
})

• 功能作用

  是用来设置Vue实例管理的元素对象

• 作用范围

  Vue会管理el选项命中的元素以及其内部的后代元素

• 可用选择器

  可以使用id、class等常用选择器

• 可用Dom元素

  只能用在双标签元素上，不能用于单标签、HTML、Body元素

2.data（数据）

var vm=new Vue({
    el:"#app",
    data:{
        age: 20,
        msg: 'Hello Vue!',
        user: {name:'张三',sex:'男'},
        city: ['上海','北京','河南']
    }
})

• 数值类型
• 字符串类型
• 对象类型
• 数组类型

3.methods（方法）

定义一些方法

let vm=new Vue({
    el: '#app',
    data: {
    },
    methods:{
        #方式一
        myMethod1:function(){
            console.log('方法1');
        },
        #方式二
        myMethod2(){
            console.log('方法2');
        }
    }
})

4.computed（计算属性）

当一些数据需要随着其他的某些数据的改变而发生变动时，使用计算属性

let vm=new Vue({
    el: '#app',
    data: {
    },
    methods:{
    },
    computed:{
        totalMoney:function(){
            // 根据单价和数量计算总额
            return this.pirce * this.amount;
        }
    }
})

• 计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。而方法每次调用都会重新求值
• 利用计算属性可以解决那种性能开销比较大的计算方法，计算一次过后，它会读取缓存中的结果，大大提升效率

5.watch（监听）

动态的监听一些数据的变化

let vm=new Vue({
    el: '#app',
    data: {
        message: 'hello world'
    },
    methods:{
    },
    computed:{
    },
    watch:{
        message(newValue,oldValue){
            console.log("改变之前："+oldValue);
            console.log("改变之后："+newValue);
        }
    }
})

• 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
• 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前设置中间状态，这些都是计算属性无法做到的

6.filters（过滤器）

用于对数据的处理

<div id="app">
    #第一种使用位置
    <span>{{message | toUpper}}</span>
	#第二种使用位置
	<span v-bind:class="message | toLower"></span>
</div>

let vm=new Vue({
    el: '#app',
    data: {
        message: 'hello world'
    },
    methods:
    },
    computed:{
    },
    watch:{
    },
    filters:{
        toUpper(value){
            // 转大写
            return value != '' ? value.toUpperCase() : '';
        },
        toLower(value){
            // 转小写
            return value != '' ? value.toLowerCase() : '';
        }
    }
})

7.components（局部组件）

<div id="my">
	<mycomponent></mycomponent> 
</div>

#定义组件
var mycomponent = {
    data: function () {
        return {
        	count: 0
        }
	},
	template: '<button v-on:click="count++">点击{{count}}</button>'
}
var vm=new Vue({
    el:"#my",
    data: {
    	count: 0
    },
    components: {
        mycomponent: mycomponent
    }
})