meiggin / vue Goto Github PK

01.01  
el指向的页面的节点元素,data指定的是数据,{{ title }}两个大括号的语法方式叫“插值表达式”;

01.02
简单数据类型、复杂数据类型、函数等都可以在插值表达式中进行显示,并且不需要写this.title,也不需要写data,我们的函数编写在methods内,直接{{ fn() }}调用即可;

01.03
v-model可以绑定data的对象值,v-on可以绑定methods下定义的方法,而v-on的缩写则是@,如@input操作;

01.04
vue中不能在任何html标签的属性值中使用{{ property }}进行设置,需要通过v-bind进行属性值的数据绑定,例如v-bind:href,而v-bind的缩写则是:,如:href操作;

01.05
v-once可以让节点渲染的时候只允许渲染一次,就算是方法里重新设置也不作更新,如果没有用v-once的话,{{ data }}将会被进行二次渲染;

01.06
如果设置的属性是一个html标签类型的内容,那么,直接用表达式方式将会输出“未加工”过的字符串内容,如果想要让其显示其html的内容形式,可以利用v-html的方式进行数据绑定;

02.01
事件方法编写在methods中,可以利用v-on进行对象的事件绑定,缩写则为@eventName;

02.02
如果是鼠标移动事件的绑定,可以利用v-on:mousemove进行绑定,函数中可带参数event,通过event来获取事件传递的属性;

02.03
函数的参数传递,可以将事件$event作为参数传递到函数中;

02.04
事件可附带修饰符,修饰符除了有stop、prevent、capture、native、self还有键别名enter及键代码13的修饰符;

03.01
在DOM元素中利用表达式进行三目运算操作;

03.02
利用v-model进行双向数据的绑定;

03.03.01
将三目运算操作放置到methods方法中进行操作;

03.03.02
通过按钮直接改变变量,再调用函数实现;

03.03.03
通过计算属性,区别方法与计算属性之间的差异,操作counter的时候Computed和Methods都执行了,而secondCounter的时候却只执行了Methods函数,没有执行Computed的函数内容,是因为secondCounter操作时并没有改变counter值,所以不发生Computed值的计算操作,而且需要注意的是Computed的输出模式直接输出属性值即可,不需要函数表现方式;

03.04
利用watch可以对对象内容进行监控操作,但需要注意this对象的不同,键名是需要监控的表达式内容,键值是回调的函数;

03.05
可以将事件绑定v-on:缩写成@,可以将数据绑定v-bind:等缩写成:

04.01
可以利用:class实现样式的动态绑定;

04.02
通过computed以及对象属性的设置,可以对DOM设置Object形式的样式内容,通过条件判断到底需要调用哪一种样式内容,而对象的键名即可以是样式类名;

04.03
变量名以及对象形式的样式设置可以同时以数组的形式设置到页面的DOM对象中去;

04.04
单独样式设置可以利用:style进行操作,但是需要注意属性的书写格式将变成驼峰式编写方式,并且-符号将会去除,例如：background-color将书写成backgroundColor;

04.05
同样的,:style可以设置为数组结构形式,其中的内容既可以包含变量,也可以包含驼峰式书写方式的样式内容,并且样式中还可以调用设置的变量或者动态计算的变量值等;

05.01
v-if和v-else能够实现在DOM节点中的判断操作;

05.02
如果是多DOM节点,则可以利用template进行包含,再用v-show对它进行判断是否显示与隐藏;

05.03
v-show操作节点的话,元素节点还是存在的;

05.04
v-for可以实现对象的循环;

05.05
v-for中还可以加入index下标的属性输出;

05.06
v-for在template中同样也可以作用;

05.07
v-for同样可以循环对象,包括循环嵌套输出。对于对象的循环,可以利用key/value/index进行输出相应的内容;

05.08
可以利用v-for实现从多少到多少的区间循环;

05.09
v-for的在循环数组时key值与index的输出操作;

06.01
搭建一个基本框架,有你、怪兽,开始游戏、攻击、特殊大招、回血、放弃游戏等;

06.02
你和怪兽初始值的血量都是100,并且开始游戏为否;

06.03
通过条件判断,在游戏没有开始的时候,只显示开始游戏按钮,其它按钮将进行不显示操作;

06.04
通过条件判断以及事件的触发,当点击开始游戏按钮时,则不再显示开始游戏按钮,而显示其它操作的按钮;

06.05
处理攻击操作,通过max和min实现对你和怪兽的任意血量伤害的攻击操作,并且判断血量是否少于0,根据该值来确定到底是你赢了还是怪兽赢了;

06.06
将伤害操作与输赢判断单独进行函数化处理;

06.07
增加怪兽攻击以及特殊化攻击操作;

06.08
增加回血操作内容,对玩家进行+10的血量回复以及怪兽对玩家的随机攻击操作;

06.09
放弃游戏就是将游戏正开运行的变量进行取消;

06.10
给游戏增加日志输出显示区域;

06.11
给游戏增加turns轮流信息输出变量,通过unshift函数将输出信息放置在数组的最前端,然后在界面中进行显示操作;

06.12
对特殊攻击、回血等操作的日志加以完善,都输出到日志列表当中;

06.13
通过:class绑定对象属性的方式,给不同的日志对象增加不同的样式显示;

07.01
单个基本实例,包括el、data、methods、computed、watch等内容;

07.02
创建多个实例,绑定不同的DOM对象;

07.03
声明对象为Vue的实例,可以利用“实例对象.属性”的方式在外面修改某个实例的属性值;

07.04
除了可以在外部设置与修改实例的属性值,还可以调用实例的事件及方法;

07.05
在实例外部可以定义数据,通过“实例对象.$data.属性值”可以获取具体实例中数据的属性值内容,通过比较发现“实例对象.$data”与外部定义的数据保持了相等一致性关系。最后,在不同的实例中可以通过“实例对象.属性”的方式去修改某个实例的属性值（“实例对象.$data.属性值”和“实例对象.属性”作以比较判断 );

07.06
对于Vue对象内容,可以利用ref来进行指定与识别,该操作有些类似HTML中的Id方式;

07.07
在构建Vue实例时可以设置其template模板内容,再使用$mount来进行对象的加载,然后将“实例对象.$el ”显示在具体的页面中;

07.08
可以编写Vue的component,然后利用组件实现模块的重复使用操作;

07.09
Vue实例对象的生命周期的钩子函数包括： beforeCreate、 created、 mounted、 updated、 beforeDestroy、 destroyed等;