建设什么网站游戏优化大师手机版
一.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 或 组件实例对象。