前端框架Vue语法部分(一)
一.mvvc模型:
vue中data的所有属性都会出现在 vue实例上，可直接用vue实例调用
二 插值语法: 用于解析标签内容
用 {{}} 读取表达式或数据内容（表达式能自动获取data中的数据）
三.指令语法 用于解析标签属性 形式都为v-XXX
1.数据绑定:
①单向绑定:v-bind 可简写为冒号 举例:<a :href="url"> </a> 冒号中的值将作为表达式执行
数据只能从data流向页面
②双向绑定:v-model 举例:<input type="text" v-model:value="name"></br>
可简写为: <input type="text" v-model="name"></br>
数据可以在data和页面互相流通，一般应用在表单类元素上（如:input、select等）
2.事件处理:
①使用v-on:xxx或 @xxx 绑定事件， 其中xxx是事件名
②事件的回调需要配置在methods对象中
③modthods中配置的函数this都指向 组件实例对象
④方法传参：加小括号即可 例如：@click="demo" 和@click"demo($event)"效果一致，但后者可以传参
(注意 : 在插入语法{{}}中调用函数获取返回值时，需要加括号，否则加入的将是整个函数)
3.事件修饰:
1.prevent: 阻止默认事件
2.stop: 阻止事件冒泡
3.once: 事件只触发一次
阻止冒泡示例: <button @click.stop="showInfo">点我</button>
4.键盘事件:
vue中常见的按键别名: 回车enter 、删除 delete 、退出 esc、 空格space、 换行tab、上 up 下 down、左 left、右 right；
两种获取方法：
keyup: 按下后抬起才触发
kepdown: 按下就触发
//示例: <body> <div id="root"> <input type="text" @keydown.up="showInfo"> </div> new Vue({ el:'#root', data:{ //数据,只有在data里的数据才会做数据劫持和数据代理 }, methods:{ //方法 showInfo(e){ console.log(e.target.value); } } }) </body>
5.计算属性
1.定义: 要用的属性不存在，要通过已有的属性计算得来（属性指vue实例中的数据，而不是在外面定义的值）
2.原理：底层借助了Object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
①初次读取时会被执行一次
②当依赖的数据发生改变时会被再次调用
5.备注：
①计算属性最终会出现在vue实例中，直接读取使用即可
②如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生更新
举例：拼接姓名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_methods实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName()}}</span> //直接调用fullName()方法获取全名 </div> </body> <script type="text/javascript"> new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, methods: { //完整写法（有可能要修改） /* fullName:{ get(){ return this.firstName + '-' + this.lastName; }, set(value){ const arr =value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } */ fullName(){ //只读不改时可以用该简写方式 return this.firstName + '-' + this.lastName } }, }) </script> </html>
6.监视属性
① 监视属性watch：
1.当被监视的属性变化时, 回调函数(handler)自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视举例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, /* watch:{ isHot:{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } */ }) vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) </script> </html>②深度监视:
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_深度监视</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr/> <h3>a的值是:{{numbers.a}}</h3> <button @click="numbers.a++">点我让a+1</button> <h3>b的值是:{{numbers.b}}</h3> <button @click="numbers.b++">点我让b+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, numbers:{ a:1, b:1, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ isHot:{ // immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //监视多级结构中某个属性的变化 /* 'numbers.a':{ //注意用完整的key格式，加上引号 handler(){ console.log('a被改变了') } } */ //监视多级结构中所有属性的变化 numbers:{ deep:true, handler(){ console.log('numbers改变了') } } } }) </script> </html>
7.监视属性和计算属性的区别:
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。