vue.js.小白入门笔记

1.挂载点：vue实例中el属性对应的id它所对应的dom节点。

2.模板：在挂载点内部的所有内容都称为模板内容。模板可以写在挂载点内部（一般选择用两个花括号装着，称为插值表达式）也可以写在vue实例 中，用template属性装。

3.vue实例中的数据：数据装在vue实例中的data属性中，data属性下的数据以键值对的形式存在，当需要调用data中的数据时有几种方法：可以在元素中用指令v-test（v-html也可以，还带有转义功能）:"键名"。还可以在元素后面用{{键名}}来引入数据。

4.vue实例中的事件：通过v-on指令（或者用@事件）可以给元素绑定事件（例如绑定一个点击事件v-on:click=“事件名”，然后在vue实例中定义方法，当触发点击事件时就会调用vue实例中的函数） 。

5.vue实例中的方法：把方法定义在vue实例中的methods（方法）属性下，写法为methods：{事件名:function（）{方法中改变实例中的数据，vue实例监听到数据改变会自动更新模板}}。

6.vue中的模板指令：
①v-text、
②v-html、
③v-for（当需要循环遍历数据项里的数组数据，展示到页面上时，就用v-for），写法为v-for=“item（这是每次遍历后用来存放数据的变量） of list（这是遍历的数组名）。当循环展示数据的时候就用{{item}}放在标签中”，当使用v-for时，记得使用：key=""来提升每一项渲染的效率即性能，可以用item作为key值（在item没有重复的情况下）因为key值是不可以一样的，这时候可以用index索引值（但是实际上不是特别好的选择，不需要变更或者排序之类的可以使用index）。
④v-if指令（适用于只需要一次或者少次对元素进行创建或者销毁操作时）：当它对应的数据项的内容是false的时候，它会把这个标签直接从dom中移除。
⑤v-else、
⑥v-else if 、
⑦v-bind、
⑧v-model、
⑨v-show指令（适用于需要频繁的，对元素进行显示和隐藏的，某个场景中）：当变量值即数据项的值是false的时候，该标签会被隐藏并不会被dom清除，而是只是把标签的display属性值变为none、也还可以自定义指令。

7.vue中的属性绑定：例如给一个标签添加title属性，要实现属性内容动态改变，这时可以在vue实例中的data属性里放入一个键值对（键例title），然后在标签中用v-bind（或者：）title=“键名”。

8.vue中的双向数据绑定：用v-model模板指令可以实现数据的双向绑定，（例在元素中用v-model=“键名”来绑定data数据中的键值对来实现）（单向绑定是数据决定页面的显示，但是页面无法决定数据里的内容）。

9.vue中的计算属性和侦听器：computed属性表示一个属性由其它属性计算而来（它有一个好处就是如果其它属性没有改变的话，那个属性可以直接调用上一次的计算缓存值来使用。所以性能是比较高的）。侦听器是去监听某一个数据的变化，一旦这个数据发生了变化，就可以在侦听器里面（在vue实例中用watch属性来定义侦听器：{侦听的对象：function（）{业务逻辑}}，它可以监测某一个数据或者计算属性发生变化）去做业务逻辑的变化。

转载于:https://www.cnblogs.com/nbb-hbb/p/9367192.html