前端框架Vue语法部分(一)

 一.mvvc模型:

vue中data的所有属性都会出现在 vue实例上，可直接用vue实例调用

二 插值语法:  用于解析标签内容

用 {{}} 读取表达式或数据内容（表达式能自动获取data中的数据）

三.指令语法 用于解析标签属性 形式都为v-XXX 

1.数据绑定: 

①单向绑定:v-bind 可简写为冒号   举例::href="url">      冒号中的值将作为表达式执行

数据只能从data流向页面

②双向绑定:v-model 举例:v-model:value="name">

可简写为: v-model="name">

数据可以在data和页面互相流通，一般应用在表单类元素上（如:input、select等）

2.事件处理: 

①使用v-on:xxx或 @xxx 绑定事件， 其中xxx是事件名

②事件的回调需要配置在methods对象中

③modthods中配置的函数this都指向 组件实例对象

④方法传参：加小括号即可         例如：@click="demo" 和@click"demo($event)"效果一致，但后者可以传参

(注意 : 在插入语法{{}}中调用函数获取返回值时，需要加括号，否则加入的将是整个函数)

3.事件修饰: 

1.prevent: 阻止默认事件

2.stop: 阻止事件冒泡

3.once: 事件只触发一次

阻止冒泡示例:
点我

4.键盘事件: 

vue中常见的按键别名: 回车enter 、删除 delete 、退出 esc、 空格space、 换行tab、上 up 下 down、左 left、右 right；

两种获取方法：

keyup: 按下后抬起才触发

kepdown: 按下就触发

//示例:

    

    
    


    new Vue({
        el:'#root',
        data:{      //数据,只有在data里的数据才会做数据劫持和数据代理
        },
        methods:{   //方法
            showInfo(e){
                console.log(e.target.value);
            }
        }
    })

 5.计算属性 

1.定义: 要用的属性不存在，要通过已有的属性计算得来（属性指vue实例中的数据，而不是在外面定义的值）

2.原理：底层借助了Object.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

①初次读取时会被执行一次

②当依赖的数据发生改变时会被再次调用

5.备注：

①计算属性最终会出现在vue实例中，直接读取使用即可

②如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生更新

举例：拼接姓名

	
		
		
		
		
	
	
		
		

			姓： 


			名： 


			全名：{{fullName()}}    //直接调用fullName()方法获取全名
		
	

	

6.监视属性

       
  ①      监视属性watch：
                    1.当被监视的属性变化时, 回调函数(handler)自动调用, 进行相关操作
                    2.监视的属性必须存在，才能进行监视！！
                    3.监视的两种写法：
                            (1).new Vue时传入watch配置
                            (2).通过vm.$watch监视

举例:
        

	
		
		
		
		
	
	

		
		

			
今天天气很{{info}}
			切换天气
		
	

	

②深度监视:
                深度监视：
                        (1).Vue中的watch默认不监测对象内部值的改变（一层）。
                        (2).配置deep:true可以监测对象内部值改变（多层）。
                备注：
                        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
                        (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
 

	
		
		
		
		
	
	
		
		

			
今天天气很{{info}}
			切换天气
			

			
a的值是:{{numbers.a}}
			点我让a+1
			
b的值是:{{numbers.b}}
			点我让b+1
		
	

	

7.监视属性和计算属性的区别:

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。