Vue学习记录（coderwhy）——生命周期、mustache、v-once、v-html、v-text、v-pre、v-cloak、v-bind、计算属性、v-on、v-show、v-if、响应式

Vue初体验

原来用js——命令式编程
1.创建div元素 设置id属性
2.定义一个变量交message
3.将message变量放在前面的div元素中显示
一步一步告诉你怎么做
现在用Vue——声明式编程
可以实现数据和界面的完全分离

 	<div id="app">
        <h2>{{message}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止Vue在启动的时候生成生产提示
        //创建Vue实例
        new Vue({
            el:'#app',//用于挂载要管理的数据
            // 或者el:document.getElementById('root') 麻烦
            data:{
                message:'nihao',
            }
        })
    </script>

Vue的生命周期

生命周期就是 你看起来只是创建了一个Vue实例 但是它内部做了很多事情 而且做完每一步都会告诉你现在到哪里了（回调）

mustache语法

在mustache语法中 不仅仅可以直接写变量 也可以写简单的表达式

需要空格的语法

v-once指令

加了v-once的指令后 在console里面进行更改的时候 不会随着新更改而改变，就是元素和组件只会渲染一次 不会跟着数据的改变而改变
该指令后不需要跟任何表达式 比如之前的v-for后面是跟着表达式的

v-html指令

这样会显示单引号里面所有内容 包括html标签

用v-html可以显示真正的链接

v-text

跟mustache的效果类似 但是不够灵活

用mustache可以实现拼接 但是如果用v-text的话就会覆盖掉后面想要拼接的内容 只剩下message

v-pre

有点像标签

跳过这个元素和他的子元素的编译过程 用于显示原版的mustache语法

第一个h2输出的是hello 第二个h2输出的是{{message}}

v-cloak

有些情况下 浏览器可能会直接显示未经编译的mustache标签（{{message}}）为了避免这种情况 用v-cloak指令直到编译完毕以后再显示

v-bind

动态绑定属性
语法糖——：

1.动态绑定class——对象语法

{}——对象的方式 键值对方式

布尔值在data里面进行判断 可以在控制台进行布尔值的更改
app.isActivge = false;

2.动态绑定class——数组语法（用的比较少 因为这样本质上也是写死的类 还不如用原来的办法）

3.动态绑定style样式——组件化开发的时候用的比较多
驼峰命名法不需要用引号 写css样式名的时候要带引号

数组语法（用得少）

计算属性

本质其实就是一个属性 不需要加小括号 声明的时候也不需要用动词


methods和computed看起来都能够实现我们需要的功能 但是compu会进行缓存 如果多次使用的时候 计算属性只会调用一次 所以computed性能较高（尤其是有循环等的时候）

计算属性的get和set方法

因为不设置set方法 所以使用的时候不带括号

要想进行set设置 必须要传入newValue参数

事件监听v-on

用于交互 v-on 缩写@
参数问题

如果函数需要参数 但是没有传入 则函数的形参为undefined
但是在事件定义的时候 写函数省略了小括号 但是方法本身是需要一个参数的 这个时候 Vue会默认将浏览器产生的event事件对象作为参数传入到方法中
情况三、需要event又需要其他参数
如何获得浏览器产生的event对象 ： $event
修饰符问题

v-show和v-if

v-if当条件为false的时候 包含的元素 根本就不会存在在dom中 改成true后 要重新创建
但是v-show 为false的时候只是增加了一个display:none 这样的行内样式而已

v-for遍历

想要获取index

响应式的数组方法

1.push方法——响应式
2.通过索引值修改数组中的元素——非响应式
vue不会再次渲染 只是在dom里进行修改 不会展示在界面上

this.letters[0] = 'a';可以采用替换splice的方式达到响应式的目的

可以做到响应式的方法们：

1.push方法
this.letters.push('aaa')
this.letters.push('aaa','bbb','ccc')

2.pop方法
删除数组中的最后一个元素
this.letters.pop()

3.shift()方法
删除数组中的第一个元素
this.letters.shift()

4.unshift()方法
在数组最前面添加元素
this.letters.unshift()
this.letterd.unshift('aaa','bbb','ccc')

5.solice()方法
作用比较多：删除元素 插入元素 替换元素
splice(start)
第一个参数：start 删除、插入、替换的元素从哪里开始
第二个参数：
删除——传入你要删除几个元素 如果没有传 就删除start序号后面的所		   有元素
替换——this.letters.splice(1,3,'m','n','l','x') 可以这么理解 先把从1后面的3个元素删掉 再插入m、n、l、x四个元素在后面
插入——第二个参数设为0 并且第三个参数设置为要插入的元素
另一个方法：Vue内部实现的方法
set(要修改的对象，索引值。修改后的值）
Vue.set(this.letters,0,'bbb')

6.sort()方法
排序

6.reverse（）方法
数组反转